{"id":36911,"date":"2022-10-24T17:23:40","date_gmt":"2022-10-24T20:23:40","guid":{"rendered":"https:\/\/www.yogh.com.br\/blog\/?post_type=lesson&p=36911"},"modified":"2022-10-24T17:23:43","modified_gmt":"2022-10-24T20:23:43","slug":"aula-3-diagramando-a-pagina","status":"publish","type":"lesson","link":"https:\/\/www.yogh.com.br\/blog\/aula\/aula-3-diagramando-a-pagina\/","title":{"rendered":"Aula 3: Diagramando a p\u00e1gina"},"content":{"rendered":"\n
<\/path><\/svg><\/div><\/div>
<\/span><\/div><\/div>\n\n\n\n

Diagramando a p\u00e1gina<\/h2>\n\n\n\n

Nas aulas anteriores, n\u00f3s fizemos todos os estilos do site e conseguimos criar a primeira se\u00e7\u00e3o da p\u00e1gina inicial. Nesta aula, vamos criar todos os demais elementos que fazem parte da diagrama\u00e7\u00e3o da p\u00e1gina, como card\u00e1pio, chamada para o download de um e-book e uma se\u00e7\u00e3o de finaliza\u00e7\u00e3o. E desta forma, toda a p\u00e1gina inicial do nosso site estar\u00e1 finalizada. <\/p>\n\n\n\n

Na se\u00e7\u00e3o de p\u00e1ginas, clique na sua p\u00e1gina principal. Assim que carregar, voc\u00ea ver\u00e1 o t\u00edtulo em uma grande tela em branco para criar todo o seu conte\u00fado.<\/p>\n\n\n\n

Com o novo editor do WordPress, o Gutenberg, voc\u00ea ver\u00e1 que \u00e9 poss\u00edvel criar in\u00fameros elementos, como encontrar colunas, imagens , se\u00e7\u00f5es para inserir v\u00eddeos do Vimeo, YouTube e outras plataformas.<\/p>\n\n\n\n

O primeiro elemento que vamos construir ser\u00e1 um t\u00edtulo H2 para a chamada do card\u00e1pio.<\/p>\n\n\n\n

Na p\u00e1gina, clique no bot\u00e3o mais e em t\u00edtulo. Em seguida, digite o nome do seu card\u00e1pio. <\/p>\n\n\n\n

Enquanto digita, voc\u00ea vai perceber que o editor abre uma pequena guia, onde voc\u00ea pode colocar links nos textos, negritar, centralizar e muito mais. Na aba do lado direito da p\u00e1gina, voc\u00ea poder\u00e1 escolher o tamanho e cor do texto, por exemplo.<\/p>\n\n\n\n

Com o t\u00edtulo j\u00e1 criado, n\u00f3s podemos seguir na constru\u00e7\u00e3o do card\u00e1pio. Como ainda n\u00e3o h\u00e1 um bloco dispon\u00edvel para dar a vida a cria\u00e7\u00e3o do card\u00e1pio, \u00e9 hora de recorrer aos plugins.<\/p>\n\n\n\n

Baixando o plugin<\/h3>\n\n\n\n

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\u00e7\u00e3o deste card\u00e1pio chama-se getwid. <\/p>\n\n\n\n

Ap\u00f3s a instala\u00e7\u00e3o e ativa\u00e7\u00e3o deste plugin, volte para a p\u00e1gina inicial e atualize-a;  Clique no bot\u00e3o de mais, navegar por todos e digite price list, clique no elemento e ele aparecer\u00e1 na tela. <\/p>\n\n\n\n

Agora \u00e9 s\u00f3 preencher com os produtos que fazem parte do card\u00e1pio. Preencha o primeiro item e duplique os demais, assim, o seu texto seguir\u00e1 o mesmo padr\u00e3o. Para duplicar, \u00e9 simples, passe o mouse sobre o texto, clique nos tr\u00eas pontinhos e encontre a fun\u00e7\u00e3o duplicar.<\/p>\n\n\n\n

Bot\u00e3o do WhatsApp<\/h3>\n\n\n\n

Para inserir o bot\u00e3o, clique para inserir um texto, aperte no bot\u00e3o de mais e em navegar por todos.<\/p>\n\n\n\n

Digite bot\u00e3o e veja todas as op\u00e7\u00f5es dispon\u00edveis, depois de escolher e inserir na p\u00e1gina, digite o texto que deve aparecer no bot\u00e3o. No lado direito da p\u00e1gina, voc\u00ea poder\u00e1 escolher o estilos para o seu bot\u00e3o, como formato, cor e preenchimento.<\/p>\n\n\n\n

Depois de definir o layout, \u00e9 s\u00f3 inserir o link do WhatsApp. Se voc\u00ea j\u00e1 tiver um link, \u00e9 s\u00f3 inserir. Se n\u00e3o tiver, voc\u00ea pode usar o site Convertte Go (www.converte.com.br<\/a>) para gerar um link gr\u00e1tis.<\/p>\n\n\n\n

Nova se\u00e7\u00e3o<\/h3>\n\n\n\n

Para dar in\u00edcio a uma nova se\u00e7\u00e3o, vamos utilizar o elemento padr\u00e3o chamado cobertura. Para encontr\u00e1-lo, aperte o bot\u00e3o com o s\u00edmbolo mais,  em seguida clique em navegar por todos e digite cobertura. Ap\u00f3s inserir o elemento, clique em enviar para inserir uma nova imagem.<\/p>\n\n\n\n

Em cima da imagem, vamos inserir um t\u00edtulo e descri\u00e7\u00e3o para estimular os usu\u00e1rios a baixarem nosso e-book. Depois de escolher a imagem e o conte\u00fado, vamos centralizar o textos e colocar a primeira linha de texto no formato t\u00edtulo. Para formatar os textos, basta clicar em cima dos textos que uma caixa com v\u00e1rias ferramentas de edi\u00e7\u00e3o aparecer\u00e1.<\/p>\n\n\n\n

Em seguida, \u00e9 hora de inserir novamente um bot\u00e3o e acrescentar o link que ir\u00e1 direcionar para o download.<\/p>\n\n\n\n

Voc\u00eas est\u00e3o vendo que essa nova se\u00e7\u00e3o ficou com a apar\u00eancia de uma pequena caixa de imagem? N\u00f3s podemos mudar isso e deixar a imagem mais ampla. Para isso, no topo do editor ter\u00e1 um \u00edcone com tr\u00eas linhas na horizontal, ao lado, da frase \u201ctemplate library\u201d. Clique nele e depois em cobertura. <\/p>\n\n\n\n

Ap\u00f3s selecionar apenas o elemento cobertura, olhe para as suas configura\u00e7\u00f5es, voc\u00ea ver\u00e1 que ele est\u00e1 alinhado, mas \u00e9 poss\u00edvel 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.<\/p>\n\n\n\n

Vale salientar que voc\u00ea 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 \u00e9 o ideal para sua marca.<\/p>\n\n\n\n

\u00daltima se\u00e7\u00e3o<\/h3>\n\n\n\n

Para finalizar, vamos inserir mais um texto, clicando no bot\u00e3o mais e em t\u00edtulo. O texto utilizado neste site estimular\u00e1 o com\u00e9rcio local. <\/p>\n\n\n\n

Inserindo o Icon<\/h3>\n\n\n\n

O editor de blocos tamb\u00e9m permite que voc\u00ea coloque icons em suas p\u00e1ginas. Neste site, vamos inserir um \u00edcone de cora\u00e7\u00e3o. Para inserir, basta clicar no bot\u00e3o mais e digitar icon no campo de busca. <\/p>\n\n\n\n

No lado direito da p\u00e1gina, voc\u00ea poder\u00e1 escolher o \u00edcone que deseja inserir e ainda escolher a sua cor e tamanho.<\/p>\n\n\n\n

Depois, \u00e9 hora de conferir todos os dados que voc\u00ea incluiu em todas as sess\u00f5es e conferir se o design do seu site pode ser visto corretamente em dispositivos m\u00f3veis.<\/p>\n\n\n\n

Ajustes de espa\u00e7amento<\/h3>\n\n\n\n

Para alterar os espa\u00e7amentos entre as se\u00e7\u00f5es, voc\u00ea pode utilizar um espa\u00e7ador. Clique no bot\u00e3o mais e procure por espa\u00e7ador. Depois, \u00e9 s\u00f3 realizar os ajustes na aba localizada no lado direito da p\u00e1gina, conforme a sua necessidade.<\/p>\n\n\n\n

\u00c2ncoras<\/h3>\n\n\n\n

Agora, n\u00f3s vamos criar as \u00e2ncoras. Estas \u00e2ncoras auxiliar\u00e3o seus usu\u00e1rios a encontrarem com facilidade a p\u00e1gina que desejam visualizar ap\u00f3s clicarem no menu.<\/p>\n\n\n\n

Para cri\u00e1-las, vamos clicar em cima do texto \u201cGr\u00e3os Dispon\u00edveis\u201d, em seguida abrir\u00e1 uma aba no lado direito da p\u00e1gina. Clique em avan\u00e7ado e escreva card\u00e1pio.<\/p>\n\n\n\n

Depois, no elemento do e-book com as receitas, selecione a cobertura, clique em avan\u00e7ado e escreva: ebook.<\/p>\n\n\n\n

Se o seu site conter mais se\u00e7\u00f5es, \u00e9 s\u00f3 repetir esta a\u00e7\u00e3o em cada uma delas.<\/p>\n\n\n\n

Na pr\u00f3xima aula, vamos aprender como criar o menu.<\/p>\n\n\n\n

At\u00e9 o pr\u00f3ximo v\u00eddeo!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false,"kk_blocks_editor_width":"","_kiokenblocks_attr":"","_kiokenblocks_dimensions":"","_initial_content":"","_new_post":false,"_quiz_has_questions":false,"_lesson_complexity":"easy","_lesson_length":10,"_lesson_course":36919,"_lesson_preview":""},"lesson-tag":[],"class_list":["post-36911","lesson","type-lesson","status-publish","hentry","post"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/lessons\/36911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/lessons"}],"about":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/types\/lesson"}],"version-history":[{"count":1,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/lessons\/36911\/revisions"}],"predecessor-version":[{"id":36942,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/lessons\/36911\/revisions\/36942"}],"wp:attachment":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/media?parent=36911"}],"wp:term":[{"taxonomy":"lesson-tag","embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/lesson-tag?post=36911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}