Producto destacado de Divi: Divi Essential

Divi Essential es un complemento que agrega más de 60 módulos nuevos a Divi Builder, ampliando las posibilidades de los diseños que puede crear. Con este complemento, puede agregar pestañas avanzadas, alternancia de contenido, controles deslizantes dinámicos, módulos de contenido e imágenes únicos, secciones de equipo, módulos sociales y mucho más. Cada módulo viene con una potente funcionalidad y amplias opciones de diseño que facilitan el diseño de diseños complejos.

Divi Essential también viene con acceso a más de 600 diseños de secciones prediseñados que utilizan los módulos, 30 diseños iniciales y 6 plantillas completas con varias páginas. Todos estos diseños se pueden descargar desde el sitio web de Divi Essential y pueden ayudarlo a acelerar el proceso de diseño. En esta publicación, analizaremos más de cerca Divi Essential para ayudarlo a decidir si es el producto adecuado para usted.

¡Empecemos!

Instalación de Divi esencial

Divi Essential viene como un archivo de complemento .ZIP. Para instalar el complemento, abra la página del complemento en su panel de WordPress y haga clic en Agregar nuevo. Haga clic en Elegir archivo y seleccione el archivo del complemento de su computadora, luego haga clic en Instalar ahora.

Una vez que el complemento esté instalado, actívelo.

Divi Essential agrega 65 nuevos módulos a Divi Builder. Puede acceder a los módulos agregados haciendo clic en el botón del módulo Divi Essential en el menú Insertar módulo, o buscando "siguiente", que mostrará todos los módulos Divi Essential.

Módulos esenciales de Divi

Los más de 60 módulos nuevos agregan mucha funcionalidad a Divi Builder. Cada uno de los módulos viene con contenido, diseño y opciones avanzadas para personalizar completamente la apariencia y la función. Echemos un vistazo más de cerca a algunos de estos módulos utilizando los diseños prediseñados de Divi Essential.

Módulos creativos

Hay 10 módulos creativos diferentes que puedes agregar a tu página. Cada módulo agrega alguna funcionalidad o diseño único a su diseño. Además de los módulos que destacaré a continuación, Divi Essential viene con módulos para agregar un elemento flotante, un divisor único, un cuadro promocional, una animación de Lottie y una sección de flujo de pasos para demostrar un proceso.

Siguiente pestaña avanzada

El módulo de pestañas avanzadas le permite crear secciones de contenido con pestañas horizontales y verticales. Puede configurar el título, subtítulo e icono/imagen para cada pestaña. Este ejemplo es el diseño de pestaña avanzado 1.

Dentro del cuerpo de cada pestaña, puede seleccionar un diseño de la Biblioteca Divi para mostrar, o puede agregar contenido editando el título, la descripción, la imagen/icono y el botón.

El módulo viene con amplias configuraciones de diseño para todo el módulo, así como para las pestañas individuales. Puede personalizar cada aspecto del diseño, seleccionar diferentes efectos de desplazamiento para los elementos, establecer estilos activos para la pestaña seleccionada y mucho más.

Próxima hora comercial

Este módulo facilita la visualización de su horario comercial en su sitio web. El ejemplo que se muestra es el diseño 2. Puede agregar cada día de la semana como un elemento dentro del módulo. Cada elemento se puede personalizar por sí solo o puede utilizar las opciones de diseño del módulo para aplicar estilo a cada elemento.

Alternar contenido siguiente

El módulo de alternancia de contenido agrega una opción a su página que puede usar para cambiar entre contenidos. En este ejemplo (diseño 2), el interruptor se utiliza para alternar entre mostrar detalles de una licencia única o de por vida.

Puede optar por agregar un elemento de la Biblioteca Divi a la sección de alternancia, o puede agregar su contenido dentro de la configuración del módulo. Puede personalizar el diseño de cada sección, así como el diseño de la palanca.

Imagen siguiente Punto de acceso

Con este módulo, puede agregar puntos de acceso a una imagen que revela contenido al pasar el mouse. Puedes agregar texto y una imagen que se revelará, y puedes personalizar cada elemento con opciones de diseño. El icono y el color del punto de acceso se pueden cambiar fácilmente, y la posición del punto de acceso se puede configurar cambiando las posiciones horizontal y vertical en la configuración de diseño. El siguiente ejemplo es el diseño 1.

Próxima línea de tiempo

El módulo de línea de tiempo se puede utilizar para representar visualmente eventos, la historia de una organización, procesos y mucho más. Dentro del módulo de línea de tiempo, puede agregar elementos de línea de tiempo individuales, que comprenden cada sección de la línea de tiempo. Puede agregar texto, una imagen, un botón y un ícono a cada elemento de la línea de tiempo. Cada elemento se puede personalizar en la pestaña de diseño, lo que le permite crear diseños de línea de tiempo únicos. En la foto de abajo se muestra el diseño de la línea de tiempo 11.

Módulos deslizantes

Hay seis módulos deslizantes diferentes que puedes agregar a tu sitio con Divi Essential. Puede agregar un carrusel de logotipos, un carrusel de imágenes y texto, un control deslizante de cubo 3D, un control deslizante de galería, un carrusel de testimonios y un carrusel de publicaciones. Echemos un vistazo más de cerca a un par de módulos deslizantes.

Control deslizante de cubo 3D

El módulo deslizante de cubo 3D agrega un control deslizante que gira con un efecto de cubo 3D. Puedes personalizar cada diapositiva con una imagen, texto y fondo. Dentro de la configuración del control deslizante, puede cambiar la configuración de reproducción automática, navegación y efectos, así como cualquiera de las opciones de diseño. El ejemplo que se muestra es el diseño 4.

Siguiente Divi Carrusel

Este es el diseño de carrusel 17. Hay cuatro diseños que puede seleccionar: imagen, texto, texto dentro de la imagen o texto debajo de la imagen. Esto permite muchos diseños versátiles.

Tiene control total sobre la disposición y el diseño de cada elemento del carrusel, así como sobre el módulo del carrusel en sí. Puede cambiar la configuración de reproducción automática del carrusel, cambiar la configuración de navegación, modificar el efecto, agregar una función de caja de luz y más.

Módulos de imagen

Con 12 módulos de imágenes diferentes, Divi Essential le ofrece muchas formas de mostrar imágenes de forma creativa en su sitio web. Puede agregar una lupa de imagen, un diseño de mampostería, módulos que agregan diferentes efectos de carga y desplazamiento a las imágenes, un cuadro de desplazamiento de imagen, un control deslizante de antes y después, y más. Echemos un vistazo a un par de módulos de imágenes.

Siguiente Antes Después

El módulo Antes y Después le permite mostrar una foto de antes y después que se revela con un control deslizante que puede arrastrar. Este diseño es antes y después del diseño 4.

Puede configurar las imágenes de antes y después, modificar las etiquetas, cambiar la dirección y función del control deslizante y personalizar el diseño.

Siguiente imagen circular al pasar el cursor

Con el módulo de desplazamiento de imagen circular, puede crear una imagen circular que revele contenido con un efecto de desplazamiento.

Hay 19 efectos de desplazamiento diferentes y 4 direcciones de desplazamiento diferentes entre las que puede elegir, lo que le brinda mucha flexibilidad en el diseño.

Imagen siguiente Acordeón

El módulo de acordeón de imágenes agrega un acordeón de imágenes interactivo a su diseño. Cuando pasas el cursor sobre una de las imágenes del acordeón, se expandirá y revelará contenido. Puede optar por agregar un ícono, título, descripción y botón a cada imagen. En este ejemplo, la tercera imagen está configurada para abrirse cuando se carga la página. Si pasa el cursor sobre otra imagen, se expande y permanece expandida.

Puede configurar el acordeón para que se mueva al pasar el mouse o al hacer clic, y puede configurarlo para que se abra vertical u horizontalmente.

Módulos de contenido

Hay 19 módulos en la categoría de contenido. Todos estos se pueden utilizar para mostrar dinámicamente su contenido y crear diseños cautivadores. Puede agregar cuadros y anuncios publicitarios, módulos con diferentes efectos de texto, botones, controles deslizantes de publicaciones de blog y más. Echemos un vistazo a algunos de los módulos.

Siguiente Caja plegable 3D

El módulo 3D Flip Box le permite tener una caja dinámica que se voltea con un efecto 3D al pasar el mouse. Puedes tener un diseño diferente en la parte trasera de la caja. Este ejemplo es el diseño 7.

En la configuración del módulo, puede personalizar los elementos que se encuentran en el frente y en la parte posterior. Puede agregar un ícono, una imagen, texto de encabezado, texto del cuerpo y botones. En la pestaña de diseño, puedes personalizar el aspecto de cada elemento.

Siguiente propaganda

El módulo de publicidad es muy versátil y ofrece muchas opciones de contenido y diseño que puede utilizar para crear diseños únicos. La propaganda de ejemplo utilizada aquí es el diseño 11. Presenta un efecto de inclinación al pasar el cursor que se mueve con el mouse.

En la configuración del módulo, puede habilitar un encabezado previo, configurar el texto del encabezado y la etiqueta del encabezado, habilitar un texto posterior al encabezado, agregar una descripción, agregar una imagen y un ícono, y agregar un botón. Puede agregar una máscara de imagen, efectos de desplazamiento únicos a la propaganda o los botones y mucho más con las amplias opciones de diseño disponibles.

Siguiente botón

El módulo de botones incluye muchas opciones para agregar efectos atractivos a su botón. Puede agregar transiciones de fondo, efectos de desplazamiento, efectos de desplazamiento de iconos, efectos de trazo, efectos 2D, establecer una imagen de fondo, agregar un gif de fondo y más. En este ejemplo, estoy usando una colección de botones con efectos 2D. Puede ver cómo el botón Crecer y rotar ha aumentado de tamaño y ha girado ligeramente al pasar el mouse.

Siguiente animación de texto

Con el módulo de animación de texto, puedes agregar todo tipo de efectos de animación a tu texto. Este es el diseño de ejemplo 10 y presenta un efecto de escritura. Puede configurar el texto antes y después, agregar el texto que se anima y seleccionar el efecto de animación. El estilo del texto se puede personalizar aún más en la pestaña de diseño.

Siguiente movimiento del color del texto

El módulo de movimiento del color del texto le permite animar el color del texto. Este ejemplo es el diseño 9.

Puede seleccionar entre varios estilos de animación diferentes y seleccionar cuatro colores de texto diferentes que crean un efecto de degradado llamativo.

Módulos de equipo

Hay 5 módulos de equipo diferentes que vienen con Divi Essential, lo que te permite mostrar a los miembros de tu equipo con secciones y efectos únicos.

Tarjeta superpuesta del siguiente equipo

Con el módulo de tarjeta de superposición del equipo, puede mostrar a los miembros de su equipo con una superposición que aparece al pasar el mouse y revela contenido adicional, como una descripción o íconos de redes sociales. El ejemplo que se muestra es el diseño 1, que presenta un borde curvo que agrega un toque único.

Próxima revelación social del equipo

Con este módulo, los íconos de redes sociales se revelan debajo de la sección de descripción del miembro del equipo al pasar el mouse. Este ejemplo es el diseño 1.

Módulos Sociales

Divi Essential agrega formas de conectar las redes sociales a su sitio web. Para Facebook, puede agregar los siguientes módulos: compartir, dar me gusta, video incrustado, comentario, comentario incrustado, publicación incrustada y página incrustada. Para Twitter, puede agregar una línea de tiempo, un tweet, un botón de Twitter o un botón de seguir.

Siguiente comentario de FB

Aquí está el módulo de comentarios de Facebook. Puede utilizar este módulo para permitir a los usuarios comentar el contenido de su sitio con su cuenta de Facebook. El diseño se puede personalizar con opciones en la pestaña de diseño.

Próxima línea de tiempo de Twitter

Este módulo le permite agregar una línea de tiempo de Twitter a su página. Todo lo que necesita configurar es el nombre de usuario de la cuenta de Twitter y aparecerá la línea de tiempo. Puede personalizar la línea de tiempo con la configuración de diseño.

Módulos de revisión

Hay tres módulos de reseñas que puede utilizar para mostrar reseñas y testimonios de clientes en su sitio web.

Siguiente revisión de Divi

El módulo de reseñas le permite agregar reseñas de clientes a su página. Puede agregar un nombre, posición y descripción, y puede configurar la revisión de estrellas para cada módulo. Este es el ejemplo de diseño 1.

Siguiente control deslizante de testimonios

Con este módulo, puede agregar un control deslizante para mostrar los testimonios y reseñas de sus clientes. Este es el diseño 11. Cada diapositiva de testimonio se agrega como un elemento al módulo, lo que significa que puede personalizar el diseño de cada diapositiva individualmente y puede personalizar el diseño de la diapositiva en su conjunto. Puede agregar una calificación, texto e imagen a cada diapositiva. En la configuración del control deslizante, puede elegir que el control deslizante se reproduzca automáticamente, ajustar la configuración de transición del control deslizante y cambiar la configuración de navegación. Las opciones en la pestaña de diseño le permiten personalizar el aspecto del control deslizante a su gusto.

Diseños iniciales esenciales de Divi

Además de los módulos y los diseños de módulos que exploramos anteriormente, Divi Essential también viene con 30 diseños iniciales de una página que puedes usar. Echemos un vistazo más de cerca a uno.

Diseño del recorrido

Este es el diseño del recorrido. El diseño está lleno de animaciones y elementos interactivos. El encabezado utiliza el módulo de encabezados múltiples y viene con un efecto de revelación. A continuación se muestra un carrusel de logotipos, tres anuncios publicitarios y un carrusel que muestra destinos. La siguiente es una sección con una imagen flotante y algunos contenidos y contadores de números a la derecha. La sección del mapa utiliza el módulo de punto de acceso para identificar destinos y revelar información al pasar el mouse. Finalmente, hay un control deslizante de testimonios, una suscripción al boletín y un pie de página.

Sitios web prediseñados esenciales de Divi

Divi Essential también viene con acceso a 6 plantillas de sitios web completas que incluyen varias páginas.

Plantilla de jardinero

Echemos un vistazo a la página de inicio de la plantilla de jardinero. Además de esta página, la plantilla incluye las siguientes páginas: acerca de nosotros, servicios, galería, proyecto, detalles del proyecto y contacto.

La página se abre con una sección principal con múltiples títulos, una imagen grande, un elemento flotante, botones y varios gráficos de fondo. La siguiente sección presenta cuatro módulos de publicidad que destacan los servicios. A continuación hay otra sección con texto e imágenes que tienen un efecto flotante. El contenido del encabezado tiene una animación de revelación. La sección de servicios a continuación también utiliza los módulos de publicidad Divi Essential y es seguida por un elemento flotante con una animación giratoria y un acordeón de imágenes que se expande y revela contenido al pasar el mouse.

La siguiente es otra sección que tiene módulos de publicidad, seguida de una sección con una imagen de fondo de ancho completo y un gráfico flotante. Hay una sección de tabla de precios debajo de esto,

Continuando con la página de inicio, hay un control deslizante con el logotipo y un control deslizante antes/después, seguido de un control deslizante con testimonios. Finalmente, la página termina con un formulario de suscripción al boletín.

Dónde comprar Divi Essential

Divi Essential está disponible en Divi Marketplace. Cuesta $79 por uso ilimitado del sitio web y 1 año de soporte y actualizaciones. El precio también incluye una garantía de devolución de dinero de 30 días.

Pensamientos finales

Divi Essential está repleto de módulos que agregan nuevas funciones y diseños dinámicos a su sitio web. Me impresionó la personalización y las amplias opciones que vienen con cada módulo. Los diseños de demostración, los diseños iniciales de una página y las plantillas de sitios web prediseñadas que vienen con Divi Essential parecen ser diseños de alta calidad que puede usar y modificar fácilmente para sus propios fines de diseño. Si buscas un complemento todo en uno que amplíe las posibilidades de lo que puedes diseñar con Divi, Divi Essential es una excelente opción.

¡Nos encantaría saber de usted! ¿Has probado Divi Essential? ¡Cuéntanos lo que piensas al respecto en los comentarios!