
¿Qué es el Divi Builder?
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.
Actualización: Ahora disponemos de un curso Divi gratuito en nuestra plataforma de Webempresa University
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 (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 visita ese “espacio” en el hosting
Una vez tienes claro dónde has puesto los archivos de tu web (que en un futuro mejorará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 suelen alquilar el espacio para tu web.
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, realizó 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 presupuesto, 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.