Criando a estrutura do site
Para começar a segunda aula, vamos conhecer algumas informações sobre a estrutura do site que vamos criar. O site é de uma empresa que realiza entregas de café em casa. Durante a pandemia, muitas empresas precisaram mudar e passaram a realizar a entrega de seus produtos em casas.
Nesta aula, você verá como criar um site simples, rápido e sem utilizar nada de código.
Na aba inicial do site, você encontra uma foto do produto e uma frase relacionada ao serviço prestado pela empresa.
Em seguida, descendo a página, você encontra um item importante: o cardápio. Depois de visualizar o cardápio, o usuário já pode fazer o pedido através de um link que direciona o cliente para o WhatsApp da empresa.
Logo depois, há um espaço disponível para colocar uma chamada para um infoproduto, como um e-book por exemplo.
Por último, o site conta com um espaço destinado às considerações finais.
O site conta, ainda, com um menu para facilitar o acesso às informações. Neste espaço, o usuário poderá ir direto para a informação que deseja acessar, sem precisar rolar a página e buscar por ela.
Outro fator importante, é que seu site também deve estar adaptado para dispositivos móveis, pois a grande maioria da população acessa a internet através de dispositivos móveis.
Para a criação deste site, nós vamos utilizar o tema e plugins disponibilizados pelo WordPress para facilitar a atualização, manutenção, garantir a segurança e ter uma boa performance. Assim, os usuários irão acessar seus conteúdos de forma mais rápida e você ficará cada vez mais bem posicionado no Google e outros mecanismos de busca.
A ideia desta aula é utilizar o mínimo de recursos possíveis para ter um site bem rápido e que possa ser feito com facilidade.
Vamos começar a customizar o nosso site em WordPress?!
O primeiro passo a ser seguido, é escolher o tema que será colocado no site. O WordPress por si só não tem uma identidade, então nós teremos que escolher um template que vai ser aplicado nele. Como fazemos isso?
Escolhendo o tema
Passe o mouse na Aba – Aparência, em seguida clique em temas. Neste ambiente, você encontrará 03 temas que já aparecem como padrão no WordPress, são eles: Twenty Seventeen, Twenty Nineteen e Twenty Twenty.
Além dos temas padrões, você pode encontrar uma infinidade de temas disponíveis no repositório oficial do WordPress. Para encontrar novos temas, você pode filtrar por categorias, mais recentes e ainda olhar quais temas são os mais populares para te ajudar nesta escolha.
Todos os temas disponíveis no repositório são gratuitos, mas existem outros sites que desenvolvem e vendem temas para WordPress.
Inclusive o tema que será utilizado na criação deste site é gratuito e se chama Twenty Twenty. Este tema foi lançado junto com a versão 5.3 do WordPress e é um tema leve, que possui uma bela identidade visual e uma boa escolha de fontes.
Para a criação de um site simples, este tema é uma ótima escolha. Ao baixar o WordPress, o tema Twenty Twenty já vem instalado, mas se você quiser optar por outro tema, basta escolher o novo tema, clicar no botão instalar e ativá-lo.
Personalizando o tema escolhido
Depois de ativar o tema, volte para aba aparência e clique em personalizar. Após carregar a página, você verá na aba esquerda todas as opções disponíveis para personalizar o tema. As opções podem variar conforme o tema escolhido.
No lado direito da página, você poderá acompanhar cada alteração feita na personalização do seu site.
O primeiro item é: identidade do site. Neste espaço, você colocará a logo e informações relacionadas ao site, como título e descrição.
Para este site, o título escolhido foi: Entrega de Café e a descrição: delivery de grãos especiais.
Em seguida, você já pode fazer o upload da logo escolhida para o seu site. Depois, é hora de colocar o ícone escolhido para o seu site. Este ícone é também conhecido como fav-icon, que fica no canto esquerdo da aba do browser. Isso ajudará o usuário a encontrar sua página quando estiver navegando na internet com várias abas abertas ao mesmo tempo.
Cores
Na aba cores, você poderá personalizar as cores do seu site. Neste projeto, a cor de fundo padrão será mantida, mas você pode optar por outra cor que se encaixe melhor na sua marca.
Modelo de cobertura
Na aba modelo de cobertura, nós vamos manter a imagem como fixa, em seguida, você pode escolher a cor de fundo do seu site. No vídeo, o vermelho tom escolhido para o site e a cor da fonte escolhida foi branca. Neste ambiente, você também pode escolher um nível de transparência para a cor do seu site.
Depois de realizar as alterações, clique no botão publicar para salvar as alterações.
Antes de continuarmos, vamos voltar para o menu configurações, aba leitura e conferir o que está ativo. Se você pretende fazer inúmeros ajustes antes de permitir que seus usuários possam ver o seu conteúdo, é importante que você deixe o item: “Evitar que os mecanismos de busca indexem este site” ativado.
Quando tudo estiver pronto e você for publicar o seu site, é 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ções.
Criando a página inicial
Para criar a página inicial, clique em páginas. Neste ambiente, você terá acesso a todas as páginas de teste do WordPress, que podem ser apagadas posteriormente.
Para este site, nós vamos criar uma página totalmente nova. Para isso, clique em “Adicionar nova” ao lado da palavra Páginas.
Na primeira vez em que você for clicar na criação de uma nova página, terá acesso a uma apresentação de boas-vindas ao novo editor de blocos do WordPress.
Desde meados de 2019, o editor do WordPress mudou. Anteriormente, o editor remetia a uma página do Word. O novo editor passou por uma revolução e leva o nome de Gutenberg.
Com o novo editor, você tem mais liberdade na hora de criar o seu conteúdo.
Na aba central da página, você verá o espaço onde ficará todo o seu conteúdo. Ao lado, você tem acesso a algumas configurações, como a visibilidade da página, imagem destacada e a opção de permitir comentários na página.
A nossa recomendação é que você habilite esta opção de comentários para a página do seu blog, já para páginas institucionais, é importante que você desabilite esta funcionalidade.
Na aba central, você deve colocar o título da página do seu site e em seguida, escolher a imagem que ficará como imagem destacada.
Depois de efetuar as alterações, é hora de verificar como está a criação do seu site em desktop e mobile. Para testar o mobile, clique no botão F12 do seu teclado, depois no desenho de celular e tablet e veja como ficará o seu site em outros dispositivos móveis.
Com a página inicial criada, você deve voltar para o painel, passar o mouse sobre o item configurações e clicar em leitura.
No item página inicial, escolha aquele que leva o nome da sua página inicial e salve as alterações. Para confirmar as alterações, você pode clicar em visitar meu site.
Na próxima aula, vamos juntos construir as outras seções da página, como cardápio e botões.