GUIA PDF - TUTORIAL 2020

Este guia é um complemento do seguinte tutorial:

https://youtu.be/9iEmQ29o13Y

Criado por Tiago Dantas | vivedanet.com

Ferramentas usadas na criação do site 
Domínio do site demo: https://sitegostoso.com

Tema do WordPress:

✅ OceanWP (link)

Construtor de páginas

✅ Elementor (link)

Hospedagem e domínio:

✅ Hostgator (link)

Recomendo a versão norte-americana do Hostgator

- Servidores mais poderosos (ficamos com o site mais rápido a nível global)
- Permite a instalação gratuita do WordPress com um clique
- Não pede dados fiscais nem burocracia no registo
- Os domínios .com são os mais reputados

» Visita o Hostgator (desconto até 62%)

      Imagens já redimensionadas (prontas a usar)

✅ Baixa aqui as imagens usadas no tutorial (link)

Sites com imagens em alta-definição grátis:

http://unsplash.com
http://pixabay.com
http://logomakr.com (só para ícones)

Ferramenta que usei para criar este guia PDF: http://canva.com

 PÁGINA INICIAL

1ª Seção (textos, vídeo e botão)

Título (H1): ELEMENTOR
Sub-título (H2): PASSO A PASSO PARA INICIANTES
Texto botão: Sobre Nós
Ícone botão: angle right
2ª Seção - Nossos Serviços

Cabeçalho (H2) - NOSSOS SERVIÇOS

1ª coluna - Marketing (H3)

Texto: Click edit button to change this text. Lorem
ipsum dolor sit amet

2ª coluna - Design (H3)

Texto: Click edit button to change this text. Lorem
ipsum dolor sit amet

3ª coluna - Gestão (H3)

Texto: Click edit button to change this text. Lorem
ipsum dolor sit amet
Os ícones usados nesta seção estão na pasta de imagens (pág. 9)
Podes encontrar mais ícones como este em: https://logomakr.com/
3ª Seção - Vídeo de Fundo + Chamado à Ação
Cabeçalho (H2): CRIA SITES INCRÍVEIS

Texto: Clique no botão de edição para alterar esse texto. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper
mattis, pulvinar dapibus leo.

Texto botão: SABER MAIS

Link do vídeo: https://youtu.be/khPwinkQ52k?t=6

4ª Seção - Portfolio

Cabeçalho (H2): ELEMENTOR

As imagens usadas nesta seção estão na pasta de imagens (pág. 9)
5ª Seção - Imagem de Fundo + Chamado à Ação

Cabeçalho (H2): ELEMENTOR

Texto: Controla o teu design. Sem códigos, sem limites.
Texto botão: SABER MAIS
6ª Seção - Formulário de Captura*

*Este elemento precisa da versão profissional do Elementor para funcionar.

✅ Aprende como instalar o Elementor Pro aqui (link)

7ª Seção - Rodapé
Texto: Copyright 2019 © Vive da Net
O menu foi criado usando o elemento "Menu de Navegação" que
pertence à versão pro do Elementor.

✅ Aprende como instalar o Elementor Pro aqui (link)

 PÁGINA SOBRE NÓS

1ª Seção - Título da Página

Cabeçalho (H1): QUEM SOMOS

 PÁGINA SOBRE NÓS

2ª Seção - Colunas de texto

Sub-título (H2): PORQUÊ A NOSSA AGÊNCIA Sub-título (H2): O QUE NOS DISTINGUE

11 176 320 Texto: Clique no botão de edição para alterar esse

Anos Clientes Projetos texto.Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet.
Texto: Clique no botão de edição para alterar
esse texto.Lorem ipsum dolor sit amet. Lorem Ícone Benefício #1: chart line
ipsum dolor sit amet. Ícone Benefício #2: bolt
Ícone Benefício #3: link
 PÁGINA SOBRE NÓS

3ª Seção - Coluna de texto + Imagem

Sub-título (H2): NOSSA MISSÃO

Sub-titulo (H3): Descreva por curtas palavras a

missão da sua empresa.

Texto: Clique no botão de edição para alterar

esse texto.Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet.
Imagem: Baixar pasta de imagens pág. 9
 PÁGINA SOBRE NÓS

4ª Seção - Imagem + Coluna de texto

Sub-título (H2): NOSSOS VALORES

Sub-título (H3): Quais são os valores da sua

empresa?

Texto: Clique no botão de edição para alterar

esse texto. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Ut elit tellus, luctus
Imagem: Baixar pasta de imagens pág. 9 nec ullamcorper mattis, pulvinar dapibus leo.
 PÁGINA SOBRE NÓS
5ª Seção - Caixas de imagem
Amanda Vaz
CEO, Fundadora
I am text block. Click edit button to change
this text. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Ut elit tellus,
luctus nec ullamcorper mattis, pulvinar
dapibus leo.
Lourenço Marques
Designer Gráfico
I am text block. Click edit button to change
this text. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Ut elit tellus,
luctus nec ullamcorper mattis, pulvinar
dapibus leo.
 PÁGINA SOBRE NÓS

6ª Seção - Rodapé (ver pág. 17)

PÁGINA SERVIÇOS

1ª Seção - Título da Página

Cabeçalho (H1): SERVIÇOS

 PÁGINA SERVIÇOS

2ª Seção - Sub-título + texto

Sub-título (H2): ESTÁ NA HORA DE AUMENTAR AS SUAS VENDAS

Texto: Clique no botão de edição para alterar esse texto.Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet.
 PÁGINA SERVIÇOS

3ª Seção (Interna) - Colunas imagem + texto

Sub-título (H3): REDES SOCIAIS Sub-título (H3): EMAIL MARKETING

Texto: Clique no botão de edição para Texto: Clique no botão de edição para
alterar esse texto. Clique no botão de edição alterar esse texto. Clique no botão de edição
para alterar esse texto. para alterar esse texto.
 PÁGINA SERVIÇOS

4ª Seção (Interna) - Colunas imagem + texto

Sub-título (H3): PRODUÇÃO DE
CONTEÚDO
Texto: Clique no botão de edição para
alterar esse texto. Clique no botão de edição
para alterar esse texto.
Sub-título (H3): TRÁFEGO
Texto: Clique no botão de edição para
alterar esse texto. Clique no botão de edição
para alterar esse texto.
 PÁGINA SERVIÇOS

5ª Seção (Interna) - Colunas de texto

Sub-título (H3): O QUE NOS DISTINGUE
Sub-título (H3): PORQÛÊ A NOSSA
AGÊNCIA
Texto: Clique no botão de edição para
alterar esse texto. Clique no botão de edição
Texto: Clique no botão de edição para
para alterar esse texto.
alterar esse texto. Clique no botão de edição
para alterar esse texto.
Ícone Benefício #1: chart line
Ícone Benefício #2: bolt
7 55 127
Ícone Benefício #3: link
Anos Clientes Projetos
 PÁGINA SERVIÇOS

6ª Seção (Interna) - Tabelas de preço*

*Estas tabelas de preço foram criadas com a versão pro do Elementor.

✅ Aprende como instalar o Elementor Pro aqui (link)

 PÁGINA PORTFOLIO

1ª Seção - Título da página

Cabeçalho (H1): PORTFOLIO
 PÁGINA PORTFOLIO
2ª Seção - Colunas (Carrossel de mídia* +
texto com botão)
*O carrossel de mídia é um elemento que
pertence à versão pro do Elementor
✅ Aprende como instalar o Elementor Pro
aqui (link)
Baixar pasta de imagens pág. 9
Texto: ESPREITE POR DENTRO DO NOSSO TRABALHO
Cabeçalho (H2): NOSSO TRABALHO
Texto: I am text block. Click edit button to change this text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus
leo.
Texto botão: CONTATO
 PÁGINA PORTFOLIO

3ª Seção - Cabeçalho + Vídeo

Cabeçalho (H2): VIVE DA NET
Link vídeo: https://youtu.be/VnoTXdkaqBU
 PÁGINA BLOG

1ª Seção - Título da Página

Cabeçalho (H1): BLOG
 PÁGINA BLOG

2ª Seção - Posts*
*Este elemento pertence à versão pro do Elementor.

✅ Aprende como instalar o Elementor Pro aqui (link)

 PÁGINA BLOG

3ª Seção - Formulário de captura*

*Este elemento precisa da versão Pro do Elementor para funcionar.

✅ Aprende como instalar o Elementor Pro aqui (link)

Exemplo artigo do Blog*
*Para criar os artigos do blog usei Elementos Call to Action, Share Buttons e Facebook Page
que pertencem ao Elementor Pro.

✅ Aprende como instalar o Elementor Pro aqui (link)

1ª Seção - Título do artigo

Título (H1): Isto é Um Post de Blog Perfeito

Informações: Tiago /// Junho 22, 2019 /// Sem Comentários
Excerto: Isto é Um Post de Blog Perfeito Nesta parte do post escreves um breve
parágrafo de 2 a 3 frases a explicar o que vais
2ª Seção - Conteúdo

Nesta parte do post escreves um breve parágrafo de 2 a 3 frases a explicar o que

vais abordar neste artigo. A introdução ajuda o visitante a perceber que está no
sítio certo.

[Imagem 1: ver pág. 9]

Sub-título (H2): Usa sub-títulos com frequência

Coloca espaços entre parárafos. Os espaços são fundamentais para facilitar a leitura.
Evitar cansar a vista do visitante com excesso de texto.

Repara que o conteúdo é estreito e não vai de uma ponta a outra da página. Isso também
vai facilitar a leitura e aumentar o tempo que o visitante passa no teu site.

Coloca imagens a cada 3 ou 4 parágrafos. Elas são importantes pois fornecem um

elemento visual ao conteúdo e tornam-no mais apelativo de ler.

[Imagem 2: ver pág. 9]

Sub-título (H2): Usa elementos visuais frequentemente como imagens e
vídeos

Podes usar também listas com pontos ou numeradas pois facilitam a leitura e compreensão
quando apresentamos a informação.

» Este design foi criado com o tema OceanWP em combinação com o construtor de
páginas Elementor.

» Os elementos campo de captura de email, comentários e botões de compartilhamento

pertecem à versão profissional do Elementor.

» Se quiseres usar elementos de design como estes aprende como instalar o Elementor
Pro no teu site WordPress aqui.

Sub-título (H3): Este é um sub-título H3, ou seja, um sub-título do sub-título H2

Os sub-títulos H3 devem ser usados quando queres aprofundar um sub-tópico H2. Essa
hierarquia de sub-títulos ajudam o robot do Google a entender o conteúdo do nosso site e a
“rankeá-lo” por ordem de importância.
[Imagem 3: ver pág. 9]

Sub-título (H3): Conclui o artigo recapitulando os pontos mais importantes do artigo

Este é um artigo modelo que segue as boas práticas de design. O design deste artigo foi
criado com o Elementor gratuito em combinação com alguns elementos da versão pro.

» Este design foi criado com o tema OceanWP em combinação com o construtor de
páginas Elementor.
» Os elementos campo de captura de email, comentários e botões de compartilhamento
pertecem à versão profissional do Elementor.

» Se quiseres usar elementos de design como estes aprende como instalar o Elementor
Pro no teu site WordPress aqui.

3ª Seção - Formulário de contato

Sub-título (H2): Gostaste do artigo?
Texto: Finalizar um artigo com um campo de captura é a melhor forma de fortalecer à relação com os
nossos visitantes e transformá-los em clientes.
Campo do formulário: Seu melhor email
Texto do botão: Subscreve
Texto legal: Ao colocar o email concorda com os nossos termos de serviço e política de privacidade.
 PÁGINA CONTATO

1ª Seção - Título da Página

Cabeçalho (H1): CONTATO
 PÁGINA CONTATO
2ª Seção - Colunas (Formulário + Texto)
Sub-título (H2): ESTAMOS PRONTOS, VAMOS Sub-título (H2): INFORMAÇÃO DE CONTATO
FALAR. Sub-título (H3): MORADA
Campo#1: Seu nome London Eye, Londres, Reino Unido
Campo#2: Seu email Lambeth, Londres SE1 7PB, UK
Campo#3: Mensagem Sub-título (H3): ENVIE UM EMAIL
Texto botão: Enviar Mensagem tiago@vivedanet.com
Sub-título (H3): LIGUE-NOS
+351 811 222 333
 PÁGINA CONTATO
3ª Seção - Colunas (Imagem + Mapa Google)
Sub-título (H2): NOSSO ESCRITÓRIO Elemento Google Maps
Imagem: Baixar imagens na pág. 9 London Eye, London, United Kingdom