Tiempo atrás te hablaba sobre la fabulosa plantilla de Divi, la cual te permite crear webs de una manera muy sencilla y además porque está muy enfocada a usuarios «no técnicos», aunque los profesionales la aprovechan a fondo.
En esta ocasión te hablo de Divi Builder: ¿Qué es y cómo utilizarlo para crear una web? y te traigo un ejemplo práctico en el que te explico cómo a hacer una web completa gracias a Divi.
De una manera sencilla, con un lenguaje asequible y muy fácil de seguir, repaso todos los aspectos necesarios para tener una web funcionando, con la tecnología de WordPress y Divi, a través de la cual puedan contactarte tus posibles clientes.
Al final, lo importante es que descubras el potencial que Divi aporta al diseño de sitios web profesionales y la versatilidad que tiene para crear elementos en páginas y entradas dignos del mejor maquetador de contenidos, eso si, ¡sin tocar una sola línea de código!
Tabla de contenidos
¿Qué se aborda en este artículo con Divi?
He de avisarte 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 lorem ipsum, porque no quiero detallar el contenido que tiene que ir en tu web, sino 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, 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 normalito. Hay muchos tipos de webs, a cuál más compleja, pero la que haré 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 a tener tu web terminada en mucho menos tiempo de lo que piensas.
Dicho esto, parto de la premisa de que tienes un Hosting Divi contratado y funcionando, o al menos has dado el paso de adquirir una licencia de Divi para instalar el Tema (que ya integra el constructor o builder) y poder seguir este artículo para crear un sitio web.
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. Por regla general 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 se tiende siempre es a subir el contenido a una web, directamente, sin pensar en cómo se va a estructurar, dónde va a ir cada 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, sobre todo si eres implementador WordPress y trabajas con clientes que quieren cambiar la estructura, una vez todo está montado.
¿Qué necesitas para tener una web?
Una web creada con un gestor de contenidos como WordPress requiere de un espacio en un servidor, lugar donde se aloja, para ser accesible desde Internet.
Requerimientos para ponerla en marcha:
- Los archivos base de WordPress (que te descargas de WordPress.org) o instalas desde un Hosting.
- Los archivos extra para WordPress (plantillas, plugins, etc.) que obtienes desde diferentes lugares.
- Los archivos que componen la web (imágenes, audios, etc.) que deberías tener previamente elaborados.
- Una base de datos 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 superbién 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 (sobre todo 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 accede al alojamiento de la web?
Una vez tienes claro dónde has puesto los archivos de tu web (que en un futuro manejarás con Divi), simplemente tienes que ayudar a tus futuras visitas a que puedan decirle a su navegador web cómo se llama tu sitio, para que lo 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 navegador de Internet para ver tu web sería algo así como https://XX.XX.XXX.XX/index.html (siendo las X tu dirección 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 más entendible. (www.tudominio.com).
Los dominios los puedes comprar normalmente en el proveedor de alojamiento, donde sueles alquilar el espacio para tu web.
Inspiración de otros ejemplos que te 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 tienen por qué ser de tu mismo sector) para inspirarte y captar ideas de 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, 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 “árbol” de estructura, para entender las funcionalidades de la web y el recorrido que va a tener el futuro visitante. (este paso no lo voy a realizar aquí, porque la web a crear es muy sencilla).
A continuación realizo 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 se muestre 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 realizo en este artículo).
Para la web de ejemplo, estos son los elementos que voy a construir, los cuales puedes tomarnos como los requerimientos de tu 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 o CTA (call to action), que no es más que un botón para rellenar un formulario, visitar la tienda, pedir un presupuesto, suscribirse a una newsletter, o 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.
Formulario
Va a haber un formulario para enviar un mensaje directamente al comercial.
En el siguiente vídeo te explico cómo crear un mockup o borrador de la web que quieres desarrollar mediante la colocación de bloques básicos y textos de ejemplo.
Paso 2: Preparando el entorno web
Una vez ya tienes el boceto de cómo quieres que quede la web, hay que preparar el entorno de WordPress con todo lo necesario para añadir el contenido del mockup en versión web con el plugin de Divi.
No te preocupes, te lo explico con algo más de detalle.
Crear las páginas necesarias
Como la web va a ser de tipo one page, una única página, en la que se hace scroll por diferentes secciones, las páginas en sí no van a existir, sino que serán secciones definidas por un ID identificador (ejemplo: #testimonios).
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 el 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 tiene 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.
En el siguiente vídeo te explico cómo llevar a cabo estos procesos.
Paso 3: Preparando Divi
Como te comenté al principio del artículo, para poder continuar en este punto necesitarás tener Divi (con licencia) que te permita instalarlo, si no lo tienes aún instalado en tu sitio web, de forma que puedas continuar con este proceso.
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 hay una página (pero muy larga) con contenido, basta con que te asegures que la página de inicio de tu web es la correcta.
Configuraciones específicas
A continuación hay que meterse en las entrañas de Divi, para configurarlo a tu gusto, antes de subir todo el contenido.
Subir el Logo
Consigue tu logo con 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 tienes que configurar qué elementos quieres que aparezcan en el header (cabecera) de la web. (De ahí la importancia de tener los menús preconfigurados, así como el logo subido).
Lo mismo para los elementos del footer o pie de página.
Normalmente basta con tener información de contacto, links a redes sociales, e incluso páginas de textos legales tipo «políticas de privacidad», de «términos y condiciones» o de «política de cookies».
Evita poner dichas páginas en el menú principal, en el header.
Opciones Avanzadas
En el vídeo (justo después del paso 4) te muestro las opciones más avanzadas que ofrece Divi, para poder personalizar la web al máximo.
Paso 4: Subiendo el contenido
Una vez tienes la estructura anterior creada y publicada, ahora toca centrarse en el contenido que vas a incorporar a cada página o sección de la página única que estás construyendo.
Seguir la estructura del 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 arrastrar y soltar que utilices).
En el vídeo te muestro cómo 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 hayas definido en el mockup.
Crear formulario (para el ejemplo)
Ahora es el momento de crear un formulario. Cuantos menos campos añadas mejor, para que no se haga demasiado largo a nuestros posibles clientes. Ya sabes que ante formularios con muchas preguntas, la tasa de abandono aumenta exponencialmente.
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 correo basura a largo plazo).
En el siguiente vídeo te explico cómo llevar a cabo los pasos 3 y 4 y luego el resultado de la web diseñada.
Conclusiones
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!
Curso recomendado:
Curso de Divi 4 básico – 100 % gratuito.
¿Te ha resultado útil este artículo?
Consultor de Marketing Online y WordPress con más de 8 años de experiencia. Creo webs con una experiencia de usuario enfocada a objetivos específicos (aumentar visibilidad, aumentar clientes, etc)y doy soporte a mis clientes con sus estrategias en redes sociales y en campañas de marketing online
