Diseñar el menú de pantalla completa de Divi

Divi y su menú de pantalla completa presentan 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 ocupa toda la pantalla cuando está activo. Esto deja espacio para un diseño creativo para el menú y los elementos del 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é algunos CSS personalizados.

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:

Diseñar el 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 tu panel de WordPress, ve a Divi > Personalizador de temas > Encabezado y navegación > Formato de encabezado. A continuación, seleccione Pantalla completa como estilo de encabezado.

Una vez que se establece el estilo de encabezado de pantalla completa, vuelva a Encabezado y navegación. Ahora verá un nuevo conjunto de opciones llamado «Configuración de encabezado deslizante y pantalla completa».

Actualice la configuración de encabezado de diapositivas y pantalla completa de la siguiente manera:

Verifique Mostrar

menú de opciones de la barra superior Tamaño del texto: 46px


Tamaño del texto de la barra superior: 24px


Fuente: Pantalla de Playfair


Estilo de fuente: Negrita (B)


Color del enlace del menú: #ffffff


Color del enlace activo: #edef86


Color del texto de la barra superior: #ffffff

Ahora regrese a la configuración de Encabezado y navegación y haga clic en Elementos de encabezado. En Elementos de encabezado, actualice lo siguiente:

Seleccione Mostrar íconos sociales

Seleccione Mostrar ícono 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, así es como debería verse el diseño predeterminado:

Ahora agreguemos algo de CSS personalizado.

Agregar CSS personalizado

Agregar CSS personalizado en Divi se puede hacer en algunos lugares. Como 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 externo style.css en su tema secundario , hágalo.

Para aquellos de ustedes que no tienen mucho tiempo, pueden saltar a la versión completa del código CSS que pueden copiar y pegar en su sección de 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 apunte a tamaños de pantalla con un ancho mínimo de 980 px. Agregue lo siguiente en la sección CSS adicional:

01
02
03
@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.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/*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:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
/*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:

01
02
03
04
05
/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
    text-align: right;
    padding: 0 15%;
}

Luego hagamos que el ícono del menú de cierre en la esquina superior derecha sea más grande y más fácil de hacer clic:

01
02
03
04
/*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.

01
02
03
04
05
06
07
08
09
/*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:

01
02
03
04
05
06
07
08
/*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, agregaré este CSS fuera de los corchetes de consulta de medios para que el fondo no se oculte en tamaños de pantalla con un ancho inferior a 980 px.

01
02
03
04
05
/*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 has terminado!

Aquí hay una versión completa del código CSS que debería haber agregado a su CSS adicional (excepto la URL de la imagen que debe proporcionar):

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
@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 vamos a comprobarlo:

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:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
/*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 de su 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 de 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í mismo.

¿Sensible?

Esta personalización responde y funciona bien en todos los tamaños de pantalla.

El encabezado de pantalla completa está construido 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 demás elementos del encabezado. Debido a que el contenido está alineado verticalmente y cada una de las celdas de la tabla ocupará 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 980 px (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 de pantalla completa en su sitio, espero que este diseño le sirva de inspiración. La simetría de los elementos del encabezado y los elementos del menú equilibra las cosas y llama más la atención sobre 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 brinde la personalidad que desea, busque una imagen que simplemente se vea genial como fondo y sea consistente con su diseño. O simplemente puede usar la opción de color de fondo predeterminado.

Bueno, eso es todo lo que tengo.

Esperando saber de usted en los comentarios.