Curso Divi de 0 a 100 – Formación Profesional

¡Bienvenido al curso paso a paso de Divi, el theme más utilizado en WordPress!. En él te formaremos para ser todo un experto de esta plantilla, tal es así que podrás crear tus propias páginas webs o las de tus clientes como la haría cualquier agencia.

Este no es un tutorial común ya que le hemos dado un enfoque totalmente práctico, de manera que aprenderás todo: desde la instalación y configuración de la plantilla hasta el diseño web y recomendaciones profesionales para que puedas exprimirla al máximo.

Y lo más importante es que no necesitarás conocimientos técnicos de ningún tipo, puedes aplicar lo que te enseñaremos aquí incluso si es la primera vez que creas una web porque va explayado para todos los usuarios: tanto los iniciados como los expertos. Verifica por ti mismo la calidad del resultado: diseños Divi.

Recuerda que si te quedara alguna duda solo debes contactarnos para que te ayudemos a resolverla completamente gratis.

1. Introducción

1.1. Qué es Divi

Divi es la plantilla para WordPress más importante de la actualidad, es la más utilizada y ha sido recomendada por montones de profesionales en todo el mundo.

Se trata de un theme que no requiere de conocimientos técnicos para crear una página avanzada y de calidad, así que la puedes utilizar tanto si llevas años trabajando con WordPress como si es tu primer contacto y acabas de empezar.

No por nada se usada en millones de páginas web: páginas corporativas, tiendas online, academias, marcas personales, blogs…

1.2. Por qué utilizar Divi

Entre otras características que hacen a Divi única destacan:

  1. Posee más de 100 diseños profesionales que puedes importar desde el panel de administración, es decir, crearás todos los apartados de forma automatizada y sin complicaciones: Inicio, Productos / Servicios, Quién soy, Blog, Contacto, etc.
  2. Te permite editar estos diseños para acomodarlos a tu gusto: añade nuevos bloques con cualquier tipo de contenido, arrastrar y soltar para mover elementos, añadir contenido con 1 clic, etc.
  3. Todos los diseños que vienen con Divi son responsive y por tanto se adaptan automáticamente a cualquier dispositivo: PC, tablet o móvil.
  4. Gracias a que está tan extendida, existen una cantidad ingente de extensiones para añadir cualquier funcionalidad adicional que necesites.

2. Instalación de Divi

2.1. Instalar WordPress con Divi

Si aún no has montado nada de la página web y vas a instalar el WordPress desde cero, puedes añadir Divi con nuestro instalador automático:

  1. Primero ingresa en el cPanel: para ello ve al área de cliente (enlace en el menú de arriba) -> Servicios -> click en el servicio contratado -> dale al botón «Ingresar al cPanel» que hay a la izquierda.
  2. Desde aquí accede a la herramienta llamada: WordPress Manager by Artema Hosting.
  3. Presiona el botón azul «Instalar».

A continuación te aparecerá esta pantalla:

En el curso de WordPress ya explayamos todos los campos a fondo, si tienes dudas en alguno puedes revisarlo haciendo click aquí. En esta guía te indicaré exactamente cuáles deberías personalizar, todo lo demás ya viene correctamente configurado por defecto:

  1. Dominio: elige el dominio si posees varios, sino déjalo como está.
  2. Nombre del Sitio: aquí pon el nombre de tu marca o empresa, por ejemplo en nuestro caso sería «Artema Hosting» (sin comillas).
  3. Descripción del Sitio: el eslogan o la frase descriptiva de tu marca.
  4. Si aún no te ha generado un usuario y contraseña aleatoria espera unos segundos (esto es importante de cara a la seguridad). Acuérdate de guardar el «Usuario Administrador» y la «Contraseña Administrador» ya que los necesitarás para ingresar en el panel de WordPress.
  5. Verás que una de las herramientas que aparecen activadas es Divi, por lo que se instalará en el proceso.
  6. Finalmente dale al botón «Instalar» y el sistema se encargará de todo.

Recuerda que estas herramientas solo están disponibles para los clientes alojados en Artema Hosting, si aún no tienes alojamiento puedes contratar nuestro Hosting Divi que incluye la licencia (valorada en 89$), soporte técnico y asesoría especializada en WordPress: Hosting Divi.

2.2. Instalar solo la plantilla Divi en un WordPress ya existente

Si ya tienes una web con WordPress y quieres cambiar el theme por Divi puedes hacerlo del siguiente modo:

  1. Accede a tu panel WordPress.
  2. Ve a Apariencia -> Temas.
  3. Presiona el botón «Añadir nuevo» (sale arriba) -> Subir tema -> Examinar -> selecciona la plantilla de tu PC y dale a «Instalar ahora».
  4. Cuando finalice de cargarla simplemente dale al botón «Activar» y estaría listo.

Nota: si has contratado un Hosting Divi con nosotros deberías usar el instalador automático del punto anterior, sin embargo si no lo hiciste contáctanos y te la instalamos nosotros.

2.3. Instalar el Child Theme o Tema Hijo de Divi

Para poder añadir programaciones a medida o personalizaciones en el código fuente y que no se pierdan cuando actualices la plantilla, se debe agregar un Child Theme (explicación más detallada en el Curso de WordPress).

En caso de que lo necesites contáctanos y nosotros te lo dejamos instalado y configurado sin ningún costo.

2.4. Solicítanos la activación de la licencia

Para poder recibir actualizaciones automáticas e instalar los diseños de Divi (lo veremos en los siguientes pasos) necesitas tener una licencia activa que te dará acceso a todas las características premium de la plantilla.

Escríbenos al correo electrónico o abre un ticket y nosotros te activaremos la licencia para tu dominio totalmente gratis.

3. Importar un diseño de Divi

A partir de este punto ya podemos empezar a desarrollar nuestra página web y lo haremos usando los diseños profesionales que puedes ver clickeando aquí.

Son espectaculares ¿verdad?, pues cuando veas que en 10 segundos puedes instalar cualquiera de ellos vas a alucinar más aún:

  1. Crea un nuevo apartado desde Páginas -> Añadir nueva.
  2. Ponle el nombre que quieras, por ejemplo yo voy a crear la página principal de la web por lo que la llamaré «Inicio»; después dale al botón superior que dice «Publicar».
  3. Ahora dale al botón morado «Usar Divi Builder» y cuando cargue presiona en la segunda columna llamada «Elegir diseño».
  4. Selecciona el estilo que quieras instalar, clickea en él y te saldrán los diferentes diseños con su nombre, para la página principal lo normal es usar el que dice «Home» pero no hay ninguna restricción.
  5. Finalmente dale al botón verde «Use This Layout» y Divi lo hará todo por ti.

Nota: recuerda darle al botón de «Guardar» que hay en la parte inferior-derecha para que no se pierdan los cambios si cierras la pestaña.

Ya tienes implementado un aspecto estético excepcional y sin haber tocado una línea de código, ¡así de fácil y rápido!. Además puedes replicarlo para todos los apartados de la web.

Ahora repite esta operación para crear el resto de secciones: blog, sobre mí, contacto, etc. No te preocupes por editar el contenido porque eso lo haremos a continuación.

4. Configuraciones esenciales

Antes de añadir el contenido a las páginas que hemos creado, vamos a realizar algunos ajustes necesarios para que todo se vea correctamente.

4.1. Establecer la página principal

Para lograr que el dominio abra directamente la página de Inicio que hemos montado debemos ir a:

  1. Ajustes -> Lectura.
  2. Aquí habilita «Una página estática (seleccionar abajo)» y en el selector de «Portada» elige la página de Inicio que creamos anteriormente; no selecciones el blog si has utilizado un diseño de Divi ya que lista las entradas de forma automática (si lo haces no se verá el diseño de ese apartado).
  3. Presiona en el botón «Guardar cambios».

4.2. Crear un menú

La creación del menú ya la explayamos a fondo en el curso de WordPress, te dejo aquí el enlace por si necesitas echarle un ojo, va detallado paso a paso: añadir enlaces al menú.

4.3. Añadir logo a Divi

Podemos agregar el logo a la cabecera de nuestra web desde la sección Divi -> Opciones del tema -> General. Verás que el primer campo se llama «Logo», presiona en el botón «Subir» y luego selecciónalo en tu PC.

Finalmente presiona en el botón de «Guardar cambios» que hay arriba.

4.4. Añadir favicon a Divi

El favicon es el icono que aparece en la pestaña del navegador y sirve para que el usuario identifique la web rápidamente. Además lo leerán otras plataformas como redes sociales o buscadores para mostrar una especie de «logo simplificado» si es necesario.

Para añadirlo debemos ir a:

  1. Apariencia -> Personalizar -> Ajustes generales -> Identidad del sitio.
  2. Donde dice «Icono del sitio» puedes agregarlo con el botón «Seleccionar el icono del sitio» -> sube el archivo -> guarda los cambios con el botón «Publicar». Como puedes ver te recomienda que tenga un tamaño de 512x512px, pero no es obligatorio y puede tener un tamaño inferior sin problema.

4.5. Añadir las redes sociales al pie de página de Divi

Como habrás podido observar, en el pie de página hay iconos de redes sociales:

Con los siguientes pasos vamos a añadir el enlace hacia nuestras RRSS o a eliminar aquellos iconos que no queramos usar:

  1. Dirígete a Divi -> Opciones del tema -> General.
  2. Si bajas un poco encontrarás una serie de opciones para activar o desactivar los iconos a nuestra conveniencia (Mostrar icono de Facebook, Mostrar icono de Twitter, etc.), confígúralo como quieras.
  3. Y justo debajo vas a encontrar los campos para añadir la URL hacia tus cuentas (Dirección perfil de Facebook, Dirección perfil de Twitter, etc.).

Recuerda guardar los cambios al terminar.

4.6. Activar los extractos de las entradas en Divi

Cuando creamos una entrada o artículo del blog podemos ver que hay un campo llamado «Extracto» para agregar un resumen de 1 o 2 líneas. Esto sirve para mostrarlo en la página de blog donde se listan muchas entradas a la vez.

Sin embargo, por defecto Divi tiene esta característica desactiva, para habilitarla hay que ir a Divi -> Opciones del tema -> General -> activa la opción de nombre «Utilizar extractos cuando se defina».

5. Personalizar las páginas importadas de Divi

Bien, hecho esto vamos a empezar a añadir el contenido real a nuestra web, comprobarás que es tan sencillo como cualquiera de los pasos anteriores:

  1. Primero ve a la sección «Páginas», pasa el ratón por encima de la que quieras personalizar (por ejemplo la de Inicio) y dale al botón «Editar con Divi».
  2. Con esto abrirás el constructor visual y aparecerá una pantalla de maquetación similar a la imagen inferior (con el diseño que elegiste).

Vamos a hacer un resumen distinguiendo 3 tipos de elementos principales para que conozcas cómo se estructura todo:

  1. Sección: es la que tiene la barra de opciones azul y sirve para maquetar un contenedor grande que englobe el contenido.
  2. Fila: es la que tiene la barra de opciones verde, y es un «sub-contenedor» (muy similar a la sección pero servirá para crear varias filas más pequeñas).
  3. Módulo: es el que tiene la barra de opciones negra y se trata del contenido en sí; el diseño que importaste tiene módulos para añadir texto, módulos para añadir imagen, módulos de tipo botón, etc.

5.1. Editar módulos

Aunque lo vamos a explicar todo, si aún estás empezando te recomiendo que únicamente edites los módulos (barra negra) que te permitirán añadir tus textos, imágenes, vídeos, enlaces, etc. En cambio las secciones y filas, como sirven para definir la estructura (y no el contenido), ya están perfectamente implementadas con el diseño que viene con Divi y no tendrás que hacer nada.

Pasa el ratón por encima de un texto y presiona en el icono de la tuerca (barra negra), te saldrá un pop-up con un editor donde puedes eliminar el contenido de prueba y añadir el que tú quieras. Cuando termines de redactarlo dale al «tick» verde para aplicar los cambios.

¿Has visto qué fácil es?, pues exactamente igual con otros tipos de contenido, por ejemplo si queremos modificar una imagen (que no sea el fondo que se edita de otra forma) pasaremos el ratón por encima de dicha foto y le daremos al icono de tuerca en la barra negra. En la nueva ventana que ha aparecido clickea sobre la foto y podrás subir una nueva; al terminar presiona en el icono verde que tienes inmediatamente debajo.

Cuando finalices de realizar todos los cambios del contenido, presiona el botón «Guardar» que hay abajo a la derecha para salvar los cambios, es importantísimo o se perderán cuando cierres la pestaña del navegador.

5.2. Añadir nuevos módulos

Para agregar contenido adicional hay que añadir un nuevo módulo pasando el ratón por encima del lugar donde quieres colocarlo, te aparecerá el símbolo «+» en negro que debes presionar:

A continuación selecciona el tipo de bloque que quieres añadir (explicamos cómo funcionan más adelante), elige por ejemplo el de «Contadores circulares» y clickea en él; para finalizar introduce lo que quieras que aparezca en la nueva ventana y guarda los cambios.

5.3. Duplicar módulos

Si has creado o personalizado algún elemento y quieres reutilizarlo, pon el ratón encima y presiona en el tercer icono, así se creará una copia idéntica con el mismo diseño y contenido:

5.4. Mover módulos

Para recolocar un bloque o módulo en Divi pasa el ratón por encima de él y en la barra de iconos presiona sin soltar en el primero de ellos:

Una vez hecho arrastra el módulo hasta donde quieras colocarlo y suelta el ratón, así de simple.

5.5. Eliminar módulos

Del mismo modo que en los casos anteriores, si situamos el ratón encima del bloque que queremos borrar podemos presionar en el icono con forma de papelera y deshacernos de él:

5.6. Deshacer un cambio que no queriamos realizar

¿Sabías que Divi guarda un historial de las modificaciones que vas haciendo para que puedas deshacer las últimas acciones si te has equivocado?, y la forma de hacerlo es como en cualquier editor de texto: presionando las teclas Control + Z

5.7. ¿Por qué no me aparece el botón «Guardar» en Divi?

A veces podría suceder que no veas el botón inferior de «Guardar», eso es porque se ha ocultado mientras trabajas, simplemente presiona en el icono de puntos suspensivos que hay abajo:

5.8. Quiero ver cómo queda en el móvil mientras trabajo

Divi es una herramienta muy potente, y como tal te da la posibilidad de ver el diseño en diferentes tipos de dispositivo mientras lo personalizas. Esta función se activa presionando en los 3 iconos inferiores que tienen forma de PC, móvil y tablet.

Una vez activado en la parte superior también aparecerá un selector donde puedes elegir una gran variedad de tamaños y dispositivos.

6. Funcionalidades adicionales del Constructor Visual de Divi

Además de todo lo que hemos visto, Divi posee varias herramientas y funciones extra que te van a ser útiles mientras desarrollas tu web.

6.1. Reutilizar secciones, filas y módulos

Arriba hemos aprendido a duplicar bloques para aprovechar el trabajo realizado, ¿pero qué ocurre si queremos usar uno de esos elementos en un apartado diferente?, por ejemplo coger el formulario que hay en el apartado de contacto y agregarlo también a la página principal.

En ese caso pasa el ratón por encima del bloque que quieras trasladar a otro apartado (puede ser una sección, una fila o un módulo) y presiona en el icono que tiene una flecha hacia abajo:

Ponle un nombre y dale a «Guardar en biblioteca». Después ve al apartado donde quieres incrustarlo, edítalo con Divi y sigue estos pasos para importarlo:

  1. Presiona en el icono «+» correspondiente al tipo de elemento a trasladar, es decir, que si en el anterior paso guardaste un módulo tendrás que presionar el botón «+» de los módulos (el negro), si fue una fila tendrás que presionar el botón «+» de las filas (verde) y si fue una sección tendrás que presionar el de las secciones (azul).
  2. Dale a «Añadir desde biblioteca».
  3. Finalmente clickea en el bloque que queremos trasladar, lo reconocerás porque aparece con el nombre que le pusiste.

6.2. Reutilizar páginas completas

Si queremos mover una página entera, con todos sus bloques, el proceso es similar al paso anterior:

  1. En la parte inferior encontrarás en color morado el mismo icono con la flecha hacia abajo, este es el que corresponde a todo el apartado / página, presiónalo, ponle un nombre y guárdalo en la biblioteca.
  2. Ahora ve a la página donde quieres incurstarlo, edítala con Divi y presiona en el botón «+» morado.
  3. Para terminar ve a la pestaña «Cargar diseño» y clickea en el diseño a importar.
  4. Puedes activar o desactivar la opción «Replace existing content» según quieras o no borrar el contenido actual antes de que Divi inserte el nuevo a importar.

7. Personalizador de temas

Hasta ahora hemos aprendido a crear y adaptar los diferentes apartados de nuestra web, ¿pero qué ocurre con las secciones que son comunes como la cabecera o el pie de página?. Esto es lo que vamos a detallar a continuación.

7.1. Diseñar la cabecera

Para modificar la cabecera (y no me refiero al menú sino al diseño), debes ir al panel de WordPress -> Apariencia -> Personalizar, después presiona en «Cabecera y navegación» y aquí encontrarás una serie de configuraciones:

Verás que a la derecha se ven reflejados los cambios conforme vas editando las opciones, de esta manera no necesitas «guardar y recargar».

Revisa todas las características que posee cada una de las pestañas, una vez termines de hacer las modificaciones dale al botón azul «Publicar» que te aparecerá en la parte superior. Si no quieres guardar los cambios simplemente cierra la ventana sin salvar.

7.2. Diseñar el pie de página

Del mismo modo que en el paso anterior, puedes editar el diseño y el contenido del pie de página desde Apariencia -> Personalizar -> Pie:

Entre otros se puede editar tamaños, colores, textos, etc.

Deja un comentario