¿Qué sucede si desea agregar secciones, filas o módulos Divi a más ubicaciones en su sitio web, como arriba del encabezado o debajo del pie de página, o incluso arriba o debajo del contenido, y luego hacer que las ubicaciones sean globales para que no ¿Tienes que agregarlos a cada página? Una solución fácil es usar Divi Layout Injector.
Divi & Extra Layout Injector de Sean Barton de Tortoise IT es un pequeño complemento que facilita la inyección de diseños Divi en cinco lugares específicos de sus páginas. Incluso puede crear pies de página personalizados y una página 404.
Le permite editar sus diseños Divi sin tener que editar los archivos principales, por lo que no se requiere codificación. Puede colocar fácilmente contenido prefabricado en estas ubicaciones seleccionándolos de un cuadro desplegable.
En este artículo, repaso el uso de Divi Layout Injector y destaco sus características. También mostraré algunos ejemplos en el camino.
La instalación de Divi Layout Injector es la misma que cualquier complemento premium: cargar y activar. Todo el trabajo para Divi Layout Injector se realiza desde su panel de configuración en el tablero (Dashboard, Settings, Divi Layout Injector), o desde el editor de páginas y publicaciones en el backend.
Para usar Divi Layout Injector, primero cree o cargue los diseños y guárdelos en su biblioteca Divi. A continuación, puede seleccionarlos para usarlos como elementos globales. Puede optar por mostrarlos en todas las páginas, publicaciones, página 404, página de inicio y páginas de proyectos, o puede excluirlos. Los diseños pueden ser cualquier cosa que desee: módulos individuales, páginas completas, secciones, etc. Incluso pueden ser páginas completas o cualquier combinación que cargue o guarde como diseño.
Consejos rápidos
Cuando cree un nuevo diseño, deberá actualizar la página de configuración del inyector de diseño Divi para que aparezca en el cuadro desplegable.
Recomiendo dar a cada diseño un nombre único que describa lo que es. Me gusta crear una categoría solo para diseños que quiero inyectar.
Cinco áreas de diseño
Hay cinco áreas dentro de sus páginas en las que puede inyectar contenido:
- Preencabezado: encima del encabezado
- Contenido previo: debajo del encabezado y encima del contenido
- Post-contenido – directamente debajo del contenido
- Pre-pie de página: justo encima del pie de página y debajo del contenido de la publicación.
- Pie de página: el pie de página real
Los diseños preconstruidos se agregan a estas ubicaciones seleccionándolos de un cuadro desplegable. También puede crear una página 404 personalizada utilizando los diseños que ha creado o puede elegir cualquier página, lo que le permite crear una página 404 especializada.
Pantalla de configuración
Las selecciones se realizan desde la pantalla de configuración o desde las páginas y publicaciones reales. Puede establecer los valores predeterminados en la pantalla de configuración.
Configuración general
En Configuración general, puede decidir si los diseños globales se inyectarán en la plantilla en blanco de Divi (la que no tiene el encabezado y el pie de página estándar de WordPress). También puede optar por ocultar el encabezado estándar de WordPress en todas las páginas y publicaciones y reemplazarlo con uno que inyectará con el complemento Injector.
Plantilla en blanco
De forma predeterminada, el complemento no inyecta diseños ni páginas creadas con la plantilla en blanco de Divi. Marque la casilla en Configuración general y luego agregará los diseños a cualquier página en blanco que use el constructor Divi. Incluso si no selecciona esto, aún puede agregar diseños manualmente usando la función de inyector en el editor de páginas.
Esta es la plantilla de página en blanco que agregué a mi propio sistema de menú de íconos usando una sección que inyecté (en realidad solo copié una sección del diseño de página de inicio básico de Divi prefabricado y cambié el color de fondo). Esta es una excelente manera de usar sus propios encabezados y pies de página sin que el valor predeterminado se interponga en su diseño.
Cabecera personalizada
Al seleccionar Ocultar encabezado predeterminado, se elimina por completo el encabezado predeterminado, incluido el menú, lo que le permite reemplazarlo por el suyo propio. Puede usar un diseño de preencabezado o precontenido para crear su propio encabezado. El encabezado no será fijo y solo funciona en un diseño no fijo, por lo que deberá cambiar esta configuración en la configuración de Divi.
En el ejemplo anterior, deshabilité el encabezado predeterminado e inyecté un encabezado sin menús. Esto está utilizando un diseño de pre-encabezado. Puede hacer aún más personalizaciones de menú con un complemento compatible, el módulo de menú Divi (ancho estándar), también de Tortoise IT.
Diseño de preencabezado
El diseño de preencabezado le permite colocar contenido encima del encabezado. Puede seleccionar cualquier diseño Divi de su biblioteca en el cuadro desplegable.
Nota: Esto requiere que la navegación fija esté desactivada. Para deshabilitar la navegación fija, en el panel de control, vaya a Divi y seleccione Opciones de tema . Haga clic en el botón junto a la barra de navegación fija .
Para usarlo, cree un diseño y guárdelo en la biblioteca. Luego puede seleccionarlo y se usará como preencabezado global. Puede excluirlo de cualquier página eligiendo la página de su lista de opciones. Seleccione la configuración de alternar para elegir las exclusiones.
Hice una pequeña sección con publicidad y la inyecté como preencabezado. Excluí esto de las publicaciones del blog y de la página 404.
En este, agregué un pequeño formulario personalizado sobre el encabezado para una suscripción de correo electrónico.
Este es un excelente lugar para agregar una llamada a la acción, como un banner para una venta o suscripción a un boletín informativo. Otras posibilidades incluyen agregar navegación a las secciones principales de su sitio web, colocar anuncios sobre el encabezado, agregar un mensaje personalizado, información, etc.
Diseño de contenido previo
El contenido previo colocará el diseño debajo del menú y encima de la primera sección Divi en su diseño.
En este ejemplo, he colocado el mismo icono de menú de navegación debajo del encabezado. Esta es una excelente ubicación para una llamada a la acción, como la suscripción a un boletín informativo, o enlaces a otro contenido, como categorías principales, o incluso anuncios.
Publicar Contenido
El contenido posterior inyectará el diseño debajo de la última sección Divi justo encima del pie de página. Este espacio suele estar reservado para contenido como información de contacto, mapas, información de ubicación, horarios de apertura, enlaces a otros contenidos, etc.
Pre-footer te da otra sección arriba del pie de página, justo debajo del contenido de la publicación. Obviamente, no usarías el mismo diseño para ambos, pero quería mostrar la ubicación. El menú de iconos superior es la ubicación del contenido posterior y el inferior es la ubicación previa al pie de página. Este espacio se puede utilizar de la misma manera que la ubicación del contenido posterior.
La última área es el pie de página en sí. Aquí puede agregar contenido utilizando el Editor visual. Puede ser cualquier tipo de contenido que desee, como texto, medios, códigos abreviados, etc. El editor de pie de página estándar envolverá su contenido en una etiqueta de párrafo HTML. Tiene una opción para marcado avanzado donde elimina ese contenedor para que pueda crear diseños más complejos. Incluye un código abreviado para la fecha y el nombre del sitio web.
Aquí hay un ejemplo con un par de imágenes, pero puede colocar enlaces, formularios, otros tipos de medios, etc., en el pie de página. Los íconos de las redes sociales todavía están controlados por la configuración de Divi como de costumbre.
Elegir diseños para páginas y publicaciones específicas
¿Qué sucede si desea que los diseños aparezcan en algunas páginas y publicaciones, pero no en otras? ¿Qué sucede si desea un diseño diferente en páginas y publicaciones específicas? ¿Qué sucede si no desea tener diseños globales predeterminados?
Ya sea que haya seleccionado o no los diseños para que aparezcan en todas las páginas y publicaciones, aún puede incluir, excluir y personalizar cualquier página o publicación que desee en la pantalla de edición de la página o publicación. En la esquina inferior derecha, verá una nueva área llamada Divi Layout Injector. Aquí puede elegir el diseño que desea que aparezca en cuatro ubicaciones. También puede deshabilitar cualquier diseño que no desee mostrar en esa página. El pie de página no se puede seleccionar aquí.
Con esta función, puede configurar los diseños para que estén activados o desactivados de forma predeterminada y luego personalizar cada página o publicación en consecuencia.
404 página
Puede crear una página 404 utilizando diseños o una página prefabricada. Puede usar cualquier página como página 404, pero debe ser una página publicada (simplemente no deje que aparezca en su menú).
Creé una página y guardé el diseño en mi biblioteca, así que tengo ambas opciones. No excluí la página 404 del contenido del preencabezado, pero excluí las otras ubicaciones. El pie de página es global.
Constructor frontal Divi
Puede crear los diseños utilizando el generador frontal como lo haría con cualquier página o publicación, y luego guardarlos en la biblioteca Divi para usar con Divi Layout Injector.
Los diseños inyectados no se pueden personalizar desde el generador frontal en una página o publicación que está editando, pero puede cargar los diseños en el generador Divi y editarlos desde la interfaz como lo haría con cualquier página o publicación.
En este ejemplo, cargué el diseño dentro de una sección Divi y ahora puedo editar desde el frente.
Páginas de productos de WooCommerce
Incluso puede inyectar diseños en las páginas de productos de WooCommerce. Las ubicaciones de los inyectores son las mismas que en cualquier página. Este complemento no modifica la lista real de WooCommerce; necesitará Woo Layout Injector para eso.
Licencia y Precio
Divi Layout Injector cuesta $10 e incluye actualizaciones de por vida. El acuerdo de licencia incluye uso ilimitado para sitios personales y de clientes. Es totalmente compatible con Divi 3.0.
Pensamientos finales
Divi Layout Injector es un complemento simple que tiene mucho que ofrecer para personalizar diseños en Divi. Agregue fácilmente cualquier diseño prefabricado a cinco ubicaciones diferentes en páginas y publicaciones, incluidos WooCommerce y la plantilla Divi Blank, cree su propia página 404 usando diseños o una página, y cree su propio pie de página usando el editor WYSIWYG.
Establecer los valores predeterminados desde la pantalla de configuración es simple y puede anular los valores predeterminados en cualquier página o publicación. Los diseños predeterminados son globales, pero puede personalizar la configuración para páginas y publicaciones individuales.
Descubrí que Divi Layout Injector es intuitivo de usar, lo que facilita la creación de algunos diseños Divi interesantes. Los diseños de Divi se pueden mejorar en gran medida y fácilmente con este complemento.
¿Has probado el inyector de diseño Divi?
Imagen destacada a través de vasabii / shutterstock.com.