{"id":36913,"date":"2022-10-24T17:22:09","date_gmt":"2022-10-24T20:22:09","guid":{"rendered":"https:\/\/www.yogh.com.br\/blog\/?post_type=lesson&p=36913"},"modified":"2022-10-24T17:22:44","modified_gmt":"2022-10-24T20:22:44","slug":"aula-2-criando-a-estrutura-do-site","status":"publish","type":"lesson","link":"https:\/\/www.yogh.com.br\/blog\/aula\/aula-2-criando-a-estrutura-do-site\/","title":{"rendered":"Aula 2: Criando a estrutura do site"},"content":{"rendered":"\n
<\/path><\/svg><\/div><\/div>
<\/span><\/div><\/div>\n\n\n\n

Criando a estrutura do site<\/h2>\n\n\n\n

Para come\u00e7ar a segunda aula, vamos conhecer algumas informa\u00e7\u00f5es sobre a estrutura do site que vamos criar. O site \u00e9 de uma empresa que realiza entregas de caf\u00e9 em casa. Durante a pandemia, muitas empresas precisaram mudar e passaram a realizar a entrega de seus produtos em casas.<\/p>\n\n\n\n

Nesta aula, voc\u00ea ver\u00e1 como criar um site simples, r\u00e1pido e sem utilizar nada de c\u00f3digo. <\/p>\n\n\n\n

Na aba inicial do site, voc\u00ea encontra uma foto do produto e uma frase relacionada ao servi\u00e7o prestado pela empresa.<\/p>\n\n\n\n

Em seguida, descendo a p\u00e1gina, voc\u00ea encontra um item importante: o card\u00e1pio. Depois de visualizar o card\u00e1pio, o usu\u00e1rio j\u00e1 pode fazer o pedido atrav\u00e9s de um link que direciona o cliente para o WhatsApp da empresa.<\/p>\n\n\n\n

Logo depois, h\u00e1 um espa\u00e7o dispon\u00edvel para colocar uma chamada para um infoproduto, como um e-book por exemplo.<\/p>\n\n\n\n

Por \u00faltimo, o site conta com um espa\u00e7o destinado \u00e0s considera\u00e7\u00f5es finais.<\/p>\n\n\n\n

O site conta, ainda, com um menu para facilitar o acesso \u00e0s informa\u00e7\u00f5es. Neste espa\u00e7o, o usu\u00e1rio poder\u00e1 ir direto para a informa\u00e7\u00e3o que deseja acessar, sem precisar rolar a p\u00e1gina e buscar por ela.<\/p>\n\n\n\n

Outro fator importante, \u00e9 que seu site tamb\u00e9m deve estar adaptado para dispositivos m\u00f3veis, pois a grande maioria da popula\u00e7\u00e3o acessa a internet atrav\u00e9s de dispositivos m\u00f3veis.<\/p>\n\n\n\n

Para a cria\u00e7\u00e3o deste site, n\u00f3s vamos utilizar o tema e plugins disponibilizados pelo WordPress para facilitar a atualiza\u00e7\u00e3o, manuten\u00e7\u00e3o,  garantir a seguran\u00e7a e ter uma boa performance. Assim, os usu\u00e1rios ir\u00e3o acessar seus conte\u00fados de forma mais r\u00e1pida e voc\u00ea ficar\u00e1 cada vez mais bem posicionado no Google e outros mecanismos de busca.<\/p>\n\n\n\n

A ideia desta aula \u00e9 utilizar o m\u00ednimo de recursos poss\u00edveis para ter um site bem r\u00e1pido e que possa ser feito com facilidade.<\/p>\n\n\n\n

Vamos come\u00e7ar a customizar o nosso site em WordPress?!<\/h3>\n\n\n\n

O primeiro passo a ser seguido, \u00e9 escolher o tema que ser\u00e1 colocado no site. O WordPress por si s\u00f3 n\u00e3o tem uma identidade, ent\u00e3o n\u00f3s teremos que escolher um template que vai ser aplicado nele. Como fazemos isso?<\/p>\n\n\n\n

Escolhendo o tema<\/h4>\n\n\n\n

Passe o mouse na Aba \u2013 Apar\u00eancia, em seguida clique em temas. Neste ambiente, voc\u00ea encontrar\u00e1 03 temas que j\u00e1 aparecem como padr\u00e3o no WordPress, s\u00e3o eles: Twenty Seventeen, Twenty Nineteen e Twenty Twenty.<\/p>\n\n\n\n

Al\u00e9m dos temas padr\u00f5es, voc\u00ea pode encontrar uma infinidade de temas dispon\u00edveis no reposit\u00f3rio oficial do WordPress. Para encontrar novos temas, voc\u00ea pode filtrar por categorias, mais recentes e ainda olhar quais temas s\u00e3o os mais populares para te ajudar nesta escolha.<\/p>\n\n\n\n

Todos os temas dispon\u00edveis no reposit\u00f3rio s\u00e3o gratuitos, mas existem outros sites que desenvolvem e vendem temas para WordPress. <\/p>\n\n\n\n

Inclusive o tema que ser\u00e1 utilizado na cria\u00e7\u00e3o deste site \u00e9 gratuito e se chama Twenty Twenty. Este tema foi lan\u00e7ado junto com a vers\u00e3o 5.3 do WordPress e \u00e9 um tema leve, que possui uma bela identidade visual e uma boa escolha de fontes. <\/p>\n\n\n\n

Para a cria\u00e7\u00e3o de um site simples, este tema \u00e9 uma \u00f3tima escolha. Ao baixar o WordPress, o tema Twenty Twenty j\u00e1 vem instalado, mas se voc\u00ea quiser optar por outro tema, basta escolher o novo tema, clicar no bot\u00e3o instalar e ativ\u00e1-lo. <\/p>\n\n\n\n

Personalizando o tema escolhido<\/h4>\n\n\n\n

Depois de ativar o tema, volte para aba apar\u00eancia e clique em personalizar. Ap\u00f3s carregar a p\u00e1gina, voc\u00ea ver\u00e1 na aba esquerda todas as op\u00e7\u00f5es dispon\u00edveis para personalizar o tema. As op\u00e7\u00f5es podem variar conforme o tema escolhido.<\/p>\n\n\n\n

No lado direito da p\u00e1gina, voc\u00ea poder\u00e1 acompanhar cada altera\u00e7\u00e3o feita na personaliza\u00e7\u00e3o do seu site.<\/p>\n\n\n\n

O primeiro item \u00e9: identidade do site. Neste espa\u00e7o, voc\u00ea colocar\u00e1 a logo e informa\u00e7\u00f5es relacionadas ao site, como t\u00edtulo e descri\u00e7\u00e3o. <\/p>\n\n\n\n

Para este site, o t\u00edtulo escolhido foi: Entrega de Caf\u00e9 e a descri\u00e7\u00e3o: delivery de gr\u00e3os especiais. <\/p>\n\n\n\n

Em seguida, voc\u00ea j\u00e1 pode fazer o upload da logo escolhida para o seu site. Depois, \u00e9 hora de colocar o \u00edcone escolhido para o seu site. Este \u00edcone \u00e9 tamb\u00e9m conhecido como fav-icon, que fica no canto esquerdo da aba do browser. Isso ajudar\u00e1 o usu\u00e1rio a encontrar sua p\u00e1gina quando estiver navegando na internet com v\u00e1rias abas abertas ao mesmo tempo.<\/p>\n\n\n\n

Cores<\/h4>\n\n\n\n

Na aba cores, voc\u00ea poder\u00e1 personalizar as cores do seu site. Neste projeto, a cor de fundo padr\u00e3o ser\u00e1 mantida, mas voc\u00ea pode optar por outra cor que se encaixe melhor na sua marca.<\/p>\n\n\n\n

Modelo de cobertura<\/h4>\n\n\n\n

Na aba modelo de cobertura, n\u00f3s vamos manter a imagem como fixa, em seguida, voc\u00ea pode escolher a cor de fundo do seu site. No v\u00eddeo, o vermelho tom escolhido para o site e a cor da fonte escolhida foi branca. Neste ambiente, voc\u00ea tamb\u00e9m pode escolher um n\u00edvel de transpar\u00eancia para a cor do seu site.<\/p>\n\n\n\n

Depois de realizar as altera\u00e7\u00f5es, clique no bot\u00e3o publicar para salvar as altera\u00e7\u00f5es. <\/p>\n\n\n\n

Antes de continuarmos, vamos voltar para o menu configura\u00e7\u00f5es, aba leitura e conferir o que est\u00e1 ativo. Se voc\u00ea pretende fazer in\u00fameros ajustes antes de permitir que seus usu\u00e1rios possam ver o seu conte\u00fado, \u00e9 importante que voc\u00ea deixe o item: \u201cEvitar que os mecanismos de busca indexem este site\u201d ativado. <\/p>\n\n\n\n

Quando tudo estiver pronto e voc\u00ea for publicar o seu site, \u00e9 importante que este item esteja desativado para que o Google e outros mecanismos de busca possam indexar o seu site. Depois de desativar este item, lembre-se de salvar as altera\u00e7\u00f5es.<\/p>\n\n\n\n

Criando a p\u00e1gina inicial<\/h4>\n\n\n\n

Para criar a p\u00e1gina inicial, clique em p\u00e1ginas. Neste ambiente, voc\u00ea ter\u00e1 acesso a todas as p\u00e1ginas de teste do WordPress, que podem ser apagadas posteriormente.<\/p>\n\n\n\n

Para este site, n\u00f3s vamos criar uma p\u00e1gina totalmente nova. Para isso, clique em \u201cAdicionar nova\u201d ao lado da palavra P\u00e1ginas. <\/p>\n\n\n\n

Na primeira vez em que voc\u00ea for clicar na cria\u00e7\u00e3o de uma nova p\u00e1gina, ter\u00e1 acesso a uma apresenta\u00e7\u00e3o de boas-vindas ao novo editor de blocos do WordPress. <\/p>\n\n\n\n

Desde meados de 2019, o editor do WordPress mudou. Anteriormente, o editor remetia a uma p\u00e1gina do Word. O novo editor passou por uma revolu\u00e7\u00e3o e leva o nome de Gutenberg. <\/p>\n\n\n\n

Com o novo editor, voc\u00ea tem mais liberdade na hora de criar o seu conte\u00fado. <\/p>\n\n\n\n

Na aba central da p\u00e1gina, voc\u00ea ver\u00e1 o espa\u00e7o onde ficar\u00e1 todo o seu conte\u00fado. Ao lado, voc\u00ea tem acesso a algumas configura\u00e7\u00f5es, como a visibilidade da p\u00e1gina, imagem destacada e a op\u00e7\u00e3o de permitir coment\u00e1rios na p\u00e1gina. <\/p>\n\n\n\n

A nossa recomenda\u00e7\u00e3o \u00e9 que voc\u00ea habilite esta op\u00e7\u00e3o de coment\u00e1rios para a p\u00e1gina do seu blog, j\u00e1 para p\u00e1ginas institucionais, \u00e9 importante que voc\u00ea desabilite esta funcionalidade.<\/p>\n\n\n\n

Na aba central, voc\u00ea deve colocar o t\u00edtulo da p\u00e1gina do seu site e em seguida, escolher a imagem que ficar\u00e1 como imagem destacada.<\/p>\n\n\n\n

Depois de efetuar as altera\u00e7\u00f5es, \u00e9 hora de verificar como est\u00e1 a cria\u00e7\u00e3o do seu site em desktop e mobile. Para testar o mobile, clique no bot\u00e3o F12 do seu teclado, depois no desenho de celular e tablet e veja como ficar\u00e1 o seu site em outros dispositivos m\u00f3veis. <\/p>\n\n\n\n

Com a p\u00e1gina inicial criada, voc\u00ea deve voltar para o painel, passar o mouse sobre o item configura\u00e7\u00f5es e clicar em leitura. <\/p>\n\n\n\n

No item p\u00e1gina inicial, escolha aquele que leva o nome da sua p\u00e1gina inicial e salve as altera\u00e7\u00f5es. Para confirmar as altera\u00e7\u00f5es, voc\u00ea pode clicar em visitar meu site.<\/p>\n\n\n\n

Na pr\u00f3xima aula, vamos juntos construir as outras se\u00e7\u00f5es da p\u00e1gina, como card\u00e1pio e bot\u00f5es.<\/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-36913","lesson","type-lesson","status-publish","hentry","post"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/lessons\/36913","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\/36913\/revisions"}],"predecessor-version":[{"id":36941,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/lessons\/36913\/revisions\/36941"}],"wp:attachment":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/media?parent=36913"}],"wp:term":[{"taxonomy":"lesson-tag","embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/lesson-tag?post=36913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}