Divi constituye una de las plantillas o themes de WordPress más populares de los últimos años, tanto que se ha vuelto la favorita de muchos que se inician en el diseño de páginas web. Fue creada por la empresa Elegant themes, con una modalidad de construcción tipo drag and drop que permite la adición de diversos módulos que puedes ir arrastrando a través del diseño para crear diferentes estructuras, según tu gusto y creatividad.
Por ello, y aunque en nuestra agencia utilicemos y recomendemos WordPress y Génesis Framework, decidimos preparar esta guía rápida para que sepas cómo usar Divi, en especial, si te estás iniciando en el mundo del diseño web.
Los primeros pasos para crear una web con Divi
Lo primero que tienes que hacer es descargar, instalar y activar la plantilla de Divi. Después al crear una nueva página de WordPress de la manera usual te darás cuenta que el editor te ofrece dos opciones, una para diseñar la página con Divi y otra para hacerlo con el diseñador predeterminado de WordPress, Gutenberg.
Como consejo, te recomendamos que antes de arrancar a trabajar con Divi, le coloques título a la página puesto que, una vez que selecciones el trabajar con Divi, la página se guardará automáticamente.
A continuación, y ya trabajando con Divi, debes elegir cómo comenzar a crear la página.
En este caso, tienes para elegir entre un diseño comenzando desde cero, uno predeterminado, o la clonación de uno ya existente.
Creando la web desde cero
Con esta alternativa, se abrirá el editor Divi en una página totalmente en blanco, para que comiences a trabajar.
Esta opción no es la más recomendable si estás comenzando a trabajar con el editor y no tienes mucha experiencia en el trabajo de diseño. Es una mejor alternativa para diseñadores experimentados quienes, además, tienen una línea creativa bastante específica.
También, es la mejor decisión si vas a crear una web bastante básica, con solo un bloque de texto o algunas imágenes.
Trabajar con un diseño predeterminado
Esta es la mejor opción si estamos empezando a trabajar con este editor y contamos con poco tiempo para aprender en profundidad todas las funciones. Aquí vas a trabajar con un diseño que ya está creado y que se encuentra almacenado en la biblioteca de Divi.
Divi cuenta con aproximadamente 814 opciones predeterminadas almacenadas, que puedes emplear con libertad y sin problemas.
Clonar una página
Esta alternativa es bastante parecida a la anterior, la única diferencia es que aquí vamos a importar un diseño de página que sea nuestro y que ya hayamos trabajado previamente.
La forma de organizar el contenido con Divi
Hay 3 niveles de elementos que se organizan con Divi: Secciones, Filas y Módulos.
Al inicio del trabajo, en especial si decides trabajar con una plantilla predeterminada, notarás que Divi ya te proporciona las primeras divisiones o agrupamientos, que son las secciones.
Aquí tienes disponibles las filas, algunas de solo una columna y otras de hasta 6 columnas, donde, incluso, tienes la posibilidad de elegir el grosor de cada una.
A partir de las filas, comenzarás a trabajar con los módulos, que será donde pondrás el contenido como tal. Encontrarás que existen modelos de texto, unos de imagen, otros de video y unos de botón, entre otros. De hecho, hasta es posible encontrar un modelo que en sí pueda contener todo esto.
Insertar Filas y Módulos
Divi nos indica cómo crear e insertar filas en tu primera sección y a determinar la cantidad de características de las columnas que tendrá esta fila.
A partir de tener la fila creada con sus respectivas columnas, notarás que cada una contiene un signo + en color negro. Aquí se encuentra contenida la biblioteca Divi de módulos para insertarlos en la página.
Una vez que selecciones el tipo de módulo a insertar, se abrirá una ventana extra que muestra los ajustes del módulo y que permite hacer los ajustes y configuraciones.
Los ajustes en Divi están repartidos de la siguiente forma:
Contenido: Donde se establece qué cosas se mostrarán.
Diseño: Para determinar la forma cómo se mostrará este contenido.
Avanzadas: Aquí están disponibles ciertos ajustes que son para usuarios con manejo avanzado en diseño.
El constructor Divi
Teniendo el contenido establecido, estarán más definidos los 3 niveles de organización en el constructor Divi. Vemos entonces la barra de herramientas azul, disponible en la parte superior izquierda y que se trata (hasta ahora) de la única sección de la página.
También, estará la barra de herramientas verde, que le corresponde a la fila o filas creadas. Junto a esto estará la barra de herramientas negra, que le pertenece a cada uno de los módulos de contenido.
Los botones de estas barras de herramientas nos van a permitir acceder a los ajustes del elemento, copiarlo, borrarlo y desplazarlo a otra ubicación.
En la parte inferior están disponibles los controles generales del editor, agrupados en modos de visualización, los ajustes de página y el guardar y publicar.
En el caso del primer grupo de botones, aquí puedes adaptar el editor visual a mostrar la versión de esquema, o la versión de estructura de la página.
En la versión de esquema es mucho más cómodo trabajar cuando se trata de páginas con bastante contenido, puesto que ayuda a facilitar el proceso de edición, considerando que arrastrar módulos en estas condiciones resulta engorroso.
En la segunda opción, es posible ver los elementos de la página representados como cajas, permitiéndonos hacernos una idea de la organización que tienen los elementos.
¿Cómo funciona la biblioteca de diseños de Divi?
La biblioteca de diseños de Divi no solo te ayuda a trabajar de forma más sencilla, sino que también favorece el ahorro de tiempo. Aquí cuentas con creaciones de diseñadores profesionales que puedes importar para trabajar sobre ellas y crear la versión que deseas emplear específicamente en tu proyecto.
La galería cuenta con varios cientos de layouts de acceso gratuito, así como la posibilidad de comprar otros. Están ordenados por temas, permitiendo encontrar de forma mucho más rápida lo que necesitas, buscando el pack que esté relacionado con línea gráfica.
Seleccionado alguno de los diseños, podemos visualizarlo como vista previa en la izquierda, pudiendo incluso tener acceso a un demo en una pestaña aparte. A la hora de usarlo, solo necesitamos cliquear usar este layout para comenzar el proceso de importación de la página.
Todos los layouts de Divi se instalan completos y tal y como están en las versiones que podemos visualizar en el demo, con las imágenes, textos y distribución predeterminada.
Esto se traduce en comodidad y facilidad, considerando que, con solo cambiar el contenido de los textos y los títulos, tendrás una página lista para usar.
Esperamos que esta guía rápida te sirva para conocer Divi y analizar si es ideal para tu proyecto web. Si ya la has probado, cuéntanos tu experiencia.
