En la publicación de Divi de hoy , vamos a compartir un consejo rápido que lo ayudará a mejorar los diseños de sus dispositivos móviles. Todos sabemos que tu diseño en el móvil es tan importante como en el escritorio, pero debido a algunas configuraciones estándar dentro de Divi, no todos los cambios que hagas en el Personalizador de temas se ven igual en el escritorio que en el móvil .
Lo que vamos a hacer en esta publicación, específicamente, es mostrarle cómo crear una barra de menú móvil más pequeña que se vea igual que la barra de menú en el escritorio cuando se usa la altura máxima del logotipo y la altura mínima del menú. De forma predeterminada, las perspectivas en dispositivos móviles y de escritorio difieren. El hecho de que haya establecido una cierta altura de menú y una altura máxima de logotipo, no significa que se aplicará lo mismo a los dispositivos móviles.
Hay muchos sitios web que eligen deliberadamente tener una barra de menú principal con poca altura. Simplemente se ve más elegante y ocupa menos espacio, algo que definitivamente es interesante considerar si también está utilizando navegación fija.
Cuando elija el valor más alto para la altura máxima del logotipo (que es 100) dentro de su personalizador de temas y el valor más bajo para la altura del menú (que es 30), tendrá el siguiente resultado en el escritorio:
Sin embargo, las proporciones del logotipo y la altura del menú son diferentes para dispositivos móviles. Si ha seleccionado el valor más alto para Logo Max Height y el valor más bajo para Menu Height, no obtendrá el mismo resultado que tiene en el escritorio. El resultado que obtendrá, en cambio, se verá así:
Resultado
Ahora, lo que vamos a hacer es mostrarle cómo hacer que el mismo diseño se aplique a la barra de menú de su dispositivo móvil. Eso significa que el logo tendrá su altura máxima en el menú. Además de eso, la barra de menú en sí será mucho más pequeña. Eventualmente, le quedará más espacio en la pantalla para que aparezca el contenido de su página.
Después de haber seguido este tutorial paso a paso, obtendrás el siguiente resultado:
Que obviamente se parece más a la versión de escritorio:
Suscríbete a nuestro canal de Youtube
Lo primero que vamos a hacer es realizar los cambios necesarios en la barra de menú principal dentro del personalizador de temas. Si está en su panel de WordPress, vaya a Apariencia > Personalizar > Encabezado y navegación > Barra de menú principal y asegúrese de que se apliquen las siguientes configuraciones:
- Ocultar imagen del logotipo: Deshabilitar
- Altura del menú: 30
- Altura máxima del logotipo: 100
Lo siguiente que debemos hacer es agregar un código CSS adicional para que la barra de menú móvil se vea de la misma manera que la barra de menú en el escritorio. Podemos elegir agregar el código CSS a una página en particular (si solo queremos mostrar el menú de esa manera solo en ciertas páginas) o a todo el sitio web. Por lo general, aplicará el código CSS a todo el sitio web para mantener la consistencia necesaria en su sitio web, pero eso depende de usted.
Agregar código CSS a una página en particular
Para agregar el código CSS a una página en particular, deberá abrir la página dentro de su panel de control de WordPress. Mientras usa el constructor Divi, deberá hacer clic en el siguiente ícono dentro de él:
A continuación, puede tomar las siguientes líneas de código CSS y colocarlas en el campo CSS personalizado:
|
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
|
@media (max-width: 980px) {#page-container {padding-top: 43px !important;} }@media (max-width: 980px) {#logo {max-width: 100% !important;max-height: 90% !important;}}@media (max-width: 980px) {#mainheader {top: 4% !important;}}@media (max-width: 980px) {#et-top-navigation{padding-top: 5px !important;}}.et_header_style_split .mobile_menu_bar,.et_header_style_left .mobile_menu_bar {padding-bottom: 5px;} |
Agregar código CSS a todo el sitio web
La otra posibilidad, y probablemente la que más se usará, es agregar el código a todo su sitio web. Hay dos maneras de hacerlo.
A través del personalizador de temas
El primer método es agregar el código CSS a su personalizador de temas. Para hacerlo, ve a tu Panel de WordPress > Apariencia > Personalizar > CSS adicional > Coloca las siguientes líneas de código CSS en el campo CSS personalizado:
|
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
|
@media (max-width: 980px) {#page-container {padding-top: 43px !important;} }@media (max-width: 980px) {#logo {max-width: 100% !important;max-height: 90% !important;}}@media (max-width: 980px) {#mainheader {top: 4% !important;}}@media (max-width: 980px) {#et-top-navigation{padding-top: 5px !important;}}.et_header_style_split .mobile_menu_bar,.et_header_style_left .mobile_menu_bar {padding-bottom: 5px;} |
Esta opción le permite ver los cambios que ocurren en tiempo real. Esta es probablemente la opción más interesante si vas a cambiar algunas cosas en el código y quieres ver cómo se ve antes de guardar los cambios.
A través de las opciones del tema
El segundo método es agregar el código CSS a las Opciones de tema. Para hacerlo, ve a tu Panel de WordPress > Divi > Opciones de tema > Desplázate hacia abajo en la pestaña General y coloca el siguiente código CSS en el campo CSS personalizado:
|
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
|
@media (max-width: 980px) {#page-container {padding-top: 43px !important;} }@media (max-width: 980px) {#logo {max-width: 100% !important;max-height: 90% !important;}}@media (max-width: 980px) {#mainheader {top: 4% !important;}}@media (max-width: 980px) {#et-top-navigation{padding-top: 5px !important;}}.et_header_style_split .mobile_menu_bar,.et_header_style_left .mobile_menu_bar {padding-bottom: 5px;} |
Modifique el código a sus propias preferencias
Por supuesto, esta no es la única forma en que puede hacer que se vea la barra de menú móvil. Si está aplicando configuraciones diferentes a su barra de menú principal en el personalizador de temas, es muy probable que también deba realizar los cambios en el código CSS. Sin embargo, las clases de CSS y los ID de CSS que utilizará son los mismos.
Sin embargo, una de las cosas que definitivamente tendrá que tener en cuenta es el relleno superior del contenedor de la página. El valor que asignamos en nuestro código CSS coincide con los otros cambios que hemos realizado. Sin embargo, si cambia los valores en las otras clases, deberá asegurarse de que el relleno superior permanezca correcto. La forma más fácil de hacerlo es comenzar con un valor más alto y modificar el valor hasta que vea que el contenedor de la página se acomoda en su lugar.
Resultado
Si ha seguido este tutorial paso a paso, debería haber podido lograr el siguiente resultado para la barra de menú de su dispositivo móvil:
Que se ve casi exactamente igual que el resultado que obtienes en las computadoras de escritorio:
Antes de realizar cualquier cambio de CSS, el resultado en Mobile se ve así:
Pensamientos finales
En esta publicación, le mostramos cómo hacer que la barra de menú de su dispositivo móvil sea más pequeña y se ajuste a la barra de menú de las computadoras de escritorio. Simplemente puede agregar el código CSS necesario a una página en particular o a todo el sitio web para que este método funcione. Si tiene alguna pregunta o sugerencia; ¡Asegúrate de dejar un comentario en la sección de comentarios a continuación!
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!