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, analizaremos 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. Ubique 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 control 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 forma que desee. La pestaña Configuración general incluye interruptores para habilitar elementos programados, una ventana emergente, un widget de biblioteca, un enlace para leer más contenido, códigos abreviados de biblioteca y un visor receptivo. Veamos algunos de ellos.

Elemento programado

Elementos programados proporciona un calendario con la hora exacta para que pueda programar mostrarlo u ocultarlo para esos tiempos. También puede elegir a qué usuario se aplica. Esto se agrega a todas las secciones, filas, columnas y módulos.

Surgir

La característica 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.

Leer más

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 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 Builder 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.

Creador 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 de reducción.

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 se desplazó.

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

Desplazamiento

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

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

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

Encoger

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 reduzca.

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

He configurado el tamaño para aumentar, por lo que es fácil ver la diferencia. Agregué 8px de relleno y configuré la imagen al 80%. Ahora ha cambiado 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.

Varios

La configuración miscelánea le permite eliminar los datos del complemento en la desinstalación, permitir la carga de archivos JSON, cargas SVG y cambiar el nombre y el ícono del menú Divi Supreme.

Módulos Divi

Divi Supreme agrega 42 nuevos módulos a Divi Builder. Agregan 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 horas y diseñarlos. También puedes diseñarlos juntos como lo he hecho aquí. Le da control independiente sobre las fuentes de día y 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 separador, un cuadro 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 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, redondeé el botón 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 del contenido horizontal (que ajusta la posición vertical de la imagen). Esto muestra la izquierda para la alineación del 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 realicé 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 Supreme proporciona las mismas características que la tarjeta Supreme, 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 de 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 diferencien. También cambié el tamaño y el color de las flechas y los colores de los puntos de navegación. Los ajustes de flecha también le dan control sobre la posición, el ícono anterior y el ícono siguiente.

Título dual supremo

Supreme Dual Heading Proporciona tres secciones para el texto: antes, en medio y después. El texto central 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 en línea o apilados en cualquier combinación que desee. En línea 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 medio.

Mapa de Google incrustado supremo

El mapa de Google incrustado le permite agregar la dirección que desea que fije 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 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.

Línea de tiempo de Twitter incrustada suprema

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 la cantidad de tweets, muestre el encabezado, el pie de página, el borde, la 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 incorpora 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 desea mostrar, 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 de iconos supremos

Supreme Icon List 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 colores, degradados, imágenes y videos, 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 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 características son útiles. Algunos agregan efectos, mientras que otros agregan características que amplían enormemente Divi. Si está buscando expandir su sitio Divi o caja de herramientas sin necesidad de 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