En el video anterior, creamos con éxito
nuestros dos encabezados,
uno para la página de inicio
y otro para el resto del sitio web.
Pero ahora vamos a crear nuestro Pie de página Global.
Y la buena noticia aquí es que sólo necesitamos crear uno
de pie de página y esto es
exactamente lo que estamos tratando de crear.
Vamos a tener esta imagen aquí a la izquierda
y luego alguna información de contacto, iconos de redes sociales.
Y luego el derecho de autor lateral
básicamente aquí abajo en la parte inferior.
Vamos a seguir adelante y hacer esto rápidamente.
Voy a hacer click en Agregar Nuevo.
Y vamos a llamar a éste el pie de página global.
Seleccionar opción aquí será Pie
y por supuesto mostrar porque todo el sitio web.
Y cambiaremos la plantilla a ancho completo.
Y ahí vamos.
Vamos a seguir adelante Publish.
Y ahora editemos con Elementor.
Ahora, quiero que prestes mucha atención a
una diferencia masiva
entre el encabezado y
el pie de página y el encabezado que tenemos aquí.
Básicamente tenemos sólo dos columnas.
El de la izquierda sosteniendo el logotipo,
el de la derecha sosteniendo el código, el menú principal.
Pero para el pie de página, observe
que es un poco diferente.
Sí, todavía tenemos dos columnas,
una que sostiene esta imagen,
la otra que sostiene la información de contacto.
Pero luego aquí abajo,
este texto de derechos de autor es en realidad una tercera columna.
No está debajo de esta primera columna aquí.
En realidad es una columna separada por sí sola.
Para crear este tipo de sección de múltiples columnas,
vamos a hacer uso de
un nuevo elemento llamado la sección de correo electrónico en la encuesta.
En realidad es el primer elemento que tienes,
este aquí mismo en una sección.
Voy a hacer clic en arrastrar y luego soltarlo dentro.
De acuerdo, así que primero lo primero, sin embargo,
es que voy a seguir adelante y editar la primera sección.
Si estás teniendo problemas al intentar
hacer click en la sección de la sec de padres,
básicamente, siempre puedes usar tu navegador aquí mismo
y puedes ver aquí mismo tenemos
esta columna de sección y luego intersección.
Por lo que voy a hacer click en la sección en este momento.
Vamos a cambiar el ancho del contenido
aquí mismo a ancho completo.
Y luego las columnas se separan.
No vamos a elegir ninguna brecha.
El motivo es que si prestas mucha atención,
puedes ver ahora mismo la forma en que tienes la imagen,
no hay espacio,
no hay márgenes de relleno en absoluto.
La imagen está directamente
ahí mismo en el borde de la parte inferior.
Ahí es donde estamos eligiendo nuestra brecha de nodos aquí.
No queremos tener vacíos en absoluto.
Lo mismo va a ir con la sección interior también.
Pero antes de saltar ahí,
vamos a añadir un color de fondo.
Voy a ir a Tipo de fondo.
Y por supuesto que vamos a elegir son negros.
Entonces voy a tener un fondo negro para el pie de página.
Siguiente arriba ahora van a ser las secciones ina.
Voy a hacer click en sección interna aquí mismo desde
la navega A otra vez,
vamos a ir de ancho completo.
Y luego columnas, columnas se separan aquí.
Vamos a decir que no hay brecha también.
Muy bien, impresionante.
Ahora vamos adelante y
manejemos la primera columna de aquí,
que tendrá nuestra imagen.
Entonces voy a dejar caer ahí el elemento de imagen.
Elige esta imagen aquí mismo.
Y en caso de que te estés preguntando que esto es realmente en Perú.
Es un lugar llamado Horeca kina o que son Cocina.
No estoy exactamente seguro de cómo se basa en las finanzas,
básicamente algo así como una zona desértica.
Se puede hacer la caja de resonancia y, y así sucesivamente.
Bastante lugar impresionante para comprobar hacia fuera.
Y voy a seguir adelante y cambiar éste a tonto.
Pero entonces aquí está el más delgado, ¿verdad?
Vamos a cambiar los anchos de columna.
Vamos a hacer la primera columna aquí.
En realidad vamos a hacerlo un poco más amplio.
Entonces vamos a ir todo el camino a 63 píxeles,
63% en realidad, así que 63% y luego 37% para la segunda columna.
Pero vamos a hacer un cambio en la imagen.
La imagen es demasiado alta.
Así que sigamos adelante y editemos la imagen.
Y entonces vamos a ir por aquí a
estilo y estamos aquí,
voy a elegir 450 pixeles.
Entonces es casi lo suficientemente alto y lo suficientemente ancho.
De acuerdo, esa es la imagen de ahí mismo.
Ahora, sólo estoy cerrando navegante.
Para la segunda columna,
vamos a sumar una serie de elementos diferentes.
El primero aquí sería el elemento de encabezado,
y éste será nuestros contactos.
Voy a escribirlo todo en mayúsculas. Contacto.
Va a ser un H2.
Por el estilo de la sabiduría.
Vamos a ir al color del texto
y simplemente elegir primaria.
Ahora vamos a elegir otro rumbo.
Nuevamente.
Voy a dejarlo justo debajo
del contacto justo ahí mismo.
Éste va a ser un teléfono.
Nuevamente, mayúsculas al teléfono.
No obstante, vamos a hacer de ésta una edad de tres años.
En realidad hagámoslo un H4.
Vamos a hacer que sea un H4
y vamos a sumar alguna información.
Entonces lo que voy a hacer aquí mismo es
simplemente hacer clic derecho y luego simplemente duplicar.
Y ahora vamos a hacer de ésta una edad de cinco años.
El número de teléfono real será un h5.
Así que vamos a cambiar el número aquí mismo al
090 espacio 645, espacio 3417.
Ese va a ser el número de teléfono.
Y voy a volver al estilo y a la topografía.
En realidad escojamos textos.
Prefiero este patrón de texto,
así que vamos a elegir ese.
Entonces también vamos a duplicar el teléfono.
De nuevo, arrástralo aquí justo
debajo del número de teléfono.
También vamos a duplicar
el propio número de teléfono.
Vale, y luego arrastra el teléfono del NIF.
Ahora, oops, lo siento, eso fue todo el camino allá arriba.
Vamos a traerlo de vuelta aquí abajo.
Bien, ahora vamos a editar el teléfono,
el segundo teléfono aquí mismo.
Vamos a cambiar éste por correo electrónico.
Esto es básicamente cómo caminar inteligente.
Simplemente duplica siempre que
puedas y simplemente haz las ediciones necesarias.
Ahora vamos a editar el número telefónico.
Vamos a cambiar el correo electrónico.
Mi correo es Alex.
Pasar puertos se convertirán no se ve correcto.
Alex en pasaporte travel.com.
Ok. Yep. Eso es correcto.
Y luego por último pero no menos importante,
vamos a tener una dirección.
También dupliquemos el correo electrónico,
agregando una vez más.
Vamos a arrastrar, soltar eso aquí.
Cambia el correo electrónico también.
Dirección IP.
Ahora para la dirección real,
vamos a usar un editor de texto a diferencia de un oculto,
porque va a haber múltiples líneas de textos van
a soltar el editor de texto justo ahí.
Yo sí tengo una dirección muy interesada aquí mismo.
No sé si esta es en realidad
una dirección real. No me acuerdo.
Pero es encaja en r2, Emile Zola.
Ahora voy a presionar Shift Enter, no sólo anti,
porque si presionas Enter vas a
tener un doble espacio en,
usa la tecla Mayús y luego enter.
Por lo que tienes un solo espaciado de líneas.
Y ahora voy a teclear en 609002, leon,
Turno Entrar otra vez.
Y luego vamos a escribir en Francia todo k
Y vamos a ir a la tipografía de estilo.
Vamos a ir con mensajes de texto.
Y por supuesto, el color del texto será primario.
Y ahí vas.
Y por último pero no menos importante,
vamos a tener nuestros iconos de las redes sociales.
Muy, muy, muy importante.
Las redes sociales van a estar aquí abajo en el general.
Agreguemos una red social.
Y por supuesto para Facebook, bueno,
vamos a cambiar el color
de código eficiente a personalizado.
El color primario aquí sería blanco,
el color secundario sería negro.
Básicamente, tendrás el fondo blanco y luego
el icono real en sí será negro.
Si este fuera un sitio web real que estás construyendo,
aquí es donde agregarías el enlace
a tu página de Facebook.
Eso es para Facebook.
Vamos a hacer exactamente lo mismo para Twitter también.
Por qué será el parámetro color
negro como color secundario.
El último banal es el disfraz de YouTube o color fucsia.
El color primario es blanco,
colon secundario es negro.
Y luego la forma aquí,
vamos a cambiar su forma a círculo, derecha,
y luego alineación,
en realidad voy a alinearla a la izquierda.
Ya casi estamos ahí.
Pero luego note que hay algo de espaciado,
la información de contacto real y luego la imagen.
Lo que vas a hacer aquí mismo
es que vamos a ir aquí mismo
a la columna
sosteniendo toda esta información de contacto,
haces clic ahí.
Ve primero, Alinear Vertical,
alinémonos al medio.
Después ve a avanzado,
y luego eventualmente tienes relleno.
Voy a desvincular
estos valores juntos porque
esto es por defecto, sea cual sea el
valor que agregue a su relleno, a la parte superior,
a la derecha, a la parte inferior o a la izquierda.
Se duplicará un rumbo de los tres lados restantes.
Por lo que no queremos esto,
solo queremos agregar relleno a un lado.
Así que voy a hacer clic en este botón aquí mismo para
desvincular los valores por si no lo sabes,
Patrón básicamente es una forma de crear espacio
entre tu contenido y su borde.
Vamos a agregar relleno a la izquierda,
como se puede ver, luciendo mucho mejor ya.
Y voy a ir todo el camino a 40 pixeles.
Ya casi estamos ahí.
Uno de ellos que vamos a añadir en este momento va a
ser los textos de copyright.
Así que voy a desplazarse hasta aquí abajo.
Entonces justo aquí bajo tu encabezado y pie de página elemental,
ves textos de derechos de autor.
Haga clic en arrastrar.
Y voy a ser muy, muy cuidadoso.
No lo vamos a dejar caer en
la esta primera columna sosteniendo la imagen.
Lo estamos dejando caer en una clínica separada considerada que aparece línea azul, lo
que significa eso, vale.
Esta va a ser una columna separada.
Observe en este momento que la BlueLine
solo está debajo de la imagen,
debajo de la columna que sostiene la imagen.
Pero si arrastro mi mouse solo más
abajo solo un poco ahora
puedes ver la línea azul que se extiende a través de ambas columnas.
Por lo que ahora voy a dejar caer ahí el texto de los derechos de autor.
Y ahí está.
El color del texto aquí obviamente será tipografía primaria.
Vamos a ir con texto alineado al centro.
Y en realidad vamos a pasar
a la tipografía, una ganancia.
Y hagamos que éste sea un poco
más pequeño de lo habitual.
Creo que 16 pixeles se trata de lo correcto.
Pero también queremos agregar algún relleno también.
Así que pasemos a avanzado.
De nuevo, vamos a desvincular los valores.
Vamos a agregar relleno de 20 pixeles
para los diez primeros píxeles para la parte inferior también.
Hemos hecho bastante.
Vamos a seguir adelante ahora y actualizaciones.
Veamos cómo se ve.
Así que voy a ir por aquí, refrescar la página.
Y ahí vas.
Este es nuestro pie de página justo ahí.
Ahora sé que puedes ver espacios en blanco aquí abajo,
pero eso es simplemente porque aún no tenemos
ningún contenido en la página de inicio.
Por eso tienes este espacio en blanco.
Ya agregué algunos contenidos a la página sobre.
Entonces esto es más parecido a lo que ahora se verá.
Se puede ver que no hay más espacios en blanco en
un int porque en realidad sí
tenemos algún contenido en la página, pero ahí está.
Ahora tenemos nuestro pie
bien construido con la imagen de Perú,
textos de copyright, así como alguna información de contacto.
Gracias por ver, y por supuesto
te veré en la próxima clase.