En Noviembre de 2017 te hablaba sobre la fabulosa plantilla de Divi, la cual te permite crear webs de una manera muy sencilla y para los usuarios "no técnicos".
En esta ocasión te traigo un ejemplo práctico en el que vamos a hacer una web completa gracias al plugin Divi Builder.
De una manera sencilla, con un lenguaje fácil y muy fácil de seguir, voy a repasar todos los pasos necesarios para tener una web funcionando, con la tecnología de WordPress y Divi y a través de la cual puedan contactarte tus posibles clientes.
He de avisar que este ejemplo que voy a construir tiene las siguientes características (o avisos) que tienes que tener en cuenta:
- Como contenido (texto y fotos) voy a usar loreipsum, porque no quiero detallar el contenido que tiene que ir en tu web, si no el continente (en este caso una página creada con Divi).
- En tus manos queda preparar un texto excelente y unas imágenes muy buenas y con mucho potencial creativo (para ello puedes ayudarte de alguno de otros artículos que Webempresa pone a tu disposición).
- Los pasos que no sean puramente relacionados con Divi, los voy a obviar en los vídeos (contratación de servidor, dominio, instalación de WordPress, etc).
- La web de ejemplo que voy a hacer es muy básica, para un negocio muy básico. Hay muchos tipos de webs, a cada cual más compleja, pero la que haremos es perfecta para PYMES y autónomos.
- Divi no me ha contactado para que haga este artículo hablando sobre ellos. Lo escribo con mucho cariño e ilusión porque sé que te va a ayudar para tener tu web terminada en mucho menos tiempo de lo que piensas.
Pasos y conceptos previos ante cualquier web
Desde que empecé en el mundo de la creación web, he ido aprendiendo a base de palos. Normalmente es la mejor vía. Voy a intentar resumirte los conceptos básicos que tienes que tener claros antes de ponerte de lleno con Divi.
También quiero comentar justo aquí, que a lo que tendemos siempre es a directamente ir a subir el contenido a una web, sin pensar en cómo al vas a estructurar, en dónde va a ir qué elemento, etc.
Te digo por experiencia que lo mejor es definir bien los requisitos que tiene que tener tu página, hacer un boceto de cómo quedaría, preparar bien el contenido organizado (textos, fotos...), configurar bien todas las opciones (fuentes de letra, colores, etc), y una vez tengas todo lo que no es contenido preparado, entonces, y como casi último paso, subir el contenido. :)
Verás que esto te ahorra muchos dolores de cabeza, sobretodo si eres implementador WordPress y trabajas con clientes que quieren cambiar la estructura, una vez todo está montado.
Qué necesitamos para tener una web
Una web creada con un gestor de contenidos como WordPress requiere de un espacio en un ordenador, en donde se alojarán:
- Los archivos base de WordPress (que te descargas de WordPress.org).
- Los archivos extra para WordPress (plantillas, plugins, etc).
- Los archivos que dan vida a tu web (imágenes, audios, etc).
- Una base de datos en donde se almacenará todo el contenido y configuración de tu web (artículos, páginas, menús, usuarios, etc).
Espacio para los archivos de la web
Este espacio puedes tenerlo perfectamente en tu ordenador de casa. El problema viene cuando te enteras de que dicho ordenador tiene que estar funcionando y conectado a Internet las 24 horas del día, para que la gente pueda visitar tu web (alojada en tu ordenador).
También te empieza a caer una gotita de sudor frío por la frente cuando te dicen que si te visita mucha gente a la vez, tu web se caerá porque tu ordenador no es lo suficientemente potente para recibir tantas visitas a través de Internet al mismo tiempo.
Por todo ello, lo que normalmente se hace es contratar un servicio de hosting (alojamiento) ya sea compartido o privado.
Webempresa, por ejemplo, es un servicio de hosting (aquí me vendría super bien un enlace de afiliado por si te das de alta, pero no, no lo voy a poner, porque no sería muy razonable por mi parte).
Yo mismo (independientemente de si escribo artículos para ellos o no) tengo alojada mi web principal con Webempresa, y estoy muy contento (sobretodo por el soporte y atención al cliente que tienen).
De hecho, estuve con ellos, luego me cambié a una empresa de hosting muy conocida que empieza por "B", y a los pocos meses me volví, porque echaba de menos el trato cercano que me daba Webempresa.
Cómo se visita ese "espacio" en el hosting
Una vez tienes claro dónde has puesto los archivos de tu web (que en un futuro manejarás con el plugin de Divi), simplemente tienes que ayudar a tus futuras visitas a que puedan decirle a su explorador de Internet cómo se llama tu web, para que la puedan visitar.
Y me refiero a cómo se llama porque normalmente, sin tener un dominio, lo que tendrían que escribir tus visitantes en su explorador de Internet para ver tu web sería algo así como https://XX.XX.XXX.XX/index.html (siendo las X tu número IP).
Y como es muy poco amigable que tu web sea visitada mediante un número tan largo y raro, lo que hace un dominio es precisamente mostrar el contenido de esa dirección web, de una manera bonita. (www.tudominio.com).
Los dominios los puedes comprar normalmente en donde sueles alquilar el espacio para tu web.
Inspiración de otros ejemplos que nos gusten
Con cada cliente que me llega nuevo a través de mi web, siempre les pregunto que me escriban dos o tres ejemplos de webs que les hayan gustado, para poder tener una referencia y diseñar algo que les guste.
Lo mismo puedes hacer tú para crear tu propia página web.
Si no sabes por dónde empezar, te recomiendo que visites varias webs (no tiene por qué ser de tu mismo sector) para inspirarte y captar ideas para tu diseño (recuerda que lo bueno de Divi es que puedes crear a tu gusto el diseño y estructura de una web).
Te recomiendo entrar a esta web para coger algunas ideas. Para mi ejemplo, me ha gustado esta web (la cual voy a usar como referencia, pero no tiene por qué quedar igual).
Paso 1: Haciendo el mockup
¡Entramos en materia!
Lo que más me gusta de todo el proceso es crear el diseño web al estilo borrador o mockup. Esto significa que mediante la colocación de bloques muy básicos y textos de ejemplo, puedes tener una idea de cómo quieres que quede tu web, para poder guiarte a la hora de construirla.
Para crear dichos mockups siempre utilizo Adobe XD, pero si no tienes la licencia puedes usar cualquier otro programa o software para hacerlo, e incluso ¡un papel y un lápiz! (si te gusta lo manual te recomiendo hacerlo en una pizarra tipo whiteboard).
Con mis clientes, lo que hago siempre es un primer "arbol" de estructura, para entender las funcionalidades de la web y el recorrido que va a tener el futuro visitante. (este paso no lo vamos a hacer aquí, porque nuestra web es muy sencilla).
A continuación creo un mockup muy básico, con cuadros grandes y textos de ejemplo, para que el cliente lo vaya aprobando y definiendo, y trabajar bien los matices de dónde es mejor que vaya qué elemento.
Por último, realizo dicho mockup básico en su versión más realista, con contenido real, y tal y como va a quedar al web (al menos en un 95%) una vez online. (este paso no lo vamos a hacer en este artículo).
Para la web de ejemplo, estos son los elementos que voy a construir, los cuales podemos tomarnos como los requerimientos de nuestro proyecto:
Hero
Se llama Hero a esa parte de la web que se ve nada más entrar en ella. Puede ser tanto una imagen estática con unas letras bien grandes, un color estático con letras de tipografía bonita, un vídeo de fondo... hay muchas posibilidades. Pero te recomiendo dos elementos que tienen que aparecer sí o sí en esta sección:
- Una llamada a la acción (un botón para rellenar un formulario, visitar la tienda, pedir un presupuseto, suscribirse a una newsletter... lo que necesites).
- Que no abarque toda la pantalla, para que se sepa que hay más contenido haciendo scroll hacia abajo.
Servicios
La web va a tener dos servicios: creación web y mantenimiento web.
Quienes somos
Voy a poner un total de 3 personas (un diseñador, un comercial y un programador).
Testimonios
Van a aparecer 3 testimonios diferentes de 3 clientes contentos.
Clientes
Van a aparecer 5 logos de 5 empresas que hemos tenido como clientes.
Formulario
Va a haber un formulario para enviar un mensaje directamente al comercial.
Paso 2: Preparando el entorno web
Una vez ya tenemos el boceto de cómo queremos que quede la web, vamos a preparar el entorno de WordPress con todo lo necesario para crear el contenido de nuestro mockup en versión web con el plugin de Divi.
Crear las páginas necesarias
Como nuestra web va a ser de tipo one page (hacer scroll por diferentes secciones) las páginas en sí no van a existir, si no que serán secciones definidas por un "ID" (ejemplo: #testimonios).
Crear menú
El menú aparecerá en la parte superior y gestionará los diferentes IDs de nuestra página.
Crear la Home
La página de inicio, en nuestro ejemplo, es la web entera, ya que como he comentado más arriba, el ejemplo que hago es tipo one page.
Si tu proyecto tiene otras páginas diferentes, define cuál va a ser la que se verá nada más aterrizar en tu web.
Configurar Permalinks
Como no tenemos páginas individuales, los permalinks en este caso simplemente serán las diferentes secciones de la web. Por ejemplo: www.miweb.com/#testimonios.
Si tu web tiene páginas individuales, asegúrate de revisar los permalinks en las opciones de WordPress.
Paso 3: Preparando Divi
Instalar Divi
El proceso de instalación de Divi es mediante un plugin. En el artículo mencionado al principio, tienes toda la información necesaria para saber cómo se instala. (el proceso es bien sencillo).
Crear y conectar la página de Inicio al constructor de Divi
Cómo solo tenemos una página (pero muy larga) con contenido, basta con que nos aseguremos que la página de inicio de nuestra web es la correcta.
Configuraciones específicas
A continuación nos vamos a meter en las entrañas de Divi, para configurarlo a nuestro gusto, antes de subir todo el contenido.
Subir Logo
Consigue tu logo a buena resolución, que se vea muy bien en todas las pantallas posibles, y súbelo a Divi.
Definir Colores
Define uno o dos colores principales (los más visibles) para tu web. Usa herramientas online para encontrar las mejores combinaciones de colores. Por ejemplo: amarillo con negro, azul y verde, etc.
Crear Header
Con Divi configuraremos qué elementos queremos que aparezcan en nuestro header en la web. (De ahí la importancia de tener los menús preconfigurados, así como el logo subido).
Crear Footer
Lo mismo para los elementos del footer. Normalmente basta con tener información de contacto, links a redes sociales, e incluso páginas de textos legales tipo "políticas de privacidad" y "términos y condiciones".
Evita poner dichas páginas en el menú principal en el header.
Opciones Avanzadas
En el vídeo (justo después del paso 4) vamos a revisar las opciones más avanzadas que ofrece Divi, para poder personalizar nuestra web al máximo.
Paso 4: Subiendo el contenido
Seguir estructura de mockup
Es aquí en donde radica la importancia de tener un buen mockup definido y que te guste (o que esté aprobado por tu cliente), para luego evitar cambios de estructura y de funcionalidades a nivel web.
Ten en cuenta que si te dedicas a crear directamente el contenido "a ciegas", siempre vas a querer cambiarlo cada dos por tres, y no es lo mismo cambiarlo en un programa de diseño gráfico, que en "código" (por mucho constructor de pincha y arrastrar que utilices).
En el vídeo vamos a crear bien todas las secciones de la web, y subir contenido (de ejemplo en mi caso, pero real en el tuyo) para ir adaptando la web lo máximo posible a cómo hemos definido en el mockup.
Crear formulario (para nuestro ejemplo)
Ahora es el momento de crear un formulario. Pondremos cuantos menos campos mejor, para que no se haga demasiado largo a nuestros posibles clientes.
Tip: no siempre hace falta un formulario
Dependiendo del negocio, no es necesario poner siempre un formulario.
Por ejemplo:
- Si tienes una peluquería, restaurante, bar, etc, lo que mejor te va a funcionar es poner tu teléfono bien visible siempre, en el header.
- Si eres un doctor, fisioterapeuta, profesor particular, quizás te interesa poner un calendario dinámico para que te reserven una cita, dependiendo de los espacios libres que tengas en tu horario de trabajo.
- Si simplemente no te gustan los formularios, pon tu email directamente (pero cuidado, porque puede que recibas mucho spam a largo plazo).
En el vídeo a continuación vamos a llevar a cabo los pasos 3 y 4, y verás que bien queda la web:
Y esto ha sido todo en cuanto al artículo sobre el caso práctico de cómo montar una web con Divi.
Espero que te haya servido y que te haya gustado. Si tienes cualquier duda, sugerencia y para ponerte en contacto directo conmigo, puedes enviarme un mensaje a través de mi página, o por Twitter.
Un abrazo y ¡nos vemos en el próximo artículo!