La ChorriWeb de Empresa

En este post, complementario al vídeo de youtube de título similar, encontrarás las instrucciones escritas, así como enlaces e información de interés para poder hacer tu página web de empresa.

¡Crea tu web de empresa a medida, moderna, responsive, rápida, orientada a convertir y a posicionar!

Siguiendo este tutorial, sabrás cómo hacer una web de empresa, para tu negocio o para vendérsela a un negocio de tu localidad.

Atención: Este tutorial es para hacer una web de empresa a medida. Usando plantillas como Sidney o Zerif Lite, puedes obtener buenos resultados para webs de empresa, pero no podrás hacerte cargo de peticiones por parte del cliente. Me refiero a esos comentarios de «podrías poner que esto en vez de tener esta animación tenga esta otra?», «Podrías hacer que en vez de ser de este color sea de este otro», «me gustaría que la barra de arriba sea de esta forma o de esta otra», etc.

Vamos a ello, ya verás qué fácil.

Vídeo tutorial para crear una web de empresa

No te pierdas el vídeo de YouTube, donde explico paso a paso gráficamente cómo montar la web para un negocio.

Crear una web de empresa paso a paso

Vamos a ver cómo hacer la web corporativa de un negocio paso a paso, sin saber programación, de forma fácil y barata.

Recuerda que si quieres saltarte toda la configuración y pasar directamente al diseño, puedes descargarte la semilla de la web con todos los plugins preconfigurados en el ChorriClub.

1. Contratación de Hosting y Dominio

Te recomiendo este post sobre cuál es el mejor hosting del mundo y qué dominio escoger para entender en profundidad de lo que estamos hablando. Pero te hago un resumen:

El hosting (o alojamiento en español), es el lugar físico que albergará los datos de tu web. Imagina que tu web fuera un texto en Word, o una Hoja en excel, que está alojada en un sitio lejano y que cualquiera puede acceder. Ese sitio lejano es nuestro hosting, y es un ordenador, es una computadora que hace funcionar en su sistema los datos de web para que la gente pueda ver qué hay ahí.

Y el dominio es la forma que tenemos de acceder a esos datos, es como el número de teléfono de tu página web.

Estas dos cosillas te las alquila una empresa, un proveedor de hosting.

Contratar Hosting para una web de empresa

Si sólo vas a tener una web, y ésta no va a recibir muchas visitas (más de 100 al día), prácticamente cualquier hosting del mercado te va a valer, por lo que puedes conseguir alguna opción muy barata. Déjame que te muestre una comparativa por si te cuesta decidirte:

Perdonadme la comparativa llegará pronto, no doy a basto.

Contratar Dominio para una web de empresa

En cuanto al dominio cualquier empresa te puede valer, muchas veces las empresas de hosting te incluyen en su precio un dominio, y así no te tienes que preocupar de contratar estas dos cosas por separado, pero en ocasiones te puede salir más a cuenta comprar el dominio a parte.

Para ver precios y tener en cuenta todos los detalles, te recomiendo tld-list.com.

2. Instalar  y configurar WordPress

Cuando por fin hemos contratado nuestro hosting y nuestro dominio recibiremos varios datos: una dirección para conectarnos, un usuario y una contraseña.

Nos conectaremos a una plataforma llamada Cpanel.

Cpanel es un administrador del hosting. ¿Recordáis que decíamos que nuestra página web estará en una computadora lejana? Pues para «toquetear» esta computadora de una forma sencilla y gráfica, tenemos Cpanel. Si no lo tuviéramos, todo lo que vamos a hacer a continuación tendríamos que hacerlo en una pantallita muy parecida al MS2 o al CMD de Windows.

Es usando esta herramienta que vamos a instalar WordPress.

También en este panel configuraremos correos electrónicos y haremos que nuestra web salga con un candadito verde al lado de su nombre, pero eso lo haremos más adelante

Qué es WordPress

WordPress es un CMS (Content Management System) o Sistema de Gestion de Contenidos. Viene siendo una forma gráfica visual y sencilla de poder hacer páginas web. La forma sencilla de hacer webs más popular del mundo.

WordPress, para que te hagas una idea, es como lo que Power Point es a una Presentación. Es un panel con un montón de opciones que te permiten editar toda la página web, y así decidir qué y cómo mostrar la web online.

Para instalar esta maravilla, casi todos los Cpanel incluyen un botón que lo hace ridículamente sencillo. Ese botón suele llamarse Instalatrón, y ya te describe ahí mismo que es para instalar WordPress.

En caso de que vuestro panel sea Plesk, es incluso más sencillo e intuitivo.

Y si no conseguís hacerlo, siempre podéis seguir las instrucciones de wordpress.org, o contactar conmigo para que os eche un cable.

Loguearse en WordPress

Lo mejor de este programa es que puedes gestionarlo todo desde tu navegador (Chrome, Firefox, Safari, Edge…).

Una vez creas el WordPress, tu web ya existe, pero todavía te falta entrar al menú de este programa para poder editar.

Para ello, es muy sencillo. Escribe en la barra de direcciones: tudominio/wp-admin (siendo tu dominio el que hayas contratado, por ejemplo superabogados.com/wp-admin)

En este punto te saldrá una pantalla para escribir tu nombre de usuario o correo electrónico de registro y una contraseña. Será las que hayas elegido durante el proceso de instalación de WordPress en el Cpanel.

3. Configurar WordPress

Hora de preparar nuestro WordPress para que sea óptimo, y nos ayude en el posicionamiento y en la gestión de nuestra página web de la mejor forma posible.

Ajustes previos

Antes de empezar con WordPress, vamos a tocar una cosilla en el Cpanel. Me refiero al SSL o HTTPS. Esto viene siendo una configuración que vamos a hacer para que en la barra de direcciones no aparezca «no es seguro» sino que haya un candadito que si le pones el ratón encima ponga: «Es seguro».

Realmente no es muy importante en webs que no recojan datos importantes como números de tarjeta de crédito, pero psicológicamente afecta a los visitantes y además google te posicionará algo mejor si lo tienes.

En el mejor de los casos esto ya te vendrá de serie, y no tendrás que hacer nada, otras vces habrá un botón en el Cpanel que ponga «Let’s encrypt» y que al clicar fácilmente te configure el SSL.

Pero dependiendo del hosting que tengas ésto puede complicarse, pero debes saber que siempre hay una forma gratuita y legal de de hacerlo, si el Cpanel no incluye ese botón de Let’s Encrypt, consúltales sobre cómo hacerlo o hazlo con Cloudflare. (Traeré un tutorial pero de momento puedes buscar en google: «activar SSL con cloudflare»).

Cuando esté activado podrás ir a tu navegador y escribir: https://tudominio.com, y arriba habrá un candadito cerrado a la izquierda de tu URL.

Una vez funcione, continuamos.

Ajustes de WordPress

Primero vamos a ir a donde pone Ajustes, y vamos a hacer lo siguiente:

• Ajustes Generales: En esta sección sólo tenemos que ver nuestra URL principal y poner la «s» en http:// para que en ambas casillas ponga https://. Además puedes configurar aquí alguna cosilla a tu gusto, como el idioma, el estilo de la fecha y el día primero de la semana.
• Lectura: Debes saber que en esta sección hay un botón que permite decirle a google que no quieres salir en su buscador. Si sí que quieres salir, deja la casilla sin el tick!
• Enlaces permanentes: Aquí puedes ver la forma que tendrán tus URL, la que mejor funcionará en nuestro caso es la última opción con /%category%/%postname%/ escrito en la casilla.
• Privacidad: Si cambiamos la página de privacidad no se nos olvide venir aquí y cambiarla.

Plugins básicos de WordPress para la ChorriWeb de Empresa

Plugins que todo el mundo debería tener:

• Classic Editor: De verdad que el nuevo editor de bloques de WordPress está realmente en pañales. Mejor reactivar el clásico.
• Really simple SSL: así haremos que nuestra página cargue siempre con el candadito del que hablábamos.
• Yoast SEO: Nos ayudará a posicionarnos en Google.
• All-in-one WordPress migration: Te permite hacer y restaurar copias de seguridad.
• Sucuri Security: Te avisa cuando hay cambios o intentos de acceder a tu WordPress, una perfecta alarma de que intentan hackearte.
• Cookie Notice: De este no nos libramos… Se necesita tener uno de este estilo para muchas partes del mundo.
• Autoptimize: hará que la web sea algo más rápida en su carga.
• A3 Lazy load: Hará que las imágenes carguen con retraso, para que la página se muestre un poco antes.
• WP Super Caché: Prepara archivos compactos de tus páginas para que se muestren todavía más rápido.

Estos tres últimos plugins (Autoptimize+Lazyload+Cache) pueden ser sustituidos por uno sólo que es mejor, pero de pago, aunque lo tenemos gratis en el ChorriClub. El WP-Rocket, el mejor plugin para mejorar la velocidad de carga de tu web.

Plugins más técnicos

• Redirection: Sirve para que si cambiamos una URL, podamos hacer una redirección de la página antigua a la nueva.
• Child Theme Configurator: Te permite editar las plantillas del tema y así no perder los cambios que hagamos con código cuando ser actualiza el tema.

Plugins de diseño

Aunque muchos desarrolladores web aborrecen y odian este tipo de plugins, pues su código no está nada optimizado… Hacen posible que gente sin conocimientos de programación y maquetación de páginas web puedan hacer posible lo imposible.

• Elementor: El constructor más popular
• Elementor Pro: la extensión de elementor que la añade los bloques que le falta al básico. Lo tienes gratis si eres miembro del ChorriClub.

Configuración de los plugins

Algunos de estos plugins son muy sencillos, los activas y ya está. Pero hay otros que pueden tener cierta complicación, sobre todo cuando no estamos familiarizados con los términos de este mundillo.

No te preocupes, de todos los anteriores, sólo los siguientes tienen algo de complicación:

• All-in-one WordPress Migration: al principio te parecerá que no puedes restaurar archivos de más de 2mb, lo que es ridículo pues tu copia de seguridad, por básica que sea, pesará mínimo 20 o 30 mb. No pasa nada, si sigues los enlaces que te recomienda el plugin, llegaras a descargar una extensión que hace que puedas recuperar backups de hasta 256mb. Para instalarla le das a nuevo plugin, subir archivo, lo seleccionas y le das a instalar.
• Yoast SEO: Lo mejor es revisar poco a poco, pero te recomiendo que veas el vídeo en el minuto (si lees esto recuérdame que tengo que poner aquí el minuto exacto, gracias).
• Autoptimize: Activamos todo.
• WP Super Caché: vamos a seleccionar todas las opciones que digan «recomendado».
• En mi caso: yo utilizaré el WP-Rocket. La configuración de este plugin es sencilla, es ir leyendo y marcando prácticamente todas las casillas de los ajustes en las pestañas Caché, Optimizar, Medios, y Precargar
• Child Theme Configurator: Mejor ver el vídeo también para esto en el minuto 30:10.

4. Diseñar la página web

¡Por fin! Ya podemos empezar con nuestra página web… bueno no. No te adelantes. Primero vamos a pensar bien qué queremos.

Pensar la estructura de la página

Básicamente, para una empresa, yo te recomendaría elegir entre dos tipos de diseño:

A – Casi todas las secciones principales de tu web en la portada de tu web, y las que sean secundarias a parte.

Típico en muchas webs de empresa modernas, una portada llena de información resumida con enlaces para ver más información, al blog, o a otras secciones de la página.

B – Una portada prácticamente vacía con una clara llamada a la acción

Por llamada a la acción me refiero a que sería algo que deje totalmente a huevo lo que quieres que tus visitantes hagan. Si es mandarte un mail, muestras un formulario, si es llamarte, un botón que marque el número, si es registrarse, un botón de registro…

C – Tipo blog.

No recomiendo tener una web de empresa tipo blog, que muestre entradas y una barra lateral en la portada. Por eso decía que habría que elegir entre la opción A y la B.

En mi caso elijo la A. Vamos a hacer una portada con muchas secciones bien organizadas y que se preste a realizar la acción que deseamos.

Hacer un esquema de lo que queremos

¡Saca papel y boli! Bueno… mejor en vez de boli, que sean un lápiz y una goma.

Con un papel vamos a diseñar qué secciones queremos mostrar.

En este punto, piensa (o pregunta a tu cliente) qué páginas te gustan, que otras webs de este u otro sector te parecen bonitas y bien diseñadas. Eso te ayudará a hacerte una idea de lo que quedará mejor. Si quisieras copiar el tema o la tipografía de otra web, te recomiendo que mires la herramienta builtwith.com.

Bueno, para que lo tengas en cuenta, en tu web deberías, por lo menos, tener las siguientes secciones:

• Zona de inicio: la portada entera o la parte de arriba de esta. Lo que ve el usuario nada más entra a tu web. Queremos un texto? una foto? el logo? Hay muchas opciones, pero es importante dejar claro qué se van a encontrar aquí donde han llegado.
• Nuestros servicios: Qué vendes, que ofreces. Como comprenderás es muy importante.
• Sobre nosotros: Puede ser una página a parte o ser una sección dentro de la portada, debe contener un texto cercano, pero que muestre la personalidad y las personas que están detrás del nombre de la empresa. Esta es una sección que mucha gente mira, y que es determinante para aumentar la confianza de tus usuarios y que así se conviertan fácilmente en clientes. Cuida mucho esta sección. Es muy interesante añadir fotos de la oficina, el edificio…
• Contacto: Lo mismo, sección o a parte, pero muy importante.
• Dónde estamos: Sobre todo si el negocio tiene tienda u oficina física, pero si no la tiene, también es interesante poner desde dónde trabaja la gente que forma la empresa o dónde están los almacenes.
• Blog: Una sección a parte, dónde hagas márketing de contenidos. Esto significa ofrecer información gratis para que la gente te encuentre cuando busquen esa misma información. Así conseguirás la mejor publicidad, subir posiciones en google.
• Privacidad y cookies: Siempre una página a parte, pero debe haber un enlace a ella en el footer de tu web.

Y ocasionalmente nos podemos lucir y crear otras páginas o secciones:

• FAQ: Frequently Asked Questions, o preguntas frecuentes. Muy útil también para posicionar, pero también para tus usuarios y clientes.
• Comparativa de precios: Si vendes servicios, una tabla comparativa luce mucho, tenlo por seguro.
• Términos y condiciones: Si ofrecéis algún servicio o vendéis algo. Al igual que la anterior, siempre accesible.
• Tienda: Si vendes algo puedes hacerte aquí una tienda, por supuesto
• Foro: Si tienes una comunidad, podrías plantearte crear un foro en tu web, o en un subdominio de tu web.

¿Ya tienes claro lo que quieres? Has decidido qué secciones, qué orden, qué colores?

Ah! ¿que los colores no los tienes claros?

¿Qué colores usar en una página web de empresa?

Ya entiendo lo que pasa, no tienes ni idea… mantén la calma pues hay trucos.

Piensa en el logo, si ya lo tienes porque la empresa ya tiene un logo… ¡Fácil, utiliza esos colores!

Lo ideal es que sean 4 colores, de gamas complementarias, y que al menos puedas superponer 2, no te estreses pues con que tengas 2 colores, otro puede ser gris y otro blanco.

Pero una buena composición de colores te va a ayudar mucho visualmente. ¿Sabes lo que son los colores complementarios?

Se les llama colores complementarios a los colores opuestos del círculo cromático exterior de esta imagen. Son colores que destacan muy fácilmente al lado del otro. Además, dentro del hexágono interior verás colores bastante básicos, esos tienen la ventaja de que destacan bastante entre todos ellos.

Muchas veces (como es mi caso) nuestro logo no tendrá estos colores claramente definidos, y tendremos que echar mano de la imaginación para salvar las diferencias.

¿Ya sabes qué colores usar?

Pues haz una cosa, visita la página web htmlcolorcodes.com o utiliza la extensión de Gooogle Chrome Colorzilla, para copiarte en un lugar seguro los colores exactos en html que vas a utilizar.

En mi caso serán: #395259 (azul oscuro 1), #B0A43A (amarillo mostaza), #177987 (azul oscuro 2), #3C3C3C (gris), y #FFFFFF (blanco).

5. Hacer la página web de empresa

¡Manos a la obra!

En primer lugar vamos a crear las páginas que necesitemos. Piensa en estas páginas en direcciones después de tu dominio que albergan otras secciones a parte del inicio pero pertenecientes a la misma web.

Por ejemplo, si tu web es jamonesdegarcia.com. La portada sera esa misma dirección (URL) y a parte podemos tener otra, por ejemplo con el formulario de contacto que sería: jamonesdegarcia.com/contacto.

Aclarado esto, vamos a mi caso de ejemplo.

En portada yo quiero:

• Cabecera: lo típico, el logo y algunos enlaces a zonas importantes de la web.
• Presentación: un breve texto que aclare a la gente que está en el sitio correcto y qué encontrará en la página.
• Llamada a la acción: Inmediatamente después les pondré un botón para que salten a contacto directamente, que es lo que mi cliente desea, que le llamen o que le escriban.
• Servicios: Puede ser que primero quieran saber si hacemos lo que necesitan, así que ahora les mostramos de lo que somos capaces.
• Y les ponemos otro botoncito de llamada a la acción.
• Quienes somos: Si no clican el botón y desean seguir bajando, les vamos a ofrecer confianza, fotos del equipo con algo de biografía y puntos fuertes.
• Contacto: el formulario de contacto en sí, con los números de teléfono.
• Localización: puede ser que el cliente no quiera llamar sino que prefiera pasarse por el despacho, así que le vamos a poner aquí el mapa y la dirección exacta.
• Footer: (o pie de página), vamos a poner aquí los enlaces de interés. Estos serán un par de entradas del blog y acceso a las políticas de privacidad. Por si no les queda claro, y para que salga siempre en otras páginas, aquí les pondremos también acceso directo a nuestra llamada a la acción: CONTACTAR!

Y otras secciones:

• Privacidad y Cookies: Un formulario básico con la información de la empresa para cumplir legalidades.
• Servicios: Una versión extendida de los servicios mostrados en la portada, por si alguien quiere ver las cosas con más detenimiento.
• Preguntas frecuentes:
• Blog: Vamos a hacer una sección de blog para poder hacer marketing de contenidos. Usa una palabra clave para tu página de blog, así ayudarás a posicionar.

6. La web ya está acabada, ¿qué falta?

Pues le falta una cosa muy imporatente, bueno dos… bueno quizás alguna más.

Google analytics

Una web sin estadísticas no sirve de nada, necesitamos saber la gente que entra , las páginas que visita, el tiempo que permanece… Todo esto es posible gracias a google analytics.

Hay dos formas de implementarlo en nuestra web. La «complicada» es poner un código en el head, y para ello es recomendable hacer un child antes.

La sencilla es a través del plugin Monster insight, que te pedirá el código que te da el analytics.

Search Console

Esta herramienta de google sirve para saber las palabras clave que la gente escribe en google y que como resultado dan alguna parte de tu web. además te informará en qué posición sales en el buscador, cuántas veces lo haces y el número de veces que la gente clica en tus resultados. Una maravilla.

Google my bussiness

Un perfil en google para tu empresa, así cuando alguien busque por el nombre exacto en Google, saldrá ya no sólo de primero, sino además a la derecha saldrán fotos, horario, dirección. Fenomenal vamos.

Es tan sencillo como buscar «Google my bussiness» en google y hacerte un perfil en este servicio. Recuerda poner bastantes fotos y bonitas, y añadir la mayor cantidad de información posible.

Integración con lista de mail

Algo que muchas empresas querrán serán poder hacer una lista de correo para mandar promociones o información. Esta es una forma de marketing que funciona muy bien.