Estilo del menú de pantalla completa de Divi
Publicado: 2017-09-05El menú de pantalla completa de Divi presenta una gran oportunidad para el diseño personalizado. A diferencia de los otros cuatro estilos de encabezado disponibles en el Personalizador de temas de Divi, el menú de pantalla completa llena toda la pantalla cuando está activo. Esto deja espacio para un diseño creativo para el menú y los elementos de encabezado de Divi.
En la publicación de hoy, le mostraré cómo diseñar su menú de pantalla completa para darle una sensación más personalizada a sus visitantes. Para lograr esto, cambiaré algunas opciones en el personalizador de temas y agregaré algo de CSS personalizado.
Empecemos.
El antes y el después
Así es como se ve el menú de ancho completo por defecto:
Aquí hay un adelanto del nuevo diseño:
Estilo del menú de pantalla completa de Divi
Suscríbete a nuestro canal de Youtube
Empezando
Antes de comenzar con el diseño, asegúrese de tener un menú principal activo con elementos de menú ya agregados.
Actualizar la configuración en el personalizador de temas
Desde su panel de WordPress, vaya a Divi> Personalizador de temas> Encabezado y navegación> Formato de encabezado. Luego, seleccione Pantalla completa como Estilo de encabezado.
Una vez establecido el estilo de encabezado de pantalla completa, vuelva a Encabezado y navegación. Ahora verá un nuevo conjunto de opciones llamado "Deslizar hacia adentro y configuración de encabezado de pantalla completa".
Actualice la configuración de encabezado de pantalla completa y deslizamiento de la siguiente manera:
Marque la opción Mostrar barra superior
Tamaño del texto del menú: 46px
Tamaño del texto de la barra superior: 24px
Fuente: Playfair Display
Estilo de fuente: Negrita (B)
Color del enlace del menú: #ffffff
Color de enlace activo: # edef86
Color del texto de la barra superior: #ffffff
Ahora vuelva a la configuración de Encabezado y navegación y haga clic en Elementos del encabezado. En Elementos de encabezado, actualice lo siguiente:
Seleccione Mostrar iconos sociales
Seleccione Mostrar icono de búsqueda
Número de teléfono: [ingrese el número]
Correo electrónico: [ingrese el correo electrónico]
Una vez que todo está configurado, este es el aspecto que debería tener el diseño predeterminado:
Ahora agreguemos algo de CSS personalizado.
Agregar CSS personalizado
La adición de CSS personalizado en Divi se puede hacer en algunos lugares. Dado que ya estamos usando el personalizador de temas, vaya a CSS adicional. Aquí es donde agregaremos nuestro CSS. Por supuesto, si prefiere agregarlo a su archivo style.css externo en su tema hijo, hágalo.
Para aquellos de ustedes que tienen poco tiempo, pueden pasar a la versión completa del código CSS que pueden copiar y pegar en su sección CSS adicional. Solo sepa que aún tendrá que regresar y agregar algunos elementos como la imagen de fondo a su código.
Ahora volvamos a agregar nuestro CSS.
Dado que la mayor parte del CSS personalizado solo se aplicará a la versión de escritorio del encabezado de pantalla completa, comenzaremos agregando una consulta de medios que apunta a tamaños de pantalla con un ancho mínimo de 980 px. Agregue lo siguiente en la sección CSS adicional:
@media all and (min-width: 980px){
}
Ahora cambiemos un poco el diseño del encabezado de pantalla completa ajustando la posición del menú de navegación y los elementos de la barra superior para que la navegación esté a la izquierda de la pantalla y los elementos de la barra superior se apilen verticalmente a la derecha de la pantalla. Para realizar este cambio, agregue el siguiente CSS dentro de los corchetes de consulta de medios.
/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
width: 50%;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
padding-top: 0px !important;
}
/*adjust position of top bar elements*/
.et_header_style_fullscreen .et_slide_menu_top {
width: 50%;
text-align: center;
display: table !important;
vertical-align: middle;
position: initial;
float: right!important;
height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
display: table-cell !important;
position: relative;
vertical-align: middle;
text-align: left!important;
padding: 0 15%;
width: 100%;
}
.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
width: 100%;
}
.et_header_style_fullscreen div#et-info {
float: none!important;
width: 100%;
}
.et_header_style_fullscreen div#et-info span {
display: block;
margin-bottom: 30px;
}
A continuación, aumentemos el tamaño de nuestra barra de búsqueda con el siguiente CSS:
/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
margin-top: 30px !important;
margin-bottom: 15px;
width: 100% !important;
max-width: 300px !important;
padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
width: 50px;
height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
font-size: 22px;
}
Y agreguemos el siguiente CSS para alinear el menú a la derecha:
/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
text-align: right;
padding: 0 15%;
}
Luego, hagamos que el ícono de cerrar el menú en la esquina superior derecha sea más grande y más fácil de hacer clic:
/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
font-size: 120px;
}
También eliminemos la superposición de fondo detrás de los elementos del menú superior y eliminemos la opacidad del fondo.
/*take out background overlay*/
.et_slide_menu_top {
background: none;
}
/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}
Si tiene elementos de submenú, este CSS hace que la flecha desplegable a la derecha del elemento de menú sea más grande:
/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;
}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}
Veamos lo que tenemos hasta ahora:
Ahora estamos listos para agregar nuestra imagen de fondo. Como quiero que mi imagen de fondo se muestre en todos los dispositivos, voy a agregar este CSS fuera de los corchetes de consulta de medios para que el fondo no se oculte en los tamaños de pantalla con un ancho inferior a 980px.
/*add background image*/
body #page-container .et_slide_in_menu_container{
background: url('INSERT IMAGE URL') center center !important;
background-size: cover !important;
}
Si aún no tiene una URL de imagen de fondo, cargue una imagen de fondo (1920 × 1080) en la galería de medios de WordPress y copie la URL.
Ahora reemplace el texto que dice "INSERTAR URL DE IMAGEN" pegando la URL de su imagen en el código.
¡Ya terminaste!
Aquí hay una versión completa del código CSS que debería haber agregado a su CSS adicional (excepto por la URL de la imagen que debe proporcionar):
@media all and (min-width: 980px){
/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
width: 50%;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
padding-top: 0px !important;
}
/*adjust position of top menu and elements*/
.et_header_style_fullscreen .et_slide_menu_top {
width: 50%;
text-align: center;
display: table !important;
vertical-align: middle;
position: initial;
float: right;
height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
display: table-cell !important;
position: relative;
vertical-align: middle;
text-align: left!important;
padding: 0 15%;
width: 100%;
}
.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
width: 100%;
}
.et_header_style_fullscreen div#et-info {
float: none!important;
width: 100%;
}
.et_header_style_fullscreen div#et-info span {
display: block;
margin-bottom: 30px;
}
/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
margin-top: 30px !important;
margin-bottom: 15px;
width: 100% !important;
max-width: 300px !important;
padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
width: 50px;
height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
font-size: 22px;
}
/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
text-align: right;
padding: 0 15%;
}
/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
font-size: 120px;
}
/*dark background overlay*/
.et_slide_menu_top {
background: none;
}
/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}
/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;
}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}
}
/*add background image*/
body #page-container .et_slide_in_menu_container{
background: url('http://megamenu.wpengine.com/wp-content/uploads/2017/08/bgdark.jpg') center center !important;
background-size: cover !important;
}
Haga clic en Guardar y publicar
Ahora echemos un vistazo:
Diseño de menú de cuadrícula alternativo
Para agregar un diseño de cuadrícula para su menú, agregue el siguiente CSS debajo de su código actual y dentro de los corchetes de consulta de medios:
/*add grid menu links*/
.et_header_style_fullscreen .et_mobile_menu li {
opacity: 1;
width: 46%;
float: left !important;
margin-right: 2%;
margin-bottom: 2%;
}
.et_slide_in_menu_container #mobile_menu_slide li a, .et_slide_in_menu_container #mobile_menu_slide li.current-menu-item a {
padding: 20% 0;
border: 1px solid #fff;
color: #fff;
width: 100%;
text-align: center;
}
Nota importante: es posible que deba cambiar el tamaño de fuente del menú a 30 px (o cerca de eso) para asegurarse de que los elementos del menú no se superpongan en tamaños de pantalla más pequeños. Además, este diseño no funcionará si su menú tiene elementos de submenú.
Elementos del submenú en el encabezado de pantalla completa
Tenga en cuenta que si tiene elementos del submenú, el elemento del menú principal solo funcionará como un enlace de alternancia para mostrar y ocultar los elementos del submenú. No funcionará como un enlace de menú en sí.
¿Sensible?
Esta personalización responde y funciona bien en todos los tamaños de pantalla.
El encabezado de pantalla completa se crea con dos celdas de tabla adyacentes que están alineadas verticalmente. La celda de la tabla de la izquierda contiene el menú y la celda de la derecha contiene los otros elementos del encabezado. Debido a que el contenido está alineado verticalmente y las celdas de la tabla ocuparán cada una el 50% (la mitad) del tamaño de la pantalla en todo momento, el contenido siempre se ajustará bien a cualquier tamaño de pantalla.
Si el tamaño de la pantalla es inferior a 980px (tabletas y teléfonos), el diseño Divi predeterminado se activará y mostrará el menú de forma agradable en el móvil.
Pensamientos finales
Si está pensando en agregar un encabezado a pantalla completa en su sitio, espero que este diseño sea una inspiración útil. La simetría de los elementos del encabezado y los elementos del menú equilibra las cosas y atrae más atención a la información de contacto que es importante para muchos clientes.
Tenga en cuenta que debido a que este menú es de pantalla completa, la imagen de fondo será clave. No desea una imagen que distraiga o ahogue los contenidos importantes del menú. Si no puede encontrar la imagen perfecta que le brinde la personalidad que desea, elija una imagen que simplemente se vea genial como fondo y sea coherente con su diseño. O simplemente puede usar la opción de color de fondo predeterminada.
Bueno, eso es todo lo que tengo.
Esperamos tener noticias tuyas en los comentarios.