DIVI BUILDER: ¿QUÉ ES Y CÓMO UTILIZARLO PARA CREAR UNA WEB?

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

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:

1. 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).
2. 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.