Diagramando a página
Nas aulas anteriores, nós fizemos todos os estilos do site e conseguimos criar a primeira seção da página inicial. Nesta aula, vamos criar todos os demais elementos que fazem parte da diagramação da página, como cardápio, chamada para o download de um e-book e uma seção de finalização. E desta forma, toda a página inicial do nosso site estará finalizada.
Na seção de páginas, clique na sua página principal. Assim que carregar, você verá o título em uma grande tela em branco para criar todo o seu conteúdo.
Com o novo editor do WordPress, o Gutenberg, você verá que é possível criar inúmeros elementos, como encontrar colunas, imagens , seções para inserir vídeos do Vimeo, YouTube e outras plataformas.
O primeiro elemento que vamos construir será um título H2 para a chamada do cardápio.
Na página, clique no botão mais e em título. Em seguida, digite o nome do seu cardápio.
Enquanto digita, você vai perceber que o editor abre uma pequena guia, onde você pode colocar links nos textos, negritar, centralizar e muito mais. Na aba do lado direito da página, você poderá escolher o tamanho e cor do texto, por exemplo.
Com o título já criado, nós podemos seguir na construção do cardápio. Como ainda não há um bloco disponível para dar a vida a criação do cardápio, é hora de recorrer aos plugins.
Baixando o plugin
Volte para o painel e clique em plugins e digite na aba de busca o nome do plugin que deseja instalar em seu WordPress. O plugin utilizado na criação deste cardápio chama-se getwid.
Após a instalação e ativação deste plugin, volte para a página inicial e atualize-a; Clique no botão de mais, navegar por todos e digite price list, clique no elemento e ele aparecerá na tela.
Agora é só preencher com os produtos que fazem parte do cardápio. Preencha o primeiro item e duplique os demais, assim, o seu texto seguirá o mesmo padrão. Para duplicar, é simples, passe o mouse sobre o texto, clique nos três pontinhos e encontre a função duplicar.
Botão do WhatsApp
Para inserir o botão, clique para inserir um texto, aperte no botão de mais e em navegar por todos.
Digite botão e veja todas as opções disponíveis, depois de escolher e inserir na página, digite o texto que deve aparecer no botão. No lado direito da página, você poderá escolher o estilos para o seu botão, como formato, cor e preenchimento.
Depois de definir o layout, é só inserir o link do WhatsApp. Se você já tiver um link, é só inserir. Se não tiver, você pode usar o site Convertte Go (www.converte.com.br) para gerar um link grátis.
Nova seção
Para dar início a uma nova seção, vamos utilizar o elemento padrão chamado cobertura. Para encontrá-lo, aperte o botão com o símbolo mais, em seguida clique em navegar por todos e digite cobertura. Após inserir o elemento, clique em enviar para inserir uma nova imagem.
Em cima da imagem, vamos inserir um título e descrição para estimular os usuários a baixarem nosso e-book. Depois de escolher a imagem e o conteúdo, vamos centralizar o textos e colocar a primeira linha de texto no formato título. Para formatar os textos, basta clicar em cima dos textos que uma caixa com várias ferramentas de edição aparecerá.
Em seguida, é hora de inserir novamente um botão e acrescentar o link que irá direcionar para o download.
Vocês estão vendo que essa nova seção ficou com a aparência de uma pequena caixa de imagem? Nós podemos mudar isso e deixar a imagem mais ampla. Para isso, no topo do editor terá um ícone com três linhas na horizontal, ao lado, da frase “template library”. Clique nele e depois em cobertura.
Após selecionar apenas o elemento cobertura, olhe para as suas configurações, você verá que ele está alinhado, mas é possível deixar a imagem com a largura ampla ou total. Teste os dois estilos e veja qual deles se adapta melhor ao seu site. Neste site, vamos utilizar a largura total.
Vale salientar que você pode modificar o tamanho da imagem ou estilos de texto a qualquer momento. Por isso, vale a pena testar cada um deles para ver qual é o ideal para sua marca.
Última seção
Para finalizar, vamos inserir mais um texto, clicando no botão mais e em título. O texto utilizado neste site estimulará o comércio local.
Inserindo o Icon
O editor de blocos também permite que você coloque icons em suas páginas. Neste site, vamos inserir um ícone de coração. Para inserir, basta clicar no botão mais e digitar icon no campo de busca.
No lado direito da página, você poderá escolher o ícone que deseja inserir e ainda escolher a sua cor e tamanho.
Depois, é hora de conferir todos os dados que você incluiu em todas as sessões e conferir se o design do seu site pode ser visto corretamente em dispositivos móveis.
Ajustes de espaçamento
Para alterar os espaçamentos entre as seções, você pode utilizar um espaçador. Clique no botão mais e procure por espaçador. Depois, é só realizar os ajustes na aba localizada no lado direito da página, conforme a sua necessidade.
Âncoras
Agora, nós vamos criar as âncoras. Estas âncoras auxiliarão seus usuários a encontrarem com facilidade a página que desejam visualizar após clicarem no menu.
Para criá-las, vamos clicar em cima do texto “Grãos Disponíveis”, em seguida abrirá uma aba no lado direito da página. Clique em avançado e escreva cardápio.
Depois, no elemento do e-book com as receitas, selecione a cobertura, clique em avançado e escreva: ebook.
Se o seu site conter mais seções, é só repetir esta ação em cada uma delas.
Na próxima aula, vamos aprender como criar o menu.
Até o próximo vídeo!