WL_Header_1280x720.mp4

00:00:00

En este tutorial, voy a hablar sobre el widget de encabezado.

00:00:03

Ahora bien, un encabezado, en caso de que alguno de ustedes no esté familiarizado, cuando se trata de sitios web, un encabezado es lo que siempre está en la parte superior de un sitio.

00:00:11

Eso será cualquier contenido o fondo que esté en la parte superior de un sitio.

00:00:15

Y puedes poner cualquier enlace, cualquier botón, cualquier texto, imágenes y vídeos con cualquier encabezado.

00:00:21

Y eso siempre seguirá siendo lo primero que la persona ve cuando se carga el sitio web porque permanece en la parte superior.

00:00:27

Así es como funciona un encabezado

00:00:28

Como puedes ver aquí, he creado un texto y un botón aquí abajo.

00:00:35

Y lo he hecho con fines demostrativos y verás por qué en un momento.

00:00:38

Entonces, cuando continúas y agregas un widget, el encabezado se ubica aquí cerca de la parte superior.

00:00:42

Una vez que cree un encabezado, puede agregar cualquier contenido que desee

00:00:48

Entonces, por ejemplo, si quiero hacer un fondo bonito, puedo elegir entre colores sólidos, incluso imágenes o incluso vídeos.

00:00:59

Así que sigamos adelante y hagamos una bonita imagen.

00:01:01

Puedes elegir cualquier cosa de nuestra biblioteca multimedia global

00:01:04

Está lleno de miles de páginas que puedes usar de forma gratuita.

00:01:07

O puedes cargarlo desde tu propia computadora, puedes arrastrar y soltar, o buscar el archivo.

00:01:15

Asegúrate de hacer clic en cargar si lo estás cargando desde tu propia computadora.

00:01:18

Y una vez que cargues y guardes eso, notarás que ahora se ha creado un lindo borde de bambú en la parte superior aquí y luego está nuestro texto y botón.

00:01:31

Puedes poner diferentes textos dentro de esto.

00:01:36

Entonces, por ejemplo, si quieres hacer un título y un subtítulo, sigamos adelante y hagámoslo blanco para que coincida un poco mejor con el fondo.

00:01:46

Incluso puedes ajustar los diferentes tamaños y fuentes aquí mismo.

00:01:52

Y ya sea a la izquierda, al centro o a la derecha, también puedes agregar imágenes y videos.

00:02:00

Ahora bien, esto es diferente de las imágenes y los videos que aparecen aquí arriba porque esto es solo para el fondo.

00:02:04

Entonces, si seguimos adelante y guardamos esto, podemos agregar una imagen si queremos.

00:02:07

Así que aquí está nuestro título y subtítulo.

00:02:09

Si desea agregar una imagen, sigamos adelante y agreguemos algo de nuestra biblioteca multimedia global.

00:02:18

Y automáticamente creará esa imagen para ti.

00:02:21

Y eso es relativo al texto.

00:02:23

Puedes ajustarlo aquí mismo.

00:02:25

Entonces, ya sea encima del texto, debajo del texto o a la izquierda o a la derecha en una computadora de escritorio.

00:02:29

Y si agrega más de una imagen, se creará automáticamente un control deslizante de imágenes.

00:02:34

Entonces, por ejemplo, si queremos agregar y crear la segunda imagen, puedes ver que automáticamente se creó el control deslizante.

00:02:42

Se deslizará entre dos imágenes.

00:02:45

Puede ajustar la configuración del control deslizante aquí mismo, ya sea que se deslice o se desvanezca y luego el tiempo.

00:02:51

Incluso puedes agregar un video simplemente cargando una URL aquí

00:02:54

Y puedes determinar el cuadro en el que se encuentra el video, por ejemplo, si quieres que ese video de YouTube se vea como si estuviera en una MacBook Pro o una computadora de escritorio.

00:03:02

O el modelo es cuando sale por separado

00:03:05

Puedes agregar botones

00:03:07

Puedes agregar botones de prácticamente cualquier tipo y eso se explica en el tutorial de botones.

00:03:11

También puedes ajustar el espacio que ocupa aquí y los estilos de animación.

00:03:22

Y para opciones adicionales, son como todos los demás widgets que puedes requerir, ya sea que esté conectado o que sea visible solo en dispositivos móviles o solo en computadoras de escritorio.

00:03:30

Esto es realmente útil para un encabezado porque, como sabes, las computadoras de escritorio tienen pantallas mucho más grandes.

00:03:35

Por lo tanto, a menudo vale la pena crear un encabezado diferente para un escritorio que realmente se mostrará tal vez con mejores imágenes o incluso imágenes completamente diferentes.

00:03:43

Entonces, lo que podemos hacer es seguir adelante y ver este sitio solo para ver cómo se ve en las diferentes pantallas.

00:03:49

Así que puedes ver en la pantalla más grande que el bambú en realidad es una imagen más grande.

00:04:00

Así que puedes ver más de esa imagen aquí mismo.

00:04:02

Mientras que en la pantalla más pequeña, la imagen es más pequeña.

00:04:06

Puedes ver menos de ello

00:04:07

Así que todavía funciona para una imagen pequeña.

00:04:09

Pero sigamos adelante y demos a esa pantalla más grande un video, que generalmente funciona mejor en las computadoras.

00:04:15

Entonces, si sigues adelante y miras el sitio, puedes ver que es una imagen mucho más grande.

00:04:19

Y puedes ver el título en la imagen ahí mismo o el enlace, lo siento.

00:04:24

Entonces, si continuamos y cambiamos esto a solo dispositivos móviles y guardamos esto

00:04:31

Ahora sigamos adelante y creemos un nuevo encabezado solo para el escritorio.

00:04:39

Y sigamos adelante y hagamos un video de esto.

00:04:56

Así que vamos a hacer un vídeo para este fondo.

00:05:00

Y luego tenemos que asegurarnos de cambiar esto solo al escritorio.

00:05:11

Así que ahora ves, una vez que hemos guardado esto, nada ha cambiado en nuestra pantalla pequeña aquí porque este es solo el teléfono celular.

00:05:19

Pero si vamos a nuestro sitio principal actual y lo actualizamos, puedes ver que ahora tiene ese lindo fondo de video de bambú.

00:05:30

Y ese es realmente un fondo muy bonito.

00:05:32

Puedes hacer mucho con eso si sabes lo que estás haciendo porque en realidad fluye con bastante fluidez.

00:05:37

Y lo que estaba diciendo antes sobre que los encabezados siempre estén en la parte superior, sigamos adelante y volvamos a nuestra página principal aquí.

00:05:44

Y puedes ver que normalmente cuando organizas cosas aquí, en realidad reorganiza la ubicación.

00:05:52

Cuando se trata del bloque de contenido aquí mismo con el texto y luego el botón está debajo de eso.

00:05:55

Si sigo adelante y reorganizo el botón sobre el bloque de contenido, ahora verá que el encabezado todavía está siempre en la parte superior.

00:06:02

Pero ahora el botón está encima de eso.

00:06:04

Y no importa a dónde muevas ese encabezado, siempre estará en la parte superior porque eso es lo que hace un encabezado.

00:06:09

Esa es la naturaleza del encabezado.

00:06:10

Así que tenlo siempre presente

00:06:12

Este suele ser uno de los primeros widgets que desea crear porque suele ser lo primero que ven cuando se carga la página.

00:06:19

Así es como funciona el encabezado.