Lo más destacado del complemento Divi: el módulo extendido de encabezado de ancho completo

Divi tiene un módulo de encabezado de ancho completo incorporado para crear su propio encabezado completo con títulos, imágenes, botones e íconos. Es un buen módulo al que puedes diseñar y agregar tu propio CSS personalizado para crear efectos. ¿Qué pasaría si quisiera agregar efectos y personalizaciones sin usar CSS? Necesita un complemento como Custom FullWidth Header Extended .

El encabezado de ancho completo personalizado extendido de Divi Web Design agrega un módulo a Divi Builder que crea un nuevo encabezado de ancho completo con 49 tipos de animación y muchos efectos, incluidos efectos de texto, efectos de fondo, animaciones de entrada y salida, ajustes de velocidad de animación, elementos de encabezado y mucho más. Puede exportar e importar la configuración del módulo como cualquier módulo Divi.

Dado que comparte características con el módulo de encabezado de ancho completo Divi estándar, primero echemos un vistazo al módulo estándar para comparar. Luego veremos el módulo extendido y veremos algunos ejemplos y lo veremos en acción. La animación original es más fluida que mis GIF reducidos. Las imágenes utilizadas son de Unsplash.com.

El módulo de encabezado estándar de ancho completo

Las funciones del módulo estándar le brindan las herramientas para crear un título, texto de subtítulo, cambiar los colores, hacerlo en pantalla completa, ajustar la orientación del texto, agregar dos botones, usar colores de fondo, usar parallax, agregar un logotipo, usar una imagen de fondo, ajuste la alineación vertical y agregue texto con el editor de texto. La configuración avanzada de diseño le permite diseñar el título, el subtítulo y el contenido.

El módulo FullWidth Header Extended incluye estas funciones y agrega muchas animaciones y personalizaciones, así como varias funciones nuevas. He incluido tanto las características estándar como las nuevas para darle una idea de lo que puede hacer el complemento. Echemos un vistazo a cada función de FullWidth Header Extended .

El módulo extendido de encabezado de ancho completo

El módulo se agrega a la lista de módulos para la sección de ancho completo. Simplemente haga clic en él y utilícelo como un módulo normal. Se destaca (amarillo brillante) por lo que es fácil de encontrar. Notarás otro módulo aquí en amarillo brillante llamado Fullwidth Text Extender . Se incluye de forma gratuita y le echaremos un vistazo rápido al final de este resumen.

Hay muchos efectos y cada uno puede usar una variedad de tipos de animación para efectos de entrada y salida y efectos de animación para texto, imágenes, íconos, etc. A continuación se muestra cada uno de los efectos. A lo largo de este complemento destacado, agregaré algunas de las animaciones. Los he incluido como gif para que puedas tener una idea de cómo se ven.

Efecto de escritura

El efecto de escritura coloca un cursor en la pantalla y escribe el texto que desea. También puede hacer que elimine el texto y vuelva a escribirlo en un bucle.

Estoy usando efectos estáticos y de escritura. Esto muestra tanto el texto que permanece en la pantalla como el texto que usa el efecto de escritura. Utiliza el título de la página como texto estático. Puede ajustar los colores, el tiempo, el tipo de animación, etc. También puede desactivar el ciclo de escritura si no desea que elimine el texto continuamente y lo vuelva a escribir.

Efecto rotador

El efecto rotador es otro efecto de título que anima el texto utilizando cualquiera de los 49 tipos de animación. También puede usar texto estático junto con el texto giratorio. Seleccione el tipo de animación en el cuadro desplegable, ajuste la velocidad de la animación con el control deslizante y ajuste el color de la fuente del rotador con el selector de color.

En este ejemplo, he seleccionado el tipo de animación Tada.

Efectos Textilados

El tercer efecto de título se llama Textillate. Utiliza las mismas animaciones que el efecto Rotator y agrega otras formas de animar el texto. Seleccione los tipos y efectos de animación de entrada y salida de sus propios cuadros desplegables. Los tipos de animación incluyen secuencia, inversión, sincronización y reproducción aleatoria.

Este ejemplo utiliza Shuffle, Rotate In y Reverse Out.

Fondo de textoGif

El cuarto efecto de título es TextGif Background. Este efecto hace que las fuentes sean transparentes para que el fondo se vea a través de ellas. Luego puede agregar cualquier imagen de fondo que desee mostrar.

línea elegante

Fancy Line coloca una línea corta alrededor del título. Selecciónelo para que aparezca antes o después del título y oriéntelo a la izquierda, al centro o a la derecha. También puede ajustar el espaciado entre líneas superior e inferior, cambiar el color, ajustar la altura de línea, etc.

Animación de encabezado completo

Esta es una animación de encabezado que le permite animar todo el encabezado, incluido el subtítulo y el contenido del editor visual. Tiene las mismas opciones de animación que los otros efectos con la excepción de continuar la animación. Una vez que se completa la animación, el encabezado permanece en la condición después de la animación. Si animas, el contenido del encabezado permanece en la pantalla. Si animas, el contenido del encabezado está fuera de la pantalla. Si usa este, no puede usar animaciones para el título, el subtítulo, el contenido o los botones.

Encabezado de pantalla completa

Use Hacer pantalla completa para que su encabezado ocupe toda la pantalla. Como veremos más adelante, el encabezado puede ser un bloque sólido de color, usar los degradados o usar imágenes de fondo. Para crear un encabezado de pantalla completa sin el menú Divi normal, use la plantilla de página en blanco . Esto funciona igual que el módulo normal con la excepción de mostrar las animaciones.

Botón de desplazamiento hacia abajo

El módulo regular incluye un botón de desplazamiento hacia abajo, pero este agrega varias características nuevas. Al seleccionar el interruptor Mostrar botón de desplazamiento hacia abajo, se revelarán configuraciones que incluyen íconos y animaciones. Si no desea utilizar uno de los 11 iconos disponibles, puede cargar el suyo propio. Puede configurarlo para animar en desplazamiento. Todos los tipos de animación están disponibles para el icono.

En este ejemplo, el ícono usa el tipo de animación Tada.

Formulario de búsqueda

Agregue un formulario de búsqueda a su encabezado. Puede configurar el formulario de búsqueda para incluir productos WooCommerce y excluir páginas y publicaciones. Ajuste el color del texto, la orientación, muestre el icono de búsqueda, oculte el texto de búsqueda, oculte el botón, alinee el botón, seleccione la orientación del botón de búsqueda e incluya su propio texto de marcador de posición del cuadro de búsqueda.

Aquí hay un vistazo al formulario. Configuré el texto en claro y agregué el ícono de búsqueda, pero dejé todo lo demás en su configuración predeterminada.

Botones

Al igual que el módulo estándar, puede mostrar hasta 2 botones dentro del encabezado, cada uno con su propio texto, estilo y URL. Lo que agrega este complemento es una función emergente de video, que le permite vincular los botones a videos, que pueden abrirse en la misma pestaña o como un cuadro de luz emergente dentro de su sitio web.

Este ejemplo muestra la ventana emergente de video que aparece cuando se usa la URL del enlace incrustado de YouTube (la parte del enlace entre comillas).

Fondo con superposición

Al igual que el módulo estándar, puede elegir entre una imagen o un fondo sólido y luego agregar una superposición.

Aquí hay una imagen de pantalla completa con una superposición negra establecida en un 48 % de opacidad. Este está usando el efecto de escritura.

Fondo degradado animado

El fondo degradado animado le brinda estilos de animación sólidos o transparentes y un ajuste de velocidad para controlar qué tan rápido hace las transiciones entre degradados. Probablemente hayas visto este aspecto en muchos sitios Divi. Creo que se ve muy bien y la capacidad de elegir combinaciones de colores ilimitadas y la velocidad de animación pueden hacer que el tuyo se destaque del resto.

Este es un breve ejemplo de un degradado animado. Toda la animación va de un lado del espectro de color al otro.

Gradiente de fondo

Este es un degradado no animado. Elija su tipo de degradado y dos colores diferentes para crear una combinación de colores ilimitada. Los tipos de degradado incluyen de izquierda a derecha, de arriba a abajo, radial, diagonal hacia abajo (de izquierda a derecha) y diagonal hacia arriba (de izquierda a derecha).

He elegido un degradado de izquierda a derecha. Pueden ver como poco a poco hace una transición de mi primer color a mi segundo color.

Efecto de partículas

Aquí está el mismo gradiente de fondo que arriba, solo que esta vez está usando el efecto de partículas. El efecto de partículas agrega puntos flotantes que están conectados con líneas. Estas partículas también usarán su mouse para conectar una línea, que en realidad es una aleta para jugar. El efecto de partículas agrega un destello adicional que llama la atención sobre su encabezado.

Efecto de paralaje

El efecto de paralaje, también incluido en el módulo normal, funciona igual que dentro de las secciones y filas. La diferencia con el uso de paralaje en una fila normal es que puede cargar una imagen en este módulo, por lo que si mueve el módulo, el efecto de paralaje permanece en el módulo en lugar de en la fila. Una vez que haya cargado su imagen y seleccionado entre CSS o True Parallax, puede usar todos los efectos de encabezado que desee sobre la imagen de fondo de paralaje como lo haría con una imagen de fondo normal.

Logo es exactamente eso: un logo colocado dentro del encabezado. También utiliza las casi 50 animaciones, por lo que puede traer su logotipo dentro o fuera de la pantalla de la forma que desee, o prescindir de las animaciones (lo que hace que funcione igual que el logotipo en el módulo estándar) y simplemente colocarlo en el pantalla y dejar que algo más tenga la atención animada. Puede mostrarlo u ocultarlo en el desplazamiento, darle un texto alternativo y darle un título HTML.

Alineación vertical de texto

Alinee el texto en el centro del encabezado o en la parte inferior. Aquí está alineado en la parte inferior. Puedes ver la alineación central en la imagen arriba de esta. Esto funciona igual que el módulo estándar.

Imagen de cabecera

Al igual que el módulo estándar, la imagen del encabezado se agrega debajo de los botones. La diferencia es que este puede usar todos los tipos de animación. También se puede alinear verticalmente con el centro o la parte inferior del encabezado. También puede mostrarlo sin animación. Cualquier imagen de tamaño funcionará, aunque no se muestra en todo el ancho. Lo conseguí mostrar alrededor de 900 píxeles de ancho.

Editor de contenido

Este es un editor visual/de texto TinyMCE estándar donde puede agregar texto, medios y códigos abreviados. Puede hacer cualquier cosa con este editor que puede hacer con el editor normal de WordPress . El contenido aparecerá debajo del encabezado. Esto funciona igual que el módulo de encabezado estándar de ancho completo.

Aquí hay un ejemplo usando video incrustado dentro del editor de texto. Funciona igual que cualquier video incrustado, por lo que puedo configurarlo para que se reproduzca automáticamente, hacer que el usuario haga clic para reproducir, etc. Este es un excelente lugar para formularios de registro, CTA, suscripciones, mensajes, imágenes, presentaciones de diapositivas, etc. .

Configuración avanzada de diseño

Todas las configuraciones avanzadas que esperaría de un módulo Divi están aquí. Puede ajustar el estilo de las fuentes, encabezados, líneas, botones, íconos, relleno, márgenes, etc. Está dividido en secciones individuales para que pueda diseñarlos por separado. Las secciones incluyen títulos, subtítulos, contenido, línea elegante y búsqueda. Puede ajustar los efectos de animación para cada sección.

Aquí he realizado algunos ajustes a las fuentes, tamaños, botones y colores utilizando la configuración de diseño avanzada.

Módulo extendido de texto de ancho completo

Es posible que haya notado que en la ventana donde elegí el módulo había otro módulo llamado FullWidth Text Extender . Este es un módulo de texto que se incluye con el complemento de forma gratuita. Los dos módulos se pueden utilizar juntos o de forma independiente.

Incluye todas las características y funciones del módulo de texto estándar, incluido el color del texto, la orientación, el contenido, la desactivación en dispositivos específicos, la etiqueta de administrador, la configuración de diseño avanzada y la pestaña CSS personalizada.

Esto abre muchas oportunidades de diseño con la sección de encabezado de ancho completo. No solo puede agregar texto al encabezado de ancho completo, sino que también puede agregar códigos cortos y medios.

Aquí hay un ejemplo donde coloqué texto encima del encabezado. El módulo FullWidth Header Extended tiene un editor de texto, pero quería colocar el texto sobre el encabezado en una sección de ancho completo. Esto es excelente para colocar mensajes, formularios de suscripción, pancartas, etc., sobre el contenido del encabezado. He usado la plantilla Divi Blank Page para que no muestre el encabezado integrado ni su navegación. Agregué la navegación en esta página colocando un módulo de menú de ancho completo en Divi Builder para crear mi propio encabezado completo con navegación.

Uso de encabezado de ancho completo extendido con extra

Los módulos FullWidth Header Extended y FullWidth Text Extended funcionan con Extra . Extra no tiene la plantilla de página en blanco, por lo que el menú permanece sobre el encabezado. Puede hacer que esto sea invisible si lo desea seleccionando Ocultar navegación hasta desplazarse en el personalizador de temas o simplemente utilícelo tal como está. Para hacer que el menú sea invisible, vaya a Configuración de encabezado y navegación y Configuración de encabezado y formato para encontrar el ajuste.

Licencia

El complemento se puede usar en sitios web ilimitados para usted y sus clientes. Incluye un año de actualizaciones y seis meses de soporte.

Pensamientos finales

FullWidth Header Extended agrega tantas personalizaciones sobre el ya poderoso encabezado de ancho completo que es difícil imaginar estar sin él. El módulo FullWith Text Extended incluido funciona bien como compañero para crear algunas posibilidades de diseño interesantes.

Me gustaron especialmente las animaciones, los degradados y los efectos de partículas. Todas las características agregan detalles a su sitio web sin caer en el truco. Como cualquier tipo de animación, no recomiendo hacerla. Si desea crear un encabezado personalizado lleno de posibilidades de animación, FullWidth Header Extended puede manejarlo por usted.

¿Has probado Custom FullWidth Header Extended?

Imagen destacada de VectorsMarket / shutterstock.com