Nesta guia, vamos ver como criar o ’header do site web.
O que é o ’header?
O ’header é a parte superior do site web que é repetida em todas as páginas do site, geralmente dentro desta seção encontramos o logo do site e o menu de navegação.
Agora não nos resta nada além de ver em poucos passos simples como criar nosso header.
Passo 1: Criamos o ’Header
Primeiro, vamos até a opção Blocos globais presente dentro do menu principal do Framework360 seguindo os seguintes passos:
Sitio Web > Blocos Globais
Dentro desta seção, encontraremos todos os conteúdos que podem ser criados uma vez e posteriormente chamados em todas as páginas do site web que desejarmos.
A este ponto, para criar o header, não devemos fazer nada além de clicar no botão no canto superior direito Adicionar. Uma vez dentro da página de criação do bloco global, vamos à opção Tipologia e selecionamos como tipologia Header, conforme mostrado na figura:
Passo 2: Personalizamos nosso header
A este ponto, ainda dentro da tela de criação do bloco global, vamos personalizar o conteúdo do nosso header através do Visual Builder do Framework360.
No nosso exemplo, iremos criar um header que terá o logo do site e o menu de navegação.
Primeiro, vamos clicar em Adicionar uma linha e vamos criar dentro da linha duas colunas (uma onde inseriremos o logo e a outra onde inseriremos o menu de navegação).
A este ponto, vamos procurar dentro do Visual Builder o conteúdo Logo site e vamos arrastá-lo para a primeira coluna criada. Em seguida, ainda no Visual Builder, vamos procurar o conteúdo Navbar, arraste-o para a segunda coluna e vamos selecionar dentro da tela de personalização do Navbar o Menú Principal.
A este ponto, clique no botão no canto superior direito Salvar
Passo 3: Vamos criar o Menú Principal
Se ainda não criamos o Menú Principal, notaremos que na parte direita do nosso header não aparecerá nada:
Para criar o Menu Principal devemos nos dirigir à opção Menu presente dentro do menu principal do Framework360 seguindo os seguintes passos:
Sitio Web > Menu
A este ponto, clicamos no Menu Principal que é inserido automaticamente pelo Framevork360 para modificá-lo.
Uma vez dentro da tela de edição, não devemos fazer nada além de arrastar as opções que queremos visualizar no menu principal da coluna da esquerda Página para a coluna da direita Ordenação Menu como mostrado na figura:
A este ponto, só nos resta clicar no botão Salvar no canto superior direito e o nosso Header estará completo!
