Divi incluye muchas funciones de estilo para el encabezado, pero ¿qué sucede si desea crear su propio encabezado con Divi Builder? Un complemento de terceros llamado Mhmm hace exactamente eso. Te permite crear encabezados con cualquier módulo o diseño Divi y diseñarlos con Divi Builder.
Mhmm es la abreviatura de Mighty Header and Menu Maker. Reemplaza el encabezado Divi con su propio encabezado. Proporciona una nueva biblioteca donde creas los encabezados y los mega menús usando Divi Builder con todos los módulos Divi . Puede comprar Mhmm en el sitio web del desarrollador .
Estoy probando la versión 1.1.3 de Mhmm con WordPress 4.9.5 y Divi 3.0.106. No es compatible con Extra o el complemento Divi Builder.
Antes de que pueda cargar el complemento, debe descomprimir el archivo descargado. Hay dos complementos dentro de la carpeta: mhmm y divi-stop-stacking. Una vez que haya descomprimido la carpeta, cárguela y actívela normalmente. La carpeta también incluye un archivo JSON.
Active la clave API en el menú de configuración para recibir actualizaciones.
Módulos mmmm
Mhmm agrega tres módulos al Divi Builder:
hamburguesa
La pestaña Contenido del módulo Hamburger le permite elegir el menú que desea mostrar, seleccionar entre tres estilos de menú (pantalla completa, deslizar hacia la izquierda y deslizar hacia la derecha) y ajustar el fondo. El fondo es lo que se muestra cuando se abre el menú de hamburguesas.
La pestaña Diseño incluye ajustes de color, estilo, alineación, centrado y texto para el botón de menú. También incluye configuraciones para el color de los elementos del menú, el espaciado de los elementos del menú, el texto del elemento del menú y el texto del elemento del submenú.
La pestaña Avanzado incluye visibilidad y varios campos CSS personalizados. Si no hay un ajuste para algo en las otras pestañas, puede ajustarlo con CSS aquí.
Mhmm en línea
La pestaña Contenido del módulo en línea incluye la selección de menú, la alineación, habilitar una flecha hacia abajo para los menús principales y las transiciones de submenú (elegir entre desvanecimiento, crecimiento e instantáneo). La pestaña Diseño incluye las mismas características que el módulo Hamburguesa y agrega sombra de cuadro. La pestaña Avanzado agrega campos que son específicos de este menú.
La pestaña Contenido del módulo Mega Menú le permite elegir el menú de un cuadro desplegable y la configuración de fondo. La pestaña Diseño solo incluye la configuración del botón de menú. La pestaña Avanzado tiene campos para el botón de menú.
Creación y activación de encabezados en línea y de hamburguesa
En el menú del tablero, ve a Divi > Mhmm Headers . Aquí crea un nuevo encabezado y ve la lista de encabezados que ha creado.
Al hacer clic en Agregar nuevo, se abre un modal al igual que la construcción en la Biblioteca Divi. Aquí usted nombra el encabezado, selecciona el tipo de diseño y elige la categoría. Debe elegir Diseño para los menús en línea y de hamburguesa.
Esto abre un generador donde puede crear el diseño para el encabezado. Agregue secciones, filas, columnas, cualquier módulo que desee y diseñelos como de costumbre.
Estoy usando un diseño de ¼, ½, ¼ y agregué una imagen para el logotipo, un menú en línea configurado como predeterminado y un botón para una llamada a la acción solo para ver cómo funciona.
Este nuevo encabezado no se mostrará hasta que lo asigne. En el Personalizador de temas , vaya a Encabezado y navegación > Formato de encabezado .
Aquí elegirá su diseño y el estilo del encabezado. Te da cinco estilos para elegir. Ahora muestra el encabezado que creé, usando el gráfico de estrellas como logotipo, el menú principal y un botón.
Los estilos incluyen:
- Básico
- pegarse a la parte superior
- Mantener en la parte superior, ocultar en el desplazamiento
- Mantener en la parte superior, mostrar en el desplazamiento
- pegarse al fondo
- Mantener en la parte inferior, mostrar en el desplazamiento
Los mega menús tienen dos componentes: el encabezado y el menú abierto. Esto requiere que construyas dos bibliotecas diferentes. El encabezado tiene la misma estructura que los menús Inline y Hamburger. El menú abierto está integrado en la biblioteca Mhmm Mega Menus. En el menú del tablero, ve a Divi > Mhmm Mega Menus . Esto es lo único que encontré confuso (me gusta sumergirme sin leer las instrucciones), pero una vez que vi los videos, no tuve ningún problema para crearlos.
Ejemplos de hamburguesas de encabezado Mhmm
Este usa el módulo Hamburger. Estoy usando elementos del paquete de diseño Coffee House.
He colocado un fondo del diseño en la sección. La fila utiliza un diseño de 1/3, 1/3, 1/3 con una imagen para el logotipo, el módulo de hamburguesas y un módulo de texto sobre un módulo de botones. Todos los colores son del diseño.
Configuré el módulo Mhmm para usar mi nuevo menú, seleccioné centrado y cambié el botón y los colores de desplazamiento del botón. Está configurado para centrarse verticalmente y abrir el menú a pantalla completa.
El módulo de texto muestra un mensaje con etiquetas H3 mientras que el botón se abre en una nueva página para mostrar mapas de ubicaciones. El módulo de botones es del propio diseño.
Este es el menú al abrir. Agregué un fondo al módulo Mhmm con una superposición blanca y una opacidad establecida en 76. Centré el texto y cambié los colores para que coincidan con el diseño. También configuré el tamaño del elemento del menú en 50 y la altura de la línea del elemento del menú en 1,6. El botón de cerrar también usa colores del diseño. Estoy flotando sobre Noticias.
Los elementos del submenú usan los mismos colores, pero configuré el tamaño del elemento del menú en 36 y la altura de la línea del elemento del menú en 1.
Este es el mismo menú usando Slide in Left.
Ejemplos en línea de encabezado Mhmm
Aquí hay un encabezado simple usando el módulo en línea. Usé elementos del paquete de diseño Pottery.
Estoy usando una fila de ¼, ¼, ½ con un módulo de imagen para el logotipo, un módulo de botón para el CTA y el módulo en línea. Coloqué una imagen de fondo del paquete de diseño de cerámica dentro de la sección y agregué una superposición negra con un 50 % de opacidad.
Agregué un efecto de sombra a la sección y agregué 7 píxeles para el relleno tanto para la sección como para la fila, e hice la fila de ancho completo. El botón es uno de los botones del paquete de diseño Pottery.
Cambié el color del texto Mhmm a blanco y agregué 20 píxeles de relleno en la parte superior. Cambié los colores de los elementos del submenú, usando colores del diseño en sí, tanto para los elementos normales como para los que se desplazan por encima. El menú está ajustado a la derecha.
Solo tomó unos segundos cambiar el diseño del encabezado. Cambié la configuración de la fila a ½, ¼, ¼, cambié la imagen y los módulos Mhmm, y cambié su alineación para que coincidieran.
Aquí hay un vistazo al encabezado en la parte inferior. Lo configuré para que se adhiera a la parte superior en el desplazamiento.
Para el megamenú estoy usando una sección del paquete de diseño de recetas de comida. Aquí está el encabezado. Agrega un ícono de menú de hamburguesa.
Este es el encabezado que se crea en la biblioteca Mhmm – Header. Utiliza el módulo Mega Menú. He agregado una imagen de fondo y una sombra de cuadro a la sección. Agregué un logotipo al módulo de imagen y el módulo Mega Menu muestra un menú de hamburguesas cuadradas con texto. Lo hice centrado verticalmente y cambié el texto y el icono a blanco.
Este es el diseño del mega menú que se crea en la biblioteca Mhmm – Mega Menu. Esta es la parte que se abre. Puede crear cualquier tipo de diseño que desee. Estoy usando una sección del paquete de diseño y agregué cuatro botones.
Sugerencia: cargué un diseño en una página normal, hice clic con el botón derecho en la sección que quería usar dentro del mega menú y seleccioné Copiar, fui al diseño del mega menú, hice clic con el botón derecho en una sección en blanco y hice clic en Pegar.
Aquí está el mega menú abierto. Agregué un fondo blanco a la sección, reduje la opacidad a blanco y eliminé el relleno.
Mhmm diseños
Mhmm incluye 8 diseños para ayudarlo a comenzar. Importarlos en la biblioteca Mhmm – Headers. Puede verlos en la página de demostración del desarrollador .
Complemento Divi Stop Stacking
Esto elimina el apilamiento predeterminado en el encabezado que Divi normalmente hace cuando una pantalla se reduce a 980 píxeles de ancho. Instálelo de la misma manera que Mhmm. Agrega un módulo al Divi Builder. Todo lo que necesita hacer es colocar el módulo en algún lugar dentro de la fila. Desactiva el apilamiento para la fila en la que se encuentra el módulo. No tiene opciones para ajustar y no muestra nada.
Sin Divi Stop Stacking, el encabezado se apila cuando alcanza los 980 píxeles.
Con Divi Stop Stacking, los elementos del encabezado permanecen en la misma línea.
Mhmm Licencia y Documentación
Puede comprar Mhmm en el sitio web del desarrollador . Tiene dos licencias:
- 1 sitio en vivo y 1 sitio de desarrollo: $ 35
- Sitio ilimitado – $65
Para la documentación, hay muchos videos tutoriales en el sitio web del desarrollador . Recomiendo encarecidamente verlos, ya que incluyen muchos trucos de Divi.
pensamientos finales
Mhmm ofrece muchas funciones para crear encabezados personalizados y mega menús para Divi. Puede hacer mucho más de lo que he mostrado aquí, pero requiere algo de paciencia para aprender y es posible que deba profundizar en CSS para diseñar algunos de los elementos. Si está interesado en crear encabezados personalizados para Divi, vale la pena echarle un vistazo a Mhmm.
Queremos escuchar de ti. ¿Has probado mmm? Háganos saber lo que piensa al respecto en los comentarios.
Imagen destacada vía aliaksei kruhlenia / shutterstock.com