Bienvenido a la segunda parte de rediseñar el encabezado responsive.
Y olvidé mencionar en un video anterior
cuando cambié los signos de los elementos del menú aquí,
por alguna razón parece haber
afectado la versión de escritorio.
Se puede ver en este momento que
los textos y ya no en mayúsculas,
si algo como esto sucede,
sólo tiene que volver a editar el encabezado de la página de inicio.
Lo que quieres hacer es simplemente ir
al elemento menu.
Por lo que voy a hacer click en muchos elementos aquí mismo.
Vaya a Estilo, vaya a la tipografía aquí mismo,
y simplemente haga clic en ella.
Eso es todo lo que puedes ver aquí mismo.
Dice Transform a mayúsculas.
Así que básicamente estamos reafirmando que,
Hey, sí queremos que el Vamos a ser mayúsculas.
Así que voy a seguir adelante las actualizaciones
nuevo y vamos a volver atrás, ver la página.
Vamos a la página de inicio.
Ok. Y ahí vas.
Entonces honestamente, no estoy muy seguro por qué pasa eso,
pero por si acaso te sucede ,
simplemente haz lo que acabo de hacer. Ok.
Ahora, anteriormente pudimos conseguir que
la vista de la tableta se vea así,
lo cual no está mal en absoluto.
Pero ahora es el momento de que echemos un vistazo
a la vista móvil.
Y se puede ver ahora mismo se ve realmente,
realmente malo es un montón de espacios
y el logo y el menú,
el menú de hamburguesas en línea,
pero sí necesitamos arreglar el espacio en blanco.
Ahora en realidad esta es la segunda vez que estoy
grabando este video en particular
porque en el anterior,
realidad pude arreglar
el encabezado móvil para tener exactamente el mismo tipo de
estilo allí
la pancarta mezclándose en el fondo.
No obstante, he decidido ir con una ruta diferente y
en su lugar utilizar el mismo tipo
de encabezado que tenemos para el resto de las páginas,
como la de aquí donde tienes el fondo negro,
decidí usar estas encabezado para
la página de inicio salir en vista móvil.
El motivo por el que es porque en realidad quería
aprovechar esta oportunidad para mostrarte
un truco muy cool que puedes
usar siempre que estés trabajando con diseño responsive.
Volvamos a la página de inicio.
Y quiero mostrarte algo, ¿verdad?
Voy a ir a Editar con
Elementor editando el encabezado de la página de inicio.
Aquí está la cosa. De acuerdo, voy a seguir adelante
y duplicar esta sección de encabezado.
Voy a hacer clic derecho aquí. Duplicados.
Básicamente ahora tenemos dos encabezados.
La diferencia es que voy a entrar aquí,
ir a esta sección Editar.
Voy a ir al estilo,
tipo de fondo, darle un color de negro.
Vale, ahora, mira esto.
Voy a ir a Advanced,
bajar aquí a Responsive,
y luego invitar aquí tienes opciones de visibilidad.
Cuándo exactamente te gustaría mostrar
esta sección en función de un tamaño de pantalla?
Voy a esconderlo en el escritorio.
Sí.
No queremos rodarla en el escritorio
todavía porque seguimos usando
encabezado de la página de inicio en la tableta.
También queremos esconderlo hasta eso.
Pero entonces queremos mostrarlo
cuando llegue a la vista móvil.
Como tal, ahora voy a ir a
nuestro encabezado original y hacer lo contrario.
Ir a avanzado, Calma hetero sensible,
y luego esconderse en el escritorio.
Nadie quiere mostrar,
queremos mostrar hasta eso.
Pero cuando vaya a Hide on Mobile,
déjame seguir adelante y ahora actualizaciones.
Y echa un vistazo a esto.
Vamos a seguir adelante ahora, ver la página.
Vamos a la página de inicio.
Vale, para que veas que aún tenemos el mismo encabezado.
Pero ahora para la vista de la tableta,
se puede ver que todavía tenemos el mismo encabezado,
el mismo encabezado en el mismo encabezado.
Ahora, una vez que llega a la vista móvil,
ahora tenemos el fondo negro con
la idea de logotipo del centro y
luego el menú de hamburguesas ahí abajo.
Y luego tenemos el banner de la página de inicio.
Y ahí vas.
Por lo que este es un truco que puedes
usar siempre que estés trabajando con diseño responsive.
Puede optar por mostrar
una sección en particular en específicamente en el escritorio.
Y puedes optar por mostrar sección particular
específicamente solo tal vez en tablet o en móvil.
Una pregunta que podría tener aún está bien, ¿
por qué no simplemente duplicé
este encabezado en particular y luego simplemente uso
ese encabezado en la página de inicio
y luego simplemente lo escondo
en el escritorio y tableta y luego se muestra en el móvil.
Puedes tener dos cabezales
se muestran en cualquier página con elemental,
al menos así es como funciona este plug-in.
De acuerdo, Así que si estás pensando,
simplemente voy a duplicar este encabezado
y mostrar dos encabezados en la misma página,
esconderlo uno en escritorios o no quieren un móvil,
no va a funcionar porque en realidad lo intentó.
Por eso tuve que ir al encabezado de la página de inicio.
Y luego en ese mismo encabezado,
crea una segunda sección que ahora se
mostrará específicamente en la vista móvil.
Pero no hemos terminado.
En realidad quiero hacer otra cosa.
Mira, no siempre tienes que ir con este tomate.
Tienes el logotipo y el centro en la parte superior,
y luego el menú de hamburguesas o debajo de él.
Todavía podemos usar dos columnas aquí.
Cómo iniciar sesión a la izquierda y tener el menú en la luz.
Hagamos eso.
Voy a volver editar con Elementor,
el encabezado de la página de inicio y
paletas con para que esta página se cargue, bien, algo de edición.
El segundo encabezado en este momento.
Pero ahora voy a cambiar al modo de respuesta.
Vamos a la vista móvil.
Todo Kn tiene exactamente lo que tenemos. Aquí mismo.
Voy a hacer esto.
Voy a hacer clic en la columna que
sostiene el logotipo. Aquí mismo.
Voy a decir 50.
Entonces bajaré aquí a
la columna del logo sosteniendo el logotipo,
lo siento, todo en el menú tampoco.
Y luego cambiar el uno a 50 también
para que estén de lado a lado.
Ahora, hagamos algunos cambios.
Voy a hacer click en el menú Editar,
icono, bajar, golpea diseño.
Tratemos de alinearnos con el blanco.
Y entonces vamos a hacerlo grande.
Pasemos al estilo.
Aquí abajo tendrás
el gatillo de menú y cerrar el icono click en el interior.
Y ahora Icon Size, voy a hacer
este por encima de 40 pixeles.
Keda debería ser lo suficientemente grande.
Y luego para el logotipo,
vamos a editar también el logotipo.
El tamaño de la imagen se establece en completo,
alineado a la izquierda.
Vayamos al estilo max con un 100%.
De acuerdo, sigamos adelante ahora.
Actualizaciones. En realidad antes de que lo hagamos, aguantemos.
Hagamos también esto.
Al hacer clic en el menú de hamburguesas.
Este va a ser el trabajo hecho.
Pero ya se puede ver que podemos ver el texto.
El texto es todo blanco,
por lo que necesitamos hacer algunos cambios aquí.
Esto es exactamente lo que voy a hacer.
Voy a ir a caer
en el menú desplegable de letreros aquí mismo.
Y luego color de fondo.
Vamos a ir con negro,
color de texto, vamos a ir con el blanco.
Y eso debería ser eso.
No sé por qué no lo vemos aquí todavía, pero está bien.
Voy a seguir adelante las actualizaciones.
Volvamos, veamos la página.
Vuelve a la página de inicio, minimice la ventana.
Muy bien, así que ahora puedes decir, Ok,
tenemos el logo a la izquierda,
el menú en blanco.
Ahora si hacemos clic en el menú de aquí mismo, se abre.
Bobby aún no puede ver el texto que le interesa.
De acuerdo, volvamos a ver qué pudo haber pasado.
Y esto va a estar muy interesado.
No estoy muy seguro por qué no vemos los textos.
Muy bien. No se preocupe.
Voy a entrar aquí al modo de respuesta,
cambiar de nuevo a Móvil.
Haga clic en el menú aquí mismo,
haga clic en el menú desplegable.
¿ Por qué no vemos el texto?
Vayamos al estilo.
Vamos a bajar aquí a la tipografía y wow,
no estoy del todo seguro por qué el tamaño aquí
en vez a uno, pero no debería ser uno.
Debería ser un poco más grande que uno.
Eso es un probablemente fallas en píxeles.
Entonces mis disculpas, voy a
contar tema por qué me un píxel,
a veces siento elemento está tratando
de evitar que haga buenos videos.
Yo, honestamente no sé por qué.
Dijo que no lo hará pixel.
Eso es sólo, eso es simplemente extraño.
De todos modos, se puede ver que al menos
los elementos del menú ahora están mostrando,
Wow, eso es muy, muy interesado en,
te estoy diciendo que el diseño web puede ser unas ocupaciones muy
extrañas, muy extrañas.
A veces te sientes, sientes que
todos estos elementos tienen en mente
que no van a volver.
Muy bien, así que ahora hago clic aquí.
Ahí va.
Ahora ya puedes ver que tengo los elementos del menú
y por supuesto ya puedes cerrar.
Entonces eso es básicamente todo
para rediseñar el encabezado sensible.
En realidad voy a seguir adelante y hacer
exactamente lo mismo para
el encabezado global para la vista móvil,
donde voy a hacer la primera columna 50% y luego hacer
la segunda columna sosteniendo el ítem de menú son el 50% también.
Y también hacer que el icono de la hamburguesa del menú
sea un poco más grande.
Para que puedas seguir adelante y hacer eso también.
Pero eso es todo por crear los
responsivos o encabezados para el sitio web.
Gracias por ver evento alemán
próximo video donde ahora echaremos un vistazo a
rediseñar el pie de página para
ser un poco más responsables. Entonces tú entonces.