Resaltado del complemento Divi - Creador de páginas en todas partes

Divi es un creador de páginas excepcionalmente fácil de usar que le permite crear diseños de páginas y publicaciones con módulos de arrastrar y soltar. Su facilidad de uso ha hecho que las personas se apasionen tanto por él que quieran usarlo en todas las áreas posibles de su sitio web. Ahí es donde entra el complemento de terceros que presentamos en Divi Plugin Highlight de hoy.

Page Builder Everywhere agrega Divi Builder a áreas en las que normalmente no funciona. Le permite usar el constructor en tipos de publicaciones personalizadas, páginas de categorías, páginas de búsqueda, páginas de archivo, páginas de productos WooCommerce, páginas 404, etc. Incluso puede usarlo para crear encabezados, pies de página y barras laterales.

Para las pruebas, creé un blog simple en un diseño de cuadrícula con cuatro publicaciones. Quiero expandir este diseño, pero lo haré con el complemento. Las imágenes fueron tomadas de Unsplash.com.

Diseños Divi

El complemento utiliza sus diseños Divi prefabricados, por lo que primero deberá crearlos. Vaya a Divi , Divi Library en el tablero y seleccione Agregar nuevo para crear sus diseños. Puede crear los diseños utilizando Módulo, Módulo de ancho completo, Fila, Sección, Sección de ancho completo, Sección de especialidad o Diseño.

Cualquiera de las opciones funcionará. Para tener un mayor control de los fondos y poder agregar múltiples módulos y columnas, cree sus diseños usando filas o secciones en lugar de elegir el módulo cuando los crea en la biblioteca. Usé principalmente filas para estos ejemplos.

Áreas de widgets

El complemento agrega cinco nuevas áreas de widgets a Divi y le permite colocar sus diseños en esas ubicaciones:

• Encima del encabezado
• Debajo del encabezado
• Pie de página
• Encima del contenido
• Debajo del contenido

Una vez que haya creado el diseño que desea, suelte el widget Divi Layout en la ubicación donde desea que aparezca y elija el diseño en el cuadro desplegable. Si no ha creado el diseño, puede hacer clic en el enlace denominado Agregar más diseños a la biblioteca Divi y lo llevará a la biblioteca.

Lógica condicional

El widget te permite usar lógica condicional para que puedas decidir cuándo aparece el diseño. Seleccioné Encabezado con mensaje e hice clic en Dónde . Esto abre la lógica condicional para que pueda elegir si mostrar o no, seleccionar el tipo de publicación y elegir el resultado de los cuadros desplegables. Puede agregar tantas condiciones como desee. Usan lógica OR, por lo que mostrará SI Esto = Eso O esto = Eso O ...

Por ejemplo, puede mostrar un módulo según el tipo de publicación, el usuario, en páginas específicas, taxonomías, etc. Esto significa que puede crear un diseño que solo muestre un mensaje si el usuario no inició sesión, o solo en WooCommerce páginas de productos. Incluso puede utilizar la lógica de varias capas para determinar cuándo mostrar un diseño. Se pueden mostrar diferentes secciones para diferentes categorías. Las diferentes partes de su sitio web pueden tener sus propios menús.

La lógica condicional es excelente si desea mostrar un formulario, mensaje o anuncio de suscripción voluntaria si el usuario no ha iniciado sesión. Aquellos que hayan iniciado sesión no verán el formulario, mensaje o anuncio. Esto le permite controlar sus argumentos de venta. Ese solo uso puede beneficiar a un sitio web lo suficiente como para usar el complemento. Las posibilidades son infinitas.

Ejemplos de Page Builder Everywhere

Creé una fila de ejemplo que quería mover de una ubicación a otra. Veamos cómo se ve en diferentes áreas de la página. Agregaré algunos ejemplos más a medida que avancemos.

Encima del encabezado

Aquí hay una fila de muestra para mostrar cómo se ve encima del encabezado. Observe que el logotipo aparece con la nueva fila. Esto es a propósito y se puede cambiar fácilmente.

Creé un diseño con un módulo de texto y ajusté el tamaño de fuente, los colores y el relleno. Coloca el texto sobre el menú usando el mismo fondo que el encabezado, a menos que le asigne un estilo personalizado. Este incluye un botón que puede llevar al lector a una página, publicación, producto, etc. Esta es una excelente manera de crear una llamada a la acción sobre el encabezado.

Debajo del encabezado

Debajo del encabezado mueve la fila al área debajo del menú. Este contenido permanece con el encabezado, por lo que si el encabezado permanece en la pantalla cuando los usuarios se desplazan, el contenido en esta área también permanecerá en la pantalla. Al igual que sobre el encabezado , este usa el color del encabezado a menos que lo diseñe usted mismo.

Aquí hay una fila con dos secciones: un módulo de texto para un mensaje y un módulo de seguimiento de redes sociales con una de cada red social que incluye. Diseñé el fondo de la fila para que se destaque un poco.

Por supuesto, este espacio se puede utilizar para cualquier cosa que desee que permanezca en pantalla, incluidos formularios de suscripción al boletín, información de contacto, horarios de atención, imágenes, etc.

Encima del contenido

En este ejemplo, lo coloqué en una publicación de blog regular que no usa Divi Builder. Cualquiera de las ubicaciones funciona con publicaciones y páginas regulares. Esta es una excelente manera de agregar diseños Divi y agregar módulos a publicaciones regulares. Por encima del contenido se desplaza con el contenido.

Debajo del contenido

Éste coloca el módulo debajo del contenido y justo encima del pie de página. A menos que lo diseñe usted mismo, adoptará el estilo del pie de página. Se desplazará con el contenido, por lo que si está utilizando paralaje, se destacará del pie de página.

Pie de página

Aquí hay un vistazo a mi diseño en el pie de página. Se puede diseñar por separado del pie de página y se desplaza con el pie de página para que se distinga del contenido si está usando paralaje.

Páginas de productos de WooCommerce

Para este ejemplo, agregué dos diseños. El primero irá por encima del producto e incluye un módulo de texto y un módulo de video .

El segundo diseño irá debajo del producto e incluye un módulo de texto y un módulo de tienda .

Luego coloqué los dos widgets en sus ubicaciones, elegí el diseño en los widgets y establecí la condición para mostrar solo el diseño en las páginas que usan el tipo de publicación Producto .

El resultado es una página de producto con diseños Divi por encima y por debajo del producto.

404 Página

Creé un diseño para usar como página 404.

Luego coloqué el widget, seleccioné el diseño y elegí las condiciones para que se mostrara solo en la página 404 . Observe que los widgets de las páginas del producto todavía están en su lugar. Las condiciones les impiden mostrar dónde no quiero que se muestren.

Esta es una excelente manera de crear páginas 404 usando Divi Builder.

Personalizador de Page Builder Everywhere

Se agrega un nuevo personalizador llamado PBE Customizer al menú desplegable en la interfaz y dentro del menú Theme Customizer . Incluye secciones para:

• Encabezado principal
• Encima del encabezado
• Pie de página

He aquí un vistazo a cada uno.

Encabezado principal

Como puede ver en el ejemplo de arriba del encabezado , el logotipo se superpone a las secciones de arriba del encabezado y el encabezado . Puede evitar que esto se superponga y dejar el logotipo en su ubicación original seleccionando Detener la sección superpuesta del logotipo sobre el encabezado .

Elija Eliminar encabezado principal predeterminado para ocultar el encabezado original. Las características del encabezado principal funcionan tanto para arriba como para debajo de las áreas del encabezado.

Encima del encabezado

Above Header le permite ocultar el contenido encima del encabezado cuando el lector se desplaza.

Pie de página

Al seleccionar Ocultar pie de página inferior, se desactiva el pie de página original. En este ejemplo, no diseñé el módulo para que adopte el estilo que lo rodea. Aquí se coloca sobre la imagen de fondo.

Precio y documentación

Page Builder Everywhere cuesta $ 14. La página de ventas incluye instrucciones y preguntas frecuentes para ayudarlo a comenzar.

Pensamientos finales

Page Builder Everywhere es un complemento fácil de usar. Le brinda cinco ubicaciones nuevas para agregar diseños de Divi, además de que puede agregarlos a tipos de publicaciones, categorías, autores, fechas, taxonomías y más específicos, y crear múltiples condiciones. Incluso puede mostrarlos u ocultarlos en función de si el usuario está conectado o no. El complemento puede entrar en conflicto con Divi Widget Builder, pero no necesitará ese complemento si está utilizando Page Builder Everywhere.

Queremos escuchar de ti. ¿Has probado Page Builder Everywhere? ¡Cuéntanos tu experiencia en los comentarios a continuación!

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