WL_Header_1280x720.mp4

00:00:00

Neste tutorial, vou discutir o widget de cabeçalho

00:00:03

Agora, um cabeçalho, caso algum de vocês não esteja familiarizado, quando se trata de sites, um cabeçalho é o que está sempre no topo de um site

00:00:11

Isso será qualquer conteúdo ou plano de fundo que esteja no topo de um site

00:00:15

E você pode colocar qualquer link, qualquer botão, qualquer texto, imagens e vídeos com qualquer cabeçalho

00:00:21

E isso sempre vai ser a primeira coisa que a pessoa vê quando o site carrega, porque continua no topo

00:00:27

É assim que um cabeçalho funciona

00:00:28

Então você pode ver aqui, eu criei um texto e um botão bem aqui embaixo

00:00:35

E eu fiz isso para fins de demonstração e você verá o porquê em breve

00:00:38

Então, quando você for em frente e adicionar um widget, o cabeçalho estará localizado aqui perto do topo

00:00:42

Depois de criar um cabeçalho, você pode adicionar qualquer conteúdo que desejar

00:00:48

Então, por exemplo, se eu quiser fazer um fundo bonito, você pode escolher entre cores sólidas, até mesmo imagens ou até mesmo vídeos

00:00:59

Então vamos em frente e fazer uma bela imagem

00:01:01

Você pode escolher qualquer coisa da nossa biblioteca de mídia global

00:01:04

Este é cheio de milhares de páginas que você pode usar gratuitamente

00:01:07

Ou você pode fazer upload do seu próprio computador, você pode arrastar e soltar ou navegar até o arquivo

00:01:15

Certifique-se de clicar em carregar se estiver carregando do seu próprio computador

00:01:18

E depois que você fizer o upload e salvar, você notará que agora foi criada uma bela borda de bambu aqui em cima, seguida pelo nosso texto e botão

00:01:31

Você pode colocar texto diferente dentro disto

00:01:36

Então, por exemplo, se você quiser fazer um título e um subtítulo, vamos em frente e deixar isso branco apenas para que combine um pouco melhor com o fundo.

00:01:46

E você pode até ajustar os diferentes tamanhos e fontes aqui mesmo

00:01:52

E seja à esquerda, ao centro ou à direita, você pode adicionar imagens e vídeos também

00:02:00

Agora, isso é diferente das imagens e vídeos aqui porque é apenas para o fundo

00:02:04

Então, se formos em frente e salvarmos isso, podemos adicionar uma imagem se quisermos

00:02:07

Então aqui está nosso título e subtítulo

00:02:09

Se você quiser adicionar uma imagem, vamos em frente e adicionar algo da nossa biblioteca de mídia global

00:02:18

E ele criará automaticamente essa imagem para você

00:02:21

E isso é relativo ao texto

00:02:23

Você pode ajustar isso aqui

00:02:25

Então, seja acima do texto, abaixo do texto ou à esquerda ou à direita em um desktop

00:02:29

E se você adicionar mais de uma imagem, ele criará automaticamente um controle deslizante de imagem

00:02:34

Então, por exemplo, se quisermos adicionar e criar a segunda imagem, você pode ver que ele fez o controle deslizante automaticamente

00:02:42

Ele vai deslizar entre duas imagens

00:02:45

Você pode ajustar as configurações do controle deslizante aqui, sejam slides ou fades e, em seguida, o tempo

00:02:51

Você pode até adicionar um vídeo simplesmente enviando uma URL aqui

00:02:54

E você pode determinar o quadro em que o vídeo está, como se você quisesse que o vídeo do YouTube parecesse estar em um MacBook Pro ou computador de mesa.

00:03:02

Ou o modelo é quando ele sai separadamente

00:03:05

Você pode adicionar botões

00:03:07

Você pode adicionar botões de praticamente qualquer tipo e isso é abordado no tutorial de botões

00:03:11

Você também pode ajustar o espaço que ele ocupa aqui e os estilos de animação

00:03:22

E para opções adicionais, eles são como todos os outros widgets que você pode exigir, seja para estar logado ou visível apenas no celular ou no desktop.

00:03:30

Então isso é realmente muito útil para um cabeçalho porque, como você sabe, os desktops têm telas muito maiores

00:03:35

Portanto, muitas vezes vale a pena criar um cabeçalho diferente para uma área de trabalho que realmente exiba imagens melhores ou até mesmo imagens completamente diferentes.

00:03:43

Então o que podemos fazer é seguir em frente e apenas visualizar este site apenas para ver como ele fica nas diferentes telas

00:03:49

Então você pode ver na tela maior que o bambu na verdade é uma imagem maior

00:04:00

Então você pode ver mais dessa imagem aqui

00:04:02

Enquanto na tela menor, a imagem é menor

00:04:06

Você pode ver menos disso

00:04:07

Então ainda funciona para uma imagem pequena

00:04:09

Mas vamos em frente e dar aquela tela maior como um vídeo, que funciona melhor em computadores normalmente

00:04:15

Então, se você for em frente e visualizar o site, verá que é uma imagem muito maior

00:04:19

E você pode ver o título na imagem ali ou no link, desculpe

00:04:24

Então, se formos em frente e mudarmos isso para somente dispositivos móveis e salvarmos isso

00:04:31

Agora vamos em frente e criar um novo cabeçalho somente para a área de trabalho

00:04:39

E vamos em frente e temos um vídeo para este

00:04:56

Então vamos fazer um vídeo para esse fundo

00:05:00

E então temos que ter certeza de mudar isso para somente desktop

00:05:11

Então agora você vê, uma vez que salvamos isso, nada mudou em nossa pequena tela aqui porque este é apenas o celular

00:05:19

Mas se formos ao nosso site principal e atualizarmos isso, você poderá ver que agora ele tem aquele belo fundo de vídeo de bambu

00:05:30

E esse é realmente um fundo muito legal

00:05:32

Você pode fazer muita coisa com isso se souber o que está fazendo, porque na verdade flui muito bem

00:05:37

E o que eu estava falando antes, quando se trata de cabeçalhos sempre estarem no topo, vamos em frente e voltar para nossa página principal aqui

00:05:44

E você pode ver normalmente quando você organiza as coisas aqui, na verdade, ele reorganiza a localização

00:05:52

Quando se trata do bloco de conteúdo aqui com o texto e então o botão está abaixo dele

00:05:55

Se eu fosse em frente e reorganizasse o botão acima do bloco de conteúdo, você verá que o cabeçalho ainda está sempre no topo

00:06:02

Mas agora o botão está acima disso

00:06:04

E não importa para onde você mova esse cabeçalho, ele sempre estará no topo porque é isso que um cabeçalho faz

00:06:09

Essa é a natureza do cabeçalho

00:06:10

Então tenha sempre isso em mente

00:06:12

Este geralmente será um dos primeiros widgets que você deseja criar, porque geralmente é a primeira coisa que eles veem quando a página carrega.

00:06:19

Então é assim que o cabeçalho funciona