Lo más destacado del complemento Divi: Divi Supreme

Divi Supreme es un complemento de terceros para Divi que agrega muchas configuraciones para agregar nuevas funciones a Divi Builder, así como muchos módulos nuevos. En este artículo, veremos Divi Supreme para ver qué puede hacer y ayudarlo a decidir si es el complemento que necesita en su caja de herramientas Divi.

Instalación

La instalación es simple y directa.

1. Compre y descargue el complemento de Divi Marketplace
2. Vaya a Complementos > Agregar nuevo > Cargar complemento
3. Haga clic en Elegir archivo
4. Busque el archivo zip del complemento en su computadora y selecciónelo
5. Haga clic en Instalar ahora
6. Haga clic en Activar
7. Vaya a Divi Supreme Pro > Licencia en el panel de WordPress e ingrese su clave de licencia

Configuración general

Divi Supreme agrega una pantalla de menú con varias pestañas para personalizar la configuración de la manera que desee. La pestaña Configuración general incluye conmutadores para habilitar elementos programados, una ventana emergente, un widget de biblioteca, un enlace para leer más contenido, códigos cortos de biblioteca y un visor receptivo. Veamos algunos de ellos.

Elemento programado

Los elementos programados proporcionan un calendario con la hora exacta para que pueda programarlo para mostrarlo u ocultarlo en esas horas. También puede elegir a qué usuario se aplica. Esto se agrega a todas las secciones, filas, columnas y módulos.

Surgir

La función emergente se agrega a los módulos. Puede elegir el tipo de ventana emergente, elegir un diseño de la biblioteca, seleccionar los activadores de apertura y cierre, cierre automático, animaciones de entrada y salida, posiciones, anchos, superposiciones, botones de cierre, iconos, colores, etc.

Lee mas

Leer más agrega un enlace a ciertos módulos para revelar su contenido al hacer clic. Elija mostrar el enlace en el móvil, la altura contraída, el texto, la fuente, los colores, la sombra, el CSS personalizado y más.

Widget de biblioteca

El widget de biblioteca le permite colocar cualquier diseño de la biblioteca Divi en sus barras laterales, pie de página o en cualquier otro lugar donde use widgets.

Este ejemplo muestra el diseño de la demostración en la barra lateral. El diseño que estoy usando no fue diseñado para este espacio, pero es interesante que pueda usar diseños Divi para construir barras laterales.

Visor receptivo

Responsive Viewer agrega nuevas herramientas a la barra de herramientas del constructor que brinda más opciones de visualización. Cuando selecciona ver los modos de tableta o teléfono, se agregan nuevos tamaños de pantalla a la barra de herramientas. También agrega un campo donde puede ingresar un tamaño personalizado.

Generador de temas fácil

Easy Theme Builder le permite configurar su encabezado, cambiar los colores de los elementos del encabezado en el desplazamiento y personalizar los elementos que se encogen.

Encabezado fijo

De forma predeterminada, un encabezado creado con Theme Builder se desplaza con el sitio. En el ejemplo anterior, me desplacé hacia abajo en la página y el encabezado desapareció.

El encabezado ahora está fijo, por lo que cuando me desplazo, el encabezado permanece en su lugar.

Desplazamiento

Para el desplazamiento, cambié los colores de fondo en ambas secciones. También agregué la sombra del cuadro para que aparezca en el desplazamiento.

Aquí está mi encabezado de Theme Builder antes de desplazarme. Lo configuré en Fijo y para bajar el contenido. Este encabezado tiene dos secciones.

Aquí está el encabezado después de desplazarse. Las dos secciones han cambiado sus colores de fondo de acuerdo con mi configuración.

Encogerse

Shrink le permite especificar el tamaño del menú en el desplazamiento y cambiar el logotipo a una nueva imagen. Agregue relleno a la sección, filas, módulo y especifique un porcentaje para que la imagen se encoja.

Aquí está el encabezado de mi Theme Builder con su configuración predeterminada y un nuevo logotipo.

He configurado el tamaño para que aumente, por lo que es fácil ver la diferencia. Agregué 8px de relleno y configuré la imagen al 80%. Ahora cambió el logo a mi nueva imagen.

Configuración de redes sociales

La configuración de redes sociales le permite ingresar su ID de aplicación de Facebook y cambiar el idioma para que sus módulos usen el mismo idioma que su sitio web.

Misc

Las configuraciones diversas le permiten eliminar los datos del complemento al desinstalarlo, permitir la carga de archivos JSON, la carga de SVG y cambiar el nombre y el ícono del menú Divi Supreme.

Módulos Divi

Divi Supreme agrega 42 nuevos módulos al Divi Builder. Añaden muchas funciones nuevas para imágenes, texto, botones, formularios de contacto, redes sociales, etc. Veamos algunas de ellas.

Horario comercial supremo

Supreme Business Hours incluye submódulos para cada día de la semana, lo que le permite nombrarlos individualmente, mostrar diferentes horarios y diseñarlos. También puedes diseñarlos juntos como lo he hecho aquí. Le brinda control independiente sobre las fuentes del día y la hora. También puede ingresar cualquier texto que desee en los campos.

Botón Supremo

Supreme Button te ofrece dos botones que puedes diseñar juntos o de forma independiente. También agrega texto de separación, una caja de luz para cada botón e información sobre herramientas. Cada uno de los elementos tiene sus propias opciones de estilo. Puede usar las funciones exactas que desee, por lo que no tiene que usar ambos botones, el texto del separador, etc.

Tarjeta Suprema

Supreme Card crea tarjetas que parecen publicaciones de blog. Agrega una imagen, un título, una descripción, un botón y una insignia. Cada uno de los elementos se puede diseñar de forma independiente. Agregué una imagen, aumenté el peso de la fuente para el título, cambié el color de la insignia y el tamaño de la fuente, cambié el color de los botones, hice que el botón se redondeara y agregué una sombra de cuadro al botón. Esta es la vista apilada.

También puede hacer en línea y elegir el ancho, la alineación del orden y la alineación horizontal del contenido (que ajusta la posición vertical de la imagen). Esto muestra la izquierda para la alineación de la orden y el centro para la alineación horizontal. La opción de alineación es excelente para crear CTA en un diseño alternativo.

Esta es la alineación correcta. También hice algunos ajustes a la imagen, como agregar esquinas redondeadas, un borde rojo y una sombra de cuadro. También puede agregar una superposición a la imagen.

Carrusel de cartas supremas

El carrusel de tarjetas supremas ofrece las mismas funciones que la tarjeta suprema, pero agrega varias tarjetas a un control deslizante. Le brinda opciones de estilo para que pueda diseñar las tarjetas de forma independiente. También agrega opciones de estilo para el carrusel, incluidas flechas y navegación por puntos, y las funciones estándar del control deslizante. Esto muestra la configuración predeterminada con las imágenes que he agregado. Esta es la alineación apilada.

Esta es la alineación en línea. Agregué un color de fondo a cada uno de los submódulos para que se destaquen. También cambié el tamaño y el color de las flechas y los colores de la navegación por puntos. Los ajustes de flecha también le dan control sobre la posición, el ícono anterior y el ícono siguiente.

Encabezado doble supremo

Encabezado doble supremo Proporciona tres secciones de texto: antes, en medio y después. El texto del medio es de un color diferente por defecto. Los tres usan la misma configuración, pero puede diseñarlos de forma independiente. También puede mostrarlos como en línea o apilados en cualquier combinación que desee. Inline es la configuración predeterminada. Aumenté el tamaño de fuente del texto anterior y medio, disminuí el texto posterior y puse en negrita el texto del medio.

Mapa de Google integrado supremo

El mapa de Google incrustado le permite agregar la dirección que desea fijar y elegir el nivel de zoom. No se necesita ninguna otra configuración. Utiliza ctrl + para hacer zoom, por lo que los usuarios pueden desplazarse más allá de él sin que la página se detenga para hacer zoom en el mapa.

No tiene configuraciones personalizadas para ninguno de los elementos del mapa, pero tiene todas las opciones de diseño estándar. Agregué una sombra de cuadro y ajusté los filtros en este ejemplo.

Cronología de Twitter incrustado supremo

La línea de tiempo de Twitter incrustada le permite especificar un nombre de usuario de Twitter para incrustar las publicaciones de Twitter de ese usuario en su diseño. Limite el número de tweets, muestre el encabezado, pie de página, borde, barra de desplazamiento y elimine el color de fondo. Incluye configuraciones de diseño estándar. También incluye un tema claro y oscuro.

Comentarios supremos de Facebook

Comentarios de Facebook incrusta los comentarios de una página de Facebook y permite a los usuarios comentar usando sus cuentas de Facebook. Seleccione la cantidad de comentarios que se mostrarán, elija un esquema claro u oscuro y seleccione cómo se ordenan los comentarios. Los usuarios pueden dar me gusta, responder y seguir a la persona en Facebook. Incluye configuraciones de diseño estándar.

Lista suprema de iconos

La lista suprema de iconos incluye submódulos donde puede agregar el contenido y seleccionar un icono para cada elemento. Puede diseñar el texto y los iconos de forma independiente. También puede agregar fondos, incluidos color, degradados, imágenes y video, detrás de cada elemento.

Formas Supremas

Supreme Shapes le permite elegir una forma de la lista desplegable y establecer su tamaño. Tiene 17 formas diferentes para elegir.

Las opciones de diseño le permiten cambiar el color, usar un borde y agregar una sombra. También incluye configuraciones de diseño estándar. Cambié el color y agregué una sombra en el ejemplo anterior.

Compra

Divi Supreme está disponible en Divi Marketplace por $ 79. El precio incluye el uso ilimitado del sitio web y un año de soporte y actualizaciones.

Pensamientos finales

Divi Supreme Pro es un complemento interesante para Divi. Agrega un montón de nuevas funciones y módulos, pero sigue siendo fácil de usar. Todas las funciones son útiles. Algunos agregan efectos, mientras que otros agregan características que expanden enormemente Divi. Si está buscando expandir su sitio Divi o su caja de herramientas sin necesitar una tonelada de complementos, vale la pena echarle un vistazo a Divi Supreme Pro.

Queremos escuchar de ti. ¿Has probado Divi Supreme Pro? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada a través de VectorKnight / shutterstock.com