Muy bien, ahora vamos a seguir adelante y
construir el encabezado para nuestra página web.
Y esto es exactamente lo que se ve ahora mismo,
y no se ve bien en absoluto.
Esto es lo que estamos tratando de lograr.
Se puede ver el encabezado aquí mismo tenemos
el logo a la izquierda,
y luego tenemos el menú principal a la derecha.
No obstante,
mostrarte algo como si fuera a ir a otra página,
digamos que la página Acerca de como ejemplo,
aquí mismo puedes ver que el encabezado es diferente.
Este tiene un fondo negro,
mientras que el encabezado de la página
de inicio no tiene ningún fondo en absoluto,
simplemente se mezcla en la imagen de fondo aquí,
básicamente, necesitamos crear 82 cabeceras diferentes.
Una específicamente para la página principal y luego la
otra para el resto de nuestras páginas.
Ahora, ¿cómo hacemos esto?
Antes de que te muestro eso,
déjame simplemente arrastrar el sitio web demo.
Ahora antes de que te muestro cómo hacer eso,
quiero mostrarte algo más.
Si iba a ir a Editar con Elementor,
fui a la configuración del sitio.
Además de poder configurar
tus teléfonos globales y tus colores y todo eso,
también puedes hacer cambios
la identidad del sitio aquí mismo tenemos Ajustes.
Si hago clic en dentro de la densidad aquí mismo,
podemos cambiar el nombre del sitio también.
Voy a llamar a mi pasaporte de viaje.
Ese es el nombre del sitio web.
Y entonces el eslabón será cuando el viaje se encuentre con aventura.
Para el logotipo, voy a elegir el logo aquí mismo.
Insertemos esa.
Y luego para la Phi del ícono,
voy a elegir la imagen de TI con la que tiene
el fondo verde.
Voy a insertar eso.
Y ahí vas, tenemos nuestra identidad de sitio.
Ahora también podrías bajar aquí para encabezar
y hacer diferentes tipos
de cambios puedes elegir para ocultar el logo, mostrar el
eslabón, aumentar
el ancho del contenido o reducir
el ancho del contenido todo depende de ti.
Pero como vamos a crear nuestros propios encabezados personalizados,
no necesitamos cambiar nada aquí en absoluto.
Entonces voy a seguir adelante ahora y simplemente
actualizar. Y luego revisaré esto.
De acuerdo, voy a volver al backend Salir a Dashboard.
Y ahora vamos a crear nuestro encabezado.
Voy a venir aquí con nuestros padres.
Aquí verá elementos o alimentos frontales son constructor.
Esto es del plugin. Voy a hacer click ahí.
Y ahora voy a hacer click en Añadir nuevo.
Y ahora llamemos a éste el encabezado de la página de inicio.
Entonces justo aquí donde tienes tipo de plantilla.
Vamos a elegir cabecera,
y luego podemos elegir, vale,
¿dónde nos gustaría mostrar este encabezado?
Ya que específicamente va a ser para la portada,
voy a elegir aquí abajo tienes objetivos específicos.
Voy a elegir páginas específicas e
invitar aquí son simplemente teclear en casa.
Y ahí vas.
Ahora en este encabezado en particular
solo se mostrará en la página de inicio.
Y luego para los roles de usuario aquí mismo puedes elegir, está bien,
tal vez quieras mostrar estos encabezado solo para que
los usuarios conectados estén desconectados usuarios
o ediciones o tienes mucha flexibilidad.
Sólo voy a mantener esto en blanco porque queríamos
ser para todos.
Ahora aquí, tienes
esta opción habilitada layout para nosotros plantilla.
Ahora lo que pasa con Elementor es que además
la plantilla predeterminada y una proporcionada por tu tema,
elementos, que te da dos plantillas personalizadas.
Uno se llama el Elemental Canvas Data, de ancho completo,
de ancho completo más simple significa que
tu contenido puede extenderse a los bordes de tu pantalla.
Así que básicamente va ancho completo que
soy como no hay márgenes son patrones.
Elemental Canada como implementos que no vas
a tener ningún encabezado o pie de página.
Es básicamente un elemento en blanco o nuestras plantillas,
no vamos a caminar con una plantilla de lienzo.
Por lo que realmente no hay necesidad de habilitar este diseño,
pero voy a elegir los elementos
de plantilla de ancho completo.
Vamos a seguir adelante ahora y golpear Publish.
Ahora voy a dar click en editar con Elementor.
Entonces lo que estamos tratando de lograr aquí es esto,
déjame traer de vuelta el sitio de demostración.
Básicamente va a ser una sección con dos columnas.
El de la izquierda, la columna de la izquierda tendremos el logo,
mientras que la columna de la derecha,
tendremos el menú principal y también queremos
la columna de la luz
que contiene el menú principal tenga más ancho .
Así que echa un vistazo a esto.
Vale, aquí mismo, voy
a hacer clic en el botón Plus aquí.
Y ahora podemos elegir nuestra estructura.
Y voy a elegir esta división aquí.
Esta tendrá,
la primera columna tendrá un tercio de toda la sección,
mientras que la segunda columna tendrá dos tercios.
Entonces aquí mismo, ya que estamos editando la sección,
como se puede ver, para el ancho del contenido,
en realidad podríamos ir ancho completo si quisieras.
Pero voy a ir con caja y voy a
elegir 1240 pixeles.
Esta es sólo mi propia preferencia personal.
Me encantaron 1240 pixeles.
Ahora, aquí por la primera columna,
voy a hacer click en el interior.
Voy a desplazarse hasta aquí abajo.
Y estamos tratando de agregar el logo.
Por lo que voy a añadir el logo del sitio.
Haga clic, suéltalo dentro.
Y ahora tenemos nuestro logo.
Ahora puedes ver porque el logo tiene
texto blanco y este es un fondo blanco.
Pero solo aguanta conmigo.
De acuerdo, voy a elegir.
El tamaño de la imagen aquí voy a ir con lleno por ahora.
Entonces vamos a seguir adelante y
clic en el botón Editar para esta sección.
Muy bien, así que he hecho clic ahí.
Voy a volver al estilo.
Y luego se fue a donde has comenzado tipo.
Voy a elegir clásico.
Ahora voy a elegir el color negro.
Entonces ahora en realidad se puede ver el logotipo, ¿verdad? Ok.
Ahora pasemos a la segunda columna.
Vamos a sumar nuestros elementos de navegación.
Entonces escribiendo contra el menú de navegación,
haga clic arrastrar, droga que dentro.
Y luego se puede ver el menú principal está seleccionado por defecto.
No obstante, cuando se trata de hacer bastantes cambios,
observe aquí mismo que quedará con el menú principal.
El texto está en mayúsculas, está en blanco.
También está alineado a la derecha y también en el centro.
Entonces tenemos que hacer por delgadas.
Volvamos aquí. Lo primero que voy a hacer
es mientras editas el menú de navegación aquí mismo,
tienes maquetación haciendo clic ahí.
Y ahora vamos a elegir alinear a la derecha.
Como se puede ver en este momento está a la derecha.
Ahora vamos a pasar al estilo.
Y vamos a bajar aquí a la tipografía.
Haga clic en el botón Editar.
Com transformada no peluda, elige mayúscula.
¿ De acuerdo?
Y luego para el color del texto,
vamos a hacer clic en el icono global ahí mismo
y luego elegir principalmente para Blanco.
Bueno.
Pero ahora, ¿cómo alineamos
los elementos del menú en el medio verticalmente?
Lo que quieres hacer aquí es que vas a hacer click en
la potencia Editar columna aquí,
este botón en particular aquí mismo, haces clic ahí.
Y ahora aquí se puede ver tenemos Alinear Vertical.
Vamos a elegir medio.
Ahí vas.
Eso es todo.
Pero aún no hemos terminado.
Para el logotipo.
Demos clic en el botón Editar para el logotipo del sitio.
Y luego la alineación aquí,
vamos a ir a la izquierda.
Al igual que en realidad no puedes ver la diferencia todavía,
pero solo aguanta conmigo.
Vamos a elegir ese a la izquierda.
De acuerdo, sigamos adelante ahora y actualizaciones.
Ahora solo echemos un vistazo a lo que tenemos.
Ver la página.
Y ahí vas.
Ahora puedes ver
nuestra página de inicio tiene este encabezado en particular aquí mismo,
pero luego evoluciona para ir a,
digamos que la página Acerca de como ejemplo,
puedes ver que no tenemos ese encabezado en absoluto.
Si quiere ir a la página de contacto.
A modo de ejemplo, se puede ver que no tenemos ese encabezado.
Entonces esto de aquí mismo,
la página de inicio ahora tiene
este folleto particular con el fondo negro,
el logotipo, y luego los elementos del menú.
Ahora para redondear esto, en realidad voy a
hacer algunos cambios.
Volvamos a la sección.
De acuerdo, y sé que dije que
el ancho del contenido es de 1240 píxeles,
pero he hecho algunas pruebas más en,
y creo que es mejor que vayamos con el ancho completo.
Así que vamos con ancho completo por ahora.
Entonces esta columna, la que sostiene el logotipo,
vamos a reducirlo a 2525% por ciento.
En tanto que la columna que sostiene los ítems manuales tendrá 75%.
Entonces hagamos también un cambio en el logotipo.
Voy a hacer clic en Editar logo.
Vámonos al estilo.
Y luego para el max-width,
vamos a fijar esto en 75%.
Y una pregunta que podrías tener es
por qué obviamente el max-width y no el ancho real.
Aquí está la cosa.
Cuando establezcas el ancho para el logotipo,
el logotipo siempre tendrá ese ancho.
Nosotros impío, del tamaño de la pantalla.
Estás trabajando con max-width.
Básicamente estás diciendo, Hey,
el logotipo nunca debe exceder este ancho.
Entonces en situaciones donde el tamaño de la pantalla no es
lo suficientemente grande documentado el ancho completo del logotipo
reducir el tamaño del
ancho básicamente máximo es mucho mejor para el diseño receptivo.
Y siempre quieres ser receptivos.
Entonces vamos a establecer eso a 75 pixeles.
Y ahora si actualizamos,
si echamos un vistazo a nuestro encabezado,
se puede ver ahora mismo que se parece
tanto a lo que tenemos
están por aquí en la página web demo.
Lo último que hay que hacer es que vamos a
duplicar este encabezado para el segundo encabezado.
Así que básicamente tiene lo que vamos a hacer.
De acuerdo, bueno voy a volver al backend.
En lugar de crear el segundo encabezado
para el resto del sitio web,
simplemente vamos a entrar aquí y luego verás
duplicados de EA o esos
son los átomos esenciales duplicados todos.
Voy a seguir adelante ahora y simplemente
duplicar el encabezado de la página de inicio.
Ahora verá borradores Elementor.
Vamos a seguir adelante y haré click en Editar.
Y luego veremos algunos cambios aquí.
Llamaremos a éste el encabezado global.
Puedes darle cualquier otro nombre que quieras,
pero voy a llamar a este encabezado global.
Y luego aquí mismo,
pep de plantillas, sí, es el encabezado.
Entonces la pantalla encendida.
Vamos a ir con toda la página web.
Pero luego para estar del lado seguro,
voy a entrar aquí y decir agregar regla de exclusión.
Estamos diciendo, Hey, no muestres éste
en la página de inicio de aquí abajo.
Tiene página específica.
Voy a entrar aquí y simplemente escribir en casa, asegurándome
de que este encabezado nunca se
muestre en la página de inicio.
Sólo se mostrará en todo el sitio web.
Y ahí vas.
Así plantilla de ancho completo también.
Vamos a seguir adelante ahora y golpear Publish.
Y ahí vas.
Así que sólo para volver aquí,
vamos a refrescar esta página.
Entonces ese es el encabezado de la página de inicio.
Pero ahora echa un vistazo a esto.
Vale, si iba a ir a cualquier otra página,
digamos la página Acerca de como ejemplo.
Ahora, verás que
el encabezado duplicado no se muestra.
Vamos a la página Artículos también.
Se puede ver de nuevo, el encabezado duplicado no se muestra,
a pesar de que dijimos
el encabezado duplicado para mostrar
en cada página excepto la página principal,
qué está pasando exactamente aquí.
Y créeme, me tomó varias horas.
Solo China averigua exactamente
por qué esto no funcionaba, pero lo descubrí.
Lo que quieres hacer es simplemente volver
a la cabecera duplicada aquí mismo.
Este es el golpe duplicado cada creado.
Lo que quieres hacer es esto, vale,
solo intenta iniciar,
en realidad vamos a volver al
back-end para que no estés confundido.
Muy bien, desde aquí,
desde aquí, basta con hacer click en editar con Elementor.
Editar con Elementor.
Y entonces lo que vas a hacer es justo aquí,
solo iniciar cualquier tipo de cambio.
Digamos que agregas aquí los elementos de encabezado,
por ejemplo, vale, suelta eso ahí.
Ahora ves que el botón de actualización está disponible?
De acuerdo, voy a volver aquí, cerrar esto.
Todo el punto aquí es que quieres hacer
algún tipo de cambio en
el encabezado para que
se active este botón Actualizar cuesta abajo.
Ahora podemos actualizar.
Y ahora debería funcionar.
Entonces si se le pide volver a la página de mis artículos
aquí y ahora actualizar.
Ahora se puede ver que el encabezado duplicado ahora está
mostrando Vuelvo a la página de inicio,
es exactamente el mismo encabezado.
Voy a la página Acerca de.
Y por supuesto es exactamente el mismo encabezado también.
Eso es exactamente lo que debes
hacer cada vez que intentes duplicar
tus encabezados y pies de página en los duplicados.
Simplemente entra edita con Elementor,
agrega cualquier elemento, quita
ese elemento solo para activar el botón de actualización.
Actualización.
Y ahora ese nuevo encabezado o pie de página duplicado
ahora estará en pleno efecto.
Entonces eso es todo por el video que hemos creado nuestros dos encabezados.
Gracias por mirarte y te veré próxima clase.