Lo más destacado del complemento Divi: generador de páginas en todas partes

Divi es un generador 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 quieren usarlo en todas las áreas posibles de su sitio web. Ahí es donde entra en juego 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 generador en tipos de publicaciones personalizadas , páginas de categoría, páginas de búsqueda, páginas de archivo, páginas de productos de WooCommerce, páginas 404, etc. Incluso puede usarlo para crear encabezados, pies de página y barras laterales.

Para probar, 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 divididos

El complemento utiliza sus diseños Divi prefabricados, por lo que primero deberá crearlos. Vaya a Divi , Biblioteca Divi 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 especial 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 cree 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
  • Por 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 en la que 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 etiquetado Agregar más diseños a la Biblioteca Divi y lo llevará a la biblioteca.

Lógica Condicional

El widget le permite usar lógica condicional para que pueda 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. Puedes añadir tantas condiciones como quieras. Utilizan la lógica O, 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, 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 usar la lógica de varias capas para determinar cuándo mostrar un diseño. Se pueden mostrar diferentes secciones para diferentes categorías. 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 si el usuario no ha iniciado sesión. Aquellos que hayan iniciado sesión no verán el formulario, el mensaje o el 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 avanzamos.

Por encima del encabezado

Aquí hay una fila de muestra para mostrar cómo se ve sobre el 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 encima del menú con el mismo fondo que el encabezado, a menos que le dé 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 un CTA 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 de esta área también permanecerá en la pantalla. Al igual que arriba del encabezado , este usa el color del encabezado a menos que usted mismo lo diseñe.

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 la pantalla, incluidos los formularios de suscripción al boletín informativo, la información de contacto, el horario de atención, las imágenes, etc.

Por 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 las publicaciones regulares. Por encima del contenido se desplaza con el contenido.

Debajo del contenido

Este 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 parallax, se destacará del pie de página.

Pie de página

Aquí hay un vistazo a mi diseño dentro del pie de página. Se puede diseñar por separado del pie de página y se desplaza con el pie de página, por lo que se destacará del contenido si está utilizando parallax.

Páginas de productos de WooCommerce

Para este ejemplo, he agregado dos diseños. El primero irá 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 encima y debajo del producto.

404 página

Creé un diseño para usar como una 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 de productos todavía están en su lugar. Las condiciones impiden que se muestren donde no quiero que lo hagan.

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

Creador de páginas en todas partes Personalizador

Se agrega un nuevo personalizador llamado Personalizador PBE al menú desplegable en la parte frontal y dentro del menú Personalizador de temas . Incluye secciones para:

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

Aquí hay un vistazo a cada uno.

Encabezado principal

Como puede ver en el ejemplo arriba del encabezado , el logotipo se superpone a las secciones 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 encima del encabezado .

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

encima del encabezado

Sobre el encabezado le permite ocultar el contenido sobre el 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, por lo que toma 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 nuevas ubicaciones para agregar diseños Divi, además 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 ha iniciado sesión 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? ¡Háganos saber su experiencia en los comentarios a continuación!

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