Muy bien, así que empecemos a trabajar con elementos aprobados
al reconstruir nuestro encabezado.
Y te mostraré cómo funcionan las plantillas
con elementos son pro.
El primero que voy a hacer es que voy a ir al
backend y vamos a seguir adelante y
desactivar el constructor elemental de encabezado y pie de página.
Ya no necesitamos eso.
Entonces voy a desactivar y vamos a echar un vistazo a
la cabecera inexistente que
ya no tenemos y por supuesto, no pie de página.
Ahora todavía se puede ver
las desventuras de una pala
y luego los textos corporativos aquí,
este es el tema hola
mostrando estos alimentos son para nosotros.
Muy bien, volvamos aquí.
Y una vez que hayas instalado y activado Elementor Pro,
verás aquí mismo donde tienes
una plantilla en el elemental LM,
verás al constructor de temas.
Entonces adelante, pincha aquí.
Y en este momento se pueden ver
los diferentes tipos de plantillas que podemos construir.
Vamos a construir el encabezado.
Por lo que voy a hacer click en plus para agregar el encabezado.
Lo bueno de Elementor Pro
es que tendrás acceso a
una muy amplia variedad de plantillas que puedes usar.
Puedes verlos aquí mismo.
Diferentes estilos para el encabezado.
Puedes ver algunos, ya sabes, tendrás
el logo a la izquierda, los
iconos de las redes sociales a la derecha,
el menú principal a continuación.
Por lo que puedes simplemente insertar rápidamente cualquiera de estas plantillas
que coincidan de cerca con el tipo de diseño que quieras.
Pero voy a seguir adelante y simplemente
construirnos desde cero porque quiero
mostrarte cómo funciona esto
con el elemental por elementos.
Así que voy a cerrar esto.
Simplemente vamos a reconstruir igual que antes.
Voy a entrar aquí ahora mismo,
crear nuestras dos columnas. Sección.
Uno habrá alrededor de 30%, el otro alrededor del 70%.
Y ahora si voy por aquí al backend elemental,
y ahora mismo se puede ver tenemos
el logo del sitio aquí mismo.
Así que voy a arrastrar esa y dejarla caer dentro.
Otra cosa es que podrías notar
un cambio con el elemento elemental pro logo.
Ese es el hecho de que en realidad tienes
acceso a las alturas.
El logotipo en el estilo con
el elemento logo proporcionado por
el complemento constructor de encabezado y pie de página elemental.
No tienes estas opciones,
por lo que en realidad puedes controlar la altura
del logotipo desde aquí.
Pero aún no vamos a tocar eso.
Voy a ir al back-end otra vez,
elegir los elementos del Menú Nav aquí mismo,
suéltala aquí dentro.
Y por supuesto, Menú Principal elegirá.
Alinémonos con los grandes puntos correctos.
Vamos a poner este a móvil.
Recuerda, pasemos a dar estilo a nuestra tipografía.
Haremos esta en mayúscula.
Volvamos a la propia sesión principal
sosteniendo ambas columnas.
Hagámoslo ancho completo.
Para el logo, solo estoy adelante y agrego
un fondo negro.
Por lo que al menos temporalmente podemos ver el logotipo.
De acuerdo, tanto demasiado grande.
Volvamos aquí.
Para el max-width, solo vamos a seguir adelante y elegir 75%,
igual que lo hicimos anteriormente.
Saber, cortada para usar la altura en
este caso, un cambio más.
Vamos a alinear los elementos del menú verticales,
alinearlos al medio.
Y ahí vas.
Y por supuesto, el color también.
Me olvidé de eso.
Vamos a cambiar el color. Garrapatas ClO2 primaria.
Y eso es eso.
Ahora echa un vistazo a esto.
Aquí abajo tienes publicar.
Cuando golpeas Publicar,
aquí es donde los elementos están pool y te diré, hey,
¿dónde te gustaría mostrar esta plantilla en particular?
Vamos a sumar la condición,
no el antiácido porque
esto va a ser para la página de inicio.
Voy a entrar aquí ahora mismo y elegir singular.
Y luego para los singlets dirán,
está bien, todas las páginas individuales, no,
querían dividir específicamente en la primera página.
Entonces voy a elegir esa.
Y eso es que voy a seguir
adelante y simplemente guardaré y cerraré.
Y eso es todo.
Vamos a seguir adelante ahora y refrescarnos.
Y te voy a mostrar algo muy, muy interesante.
Muy bien, déjame hacer un refrescamiento duro.
Entonces aquí hay una línea más delgada.
Se puede ver que sí tenemos
los elementos del menú aquí mismo apareciendo.
Oh, por cierto, el efecto de desplazamiento que puede ver,
el guión aparente en
el elemento del menú de edad que proporciona Elemental pool,
menu, menu element por defecto.
puedas cambiar eso en el efecto de hover si quieres aburrir al
manager aquí en este momento
es que ya no vemos el logo.
Podemos ver los elementos del menú, pero no vemos el logo.
¿ Qué está pasando aquí?
Aquí es donde me gustaría presentarles
el concepto del índice Z.
Ahora volvamos aquí.
Muy en primer lugar, movemos
el color de fondo para el encabezado.
Ya no necesitábamos.
Pero échale un vistazo a esto.
Voy a ir a avanzado.
Aquí tienes esto.
Opción pero muy, muy importante,
muy potente llamado el z-index.
Voy a darle a éste un valor de
dos actualizaciones. Volvamos aquí.
Hagamos un refrescamiento muy duro.
Y así así.
Ahora puedes ver el logo apareciendo.
Junta Directiva.
Aguanta un segundo.
¿ Qué exactamente acaba de pasar?
Vea este valor del índice Z aquí mismo.
Siempre que tengas un elemento,
una sección superpuesta a otra sección,
es posible que quieras poder decirle a Elemental
cuál de esos elementos quieres
mostrar primero básicamente, que no lo hará.
¿ Quieres traer delante del otro?
En este caso, en este momento sí tenemos
la imagen binaria superpuesta a nuestro encabezado.
Queremos que el encabezado esté influenciado para que podamos
ver el logo y el menú principal.
Como tal, tendrás que dar
un número de índice z más alto
al elemento que quieres aparecer al frente.
Desde que le hemos dado al encabezado el valor del índice Z de dos.
Permítanme realmente ir a la sección sosteniendo nuestro plátano.
Así que déjame editar con elemental.
Vamos a la sección de navegantes aquí mismo, avanzado.
Se puede ver aquí mismo que no tenemos ningún valor para
el índice Z para la sección que sostiene el banner.
Pero si entré aquí ahora mismo
y le doy un valor de tres.
Ahora ya puedes ver ya no vemos el logo,
ya no vemos el menú principal tampoco.
Eso se debe a que el valor del índice xin
de esta sección que sostiene
el plátano es ahora mayor que dos.
Pero si le doy uno ahora se puede ver tenemos
el menú principal y el logo.
Así es exactamente como funciona el índice Z.
Ahora, una pregunta que podrías tener una,
una muy buena pregunta es,
Alex, aguanta un segundo.
Antes le dimos el valor de
este índice de dos al encabezado.
¿ Cómo podemos resolver aún el menú principal?
Pero no vimos el logo.
Seré 100% honesto contigo.
No estoy exactamente seguro de por qué sucedió eso.
Estoy adivinando que tal vez haya algún código
dentro de los elementos que siempre da
prioridad al menú principal para mostrar siempre.
Nuevamente, podría ser algo muy,
muy simple que simplemente me estoy perdiendo.
No estoy del todo seguro en el borde.
Discúlpate por eso, pero me gustaría ser honesto contigo.
Pero solo tómalo por lo que es.
Siempre que quieras introducir tipo de situación
que tienes un elemento superpuesto al
otro y quieres que
los elementos autos detrás del show al frente
simplemente le den un valor de índice Z más alto.
Una cosa que puede haber notado es
el repentino espacio en blanco que
no aparece aquí mismo en la parte superior.
Y esto sucede porque
elemental por defecto en muchas instancias,
agregaremos un patrón de diez píxeles alrededor de los elementos.
Así que una forma de eludir este tipo de tema,
es un simplemente editar
la sección que tiene
el espacio en blanco en este caso ahora mismo es mi encabezado.
Entonces déjame seguir adelante y editar el encabezado elemental.
Voy a ir a esta sección en sí.
Así edita sección y luego
invita aquí donde tengas la brecha de columnas.
Voy a decir que no hay brecha,
ni brecha en absoluto.
Actualicemos básicamente diciendo que no hay brecha.
Estamos diciendo, Hey, no queremos ningún patrón en ninguna parte.
Ahora, esto se leerá fuera del espacio en blanco.
Pero ahora tenga en cuenta que porque hemos dicho No, no hay vacíos en absoluto.
Ahora la columna que sostiene un logotipo ya no tiene
ningún patrón entre el logotipo y la parte superior de nuestra pantalla.
Por lo que muy sencillamente sólo tiene que ir a la columna sosteniendo el logotipo.
Ir al patrón avanzado aquí mismo,
solo le damos digamos, diez píxeles de relleno en la parte superior.
Actualizaciones que resolverán el tema o incidencias.
Por lo que estos son algunos de los muy poco
molestos problemas que podrías
encontrar al usar elemental y cómo eludirlos.
Pero casi hecho.
Vamos a seguir adelante y crear el encabezado móvil para
nuestro encabezado para la portada más bien.
Y es exactamente lo mismo que hicimos anteriormente.
Vamos a entrar aquí ahora mismo,
duplicar toda la sección.
Y salgamos, ven aquí abajo a
la sección de edición de cabecera móvil.
Vamos a ir a estilo clásico color de negro.
Y entonces, ¿qué necesitamos? ¿ Qué más tenemos que hacer?
Tenemos que cambiar al modo de respuesta.
Ir al móvil.
Y ahora mismo,
edita columna, vamos a decir 50%.
Haz lo mismo por la columna sosteniendo el menú principal.
Y luego decir 50%.
Podemos editar el menú aquí mismo,
alineado a la derecha.
Tal vez hacerlo un poco más grande.
Así que vamos a ir al estilo.
Ven aquí al botón de alternar.
El tamaño, lo hacen un poco grande.
Para el logotipo también.
Ir al estilo, anchura máxima, 100%.
Sí, también tenemos que hacer el show
hide u opciones, tan avanzado.
Vamos a la receptivo.
Para esta sección y esta sección sosteniendo
el logo y menú de demanda.
Vamos a entrar aquí a
Advanced y luego respondemos.
Voy a decir esconderse en cubierta, Detener,
Ocultar en tableta, pero luego mostrar en móvil.
Vayamos ahora al antiguo encabezado original,
edita esta sección.
Ir a Avanzado, vaya a responsive.
Simplemente esconderte en el móvil, y eso es todo.
Así que sigamos adelante y actualicemos.
Ojalá no olvidé
nada que haya vuelto aquí.
Refresca la página.
Veamos lo que tenemos.
De acuerdo, por delante tan original o me atrevo.
Y esta es vista oblicua que se ve bien.
Y entonces ahora esta va a ser la vista móvil.
Y David es así exactamente cómo hacer
exactamente lo mismo en el producto Elementor que
hicimos con el encabezado y pie de página de Elementor son plugin.
Una cosa final antes de cerrar este video,
vamos al back-end.
Ahora en las plantillas.
Lo siento, bajo el constructor de temas
lugar de nuestras plantillas en un constructor de temas,
aquí es donde verás el nuevo encabezado que has creado.
Puede hacer clic en el interior para editar.
Una vez más.
Entonces si quieres cambiar el nombre,
es muy, muy simple.
Vienes aquí al botón Ajustes
y luego aquí mismo,
podemos llamar a éste el encabezado de casa.
Podemos llamarlo hogar, hogar,
la cabecera domiciliaria básicamente.
Y luego podemos darle al encabezado de orden el nombre de global.
Si quieres cambiar las condiciones para este plano,
la cabeza o tal vez quieras usar
el mismo encabezado en una página diferente.
Aquí abajo, tienes las opciones de guardar, haces clic ahí.
Ahora aquí tendrás acceso a la pantalla.
Nuestra opción de condiciones.
Aquí es donde ahora puedes entrar,
ahora tal vez cambiar a una página diferente y así sucesivamente.
Y eso es básicamente para
crear el encabezado de la página de inicio,
tanto en las versiones de escritorio como en móviles
usando Elementor Pro.
Gracias por mirar.
Te veré en la próxima clase.