Configurando o Layout no Wordpress

Antes de voltarmos a mexer no wordpress, vamos primeiro terminar a instalação do certificado SSL do nosso servidor.

Acesse: https://dash.infinityfree.com/accounts

1- Após acessar a conta na hospedagem com o email e a senha que usamos para cria-la, clique no menu a opção de "Free SSL certificate" conforme mostra a imagem abaixo:

2- Como na outra aula já criamos o nosso pedido do certificado SSL, irá aparecer a opção de gerencia-lo "Manage" clique nessa opção.

3- Agora clique em "Install SSL Certificate Automatilly" conforme mostra a imagem abaixo:

4- Se deu tudo certo, vai aparecer essa mensagem da imagem abaixo, informando que o certificado está sendo configurado "The SSL certificate has been installed! It may take up to 15 minutes for it to become active."

Indo para o Wordpress

Pronto essa parte já foi resolvida, agora vamos voltar a configurar o Wordpress, para chegar até ao painel de administração siga os passos abaixo:

1- No menu principal clique em "Accounts".

2- Depois clique no link da sua conta conforme mostra a imagem

3- Agora vamos seguir para a instalação do site, para isso é preciso clicar nesse botão, que irá nos direcionar para a página onde o site foi instalado e lá teremos as informações de acesso.

4- Irá aparecer essa informação dizendo que existe 1 instalação, clique nela para que possamos visualizar o acesso ao painel de administração do wordpress.

5- Agora vamos clicar "ícone do wordpress" para abrir as informações do site

6- Agora clique em "Login" para ser direcionado ao painel do seu site:

Painel de administração do Wordpress

Agora vamos verificar se o tema já está instalado e ativado, para fazer isso siga as instruções abaixo:

1- Clique em "Aparência"

2- Agora clique em "Temas"

3- Se o tema já estiver instalado clique em "Ativar", mas se já estiver ativo, não precisa fazer nada, pode pular essa etapa.

4- Agora vamos partir para instalação do plugin que vai nos ajudar a criar o layout do site, para isso passe o mouse na opção de"Plugin" no menu lateral.

5- Vai aparecer a opção de "Adicionar plugin" clique nessa opção.

6- Na pesquisa digite "Elementor" esse será o plugin que vamos instalar

7- Quando o plugin "Elementor" aparecer clique em "Instalar" conforme mostra a imagem abaixo

8- Após o plugin terminar a instalação, clique em "Ativar"

9- Vai aparecer essa página, clique no X para fecha-la

Agora clique nesse link para baixar o Elementor Pro

10- Agora vai em "Adicionar Plugin"

11- Clique em "Enviar Plugin"

12- Clique em "Escolher arquivo"

13- Vai até onde você salvou o arquivo que foi baixado com o link acima

14- Clique em "Abrir"

15- Agora que o arquivo já está pronto para ser instalado, clique em "Instalar agora"

16- Pronto o arquivo já foi instalado, agora precisamos ativa-lo, para isso clique em "Ativar Plugin"

Criando a página Home (principal)

1- Para publicarmos a nossa primeira página, precisamos clicar em "Páginas"

2- Seremos direcionado para área de páginas no wordpress, lá você vai ver que já tem 2 páginas criadas, elas são criadas quando instalamos o wordpress, vamos deixa-las quietas, não precisa mexer nela. Clique no botão logo acima "Adicionar nova página"

3- Agora temos que dar um nome para a nossa página, e como será a nossa página principal, normalmente ela é chamada de "Home", é só digitar onde está sendo demonstrado na imagem abaixo.

4- Para que esse nome seja gravado e a página criada, clique no botão "Publicar"

5- Agora que a página já está publicada vamos edita-la com o Elementor

6- Agora precisamos fazer uma configuração no layout da página, vai até o final da página e localize a engrenagem e clique nela.

7- Ao lado escolha a opção de "Elementor largura total" conforme monstra a imagem abaixo

8- Sempre que fizer alguma alteração no layout da página, clique em "Atualizar" para poder salva-la.

9- Nesse bloco é onde você vai começar a criar sua página, clique no sinal de "positivo" + para abrir as opções de layout da página.

10- Escolha um layout de sua preferência, eu recomendo esse que está sendo indicado pela seta, pois irá ficar igual ao modelo que estou disponibilizando abaixo. Mas fique à vontade para escolher.

Aqui eu demonstro um layout de exemplo da primeira página, que vamos criar, se seguir esse passo a passo que estou fazendo.

11- Nesse campo você irá colocar o bloco da imagem, é só clicar no bloco no lado esquerdo e arrastar até onde ficará a imagem, de acordo com o modelo.

12- Nessa outro campo é onde vai ficar o título, seguindo a mesma orientação acima, é só clicar e arrastar até o local indicado.

13 - Nessa campo ficará uma pequena descrição sobre você ou sobre o seu blog, uma descrição de apresentação do seu site.

14- Mais abaixo, mas no mesmo bloco, você colocará um botão, onde irá adicionar um link, que levará o visitante a página do "sobre nós" (essa página ainda será criada mais para frente).

15- Para colocar a imagem, você vai clicar em cima do bloco onde você colocou para ser a imagem, e irá abrir uma caixa de diálogo igual da imagem abaixo. Clique na opção de "Escolher imagem" para poder colocar uma imagem na sua página.

16 - Vai abrir um pop-up de comunicação, indicando algumas opções de importar uma imagem para o seu site, escolha a opção de "Enviar arquivos" como demonstrado abaixo.

17- Agora clique em "Selecionar arquivos" conforme demonstrado abaixo.

18- Você será direcionado as pastas do computador que você está usando para escolher a sua imagem. Clique na imagem escolhida e depois em "Abrir", para poder importar a sua imagem do seu computador para o sistema do wordpress.

18- Depois que sua imagem foi totalmente importada, ela ficará igual como a da figura abaixo, agora é só clicar em "Selecionar" e sua imagem será adicionada a sua página.

19- Nesse momento você já está com a imagem na sua página, agora vamos adicionar um título para sua primeira página, nesse modelo abaixo eu coloquei como título a frase "Meu nome é Wilian Sales", mas fique à vontade de criar o seu melhor título.

20- Aqui você pode adicionar um link para o seu título, que ao ser clicado será direcionado para esse link que você adicionar.

21- Nessa parte você pode escolher o tamanho que você quer apresentar o seu título, por padrão vem H2.

22- Nessa aba "Estilo" é onde você pode modificar o estilo da sua página, colocando cor de fundo, trocar a cor da letra, centralizar, etc...

23- Aqui eu demonstrei como centralizar o título

24 - Nessa parte da descrição funciona parecido com a do título, sendo que aqui eu vou adicionar mais palavras, vou criar um breve descrição do meu blog, contar um pouco sobre mim, mas nada que seja muito longo, pois aqui é só a primeira página do seu site, para uma descrição mais detalhada o indicado é colocar na página específica para esse fim, ou seja, a página "sobre o site", que ainda será criada.

25- seguindo essa mesma linha de raciocínio, vamos criar o nosso botão, clicando no "bloco do botão" que foi adicionado em seu layout, para abrir essa caixa de diálogo igual da figura abaixo. Onde será adicionado um "texto de chamada", como "Saiba mais", "Leia mais", etc...

26 - Aqui nessa caixa é onde você colocará o link do botão, para quando ele for clicado ser direcionado para esse link, nesse caso aqui, irei colocar da minha página (que ainda irei criar) onde irá trazer informações sobre o site.

27 - Aqui eu demonstro que, sempre que você finalizar qualquer procedimento dentro dos blocos, clique nesses "quadradinhos", que assim você irá voltar para o layout da página onde aparecerá as opções dos blocos para serem adicionados nesse layout.

28 - Sempre que fizer qualquer alteração na sua página, atualize sempre, para que essas atualizações possam ficar disponíveis em seu site.

29- Agora vamos sair dessa parte do layout e vamos para outra parte, para adicionar algumas configurações necessária no site.

30 - Após clicar onde foi indicado na figura anterior, irá abrir essas opções, clique em "Configurações do Site".

31- Aqui nessa área, você tem algumas opções para alterar o layout do seu site, pode colocar um pano de fundo, alterar o layout e outras configurações, mas agora clique só em "Identidade do site". Depois poderemos ver outros detalhes.

32- Irá aparecer as opções abaixo e a primeira que você pode alterar é o "Nome do site"

33- Abaixo você pode criar uma pequena descrição do site, nas muito extenso.

34 - Nessa outra etapa você irá adicionar a Logo do site, para isso é importante você já ter criado a sua logo, no formato de PNG, de preferência com o fundo transparente e na posição horizontal (para se encaixar melhor no topo do site junto com o menu).

35- Aqui você irá adicionar o Favicon, é aquela imagem pequenina que fica lá no alto do navegador ao lado do domínio do seu site.

36- Feito tudo isso clique em "Atualizar".

37- Depois de ter atualizado as configurações, clique lá no alto para sair dessa parte das configurações.