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 

Tema do WordPress: ✅ OceanWP (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

Construtor de páginas ✅ Elementor (link)

» Visita o Hostgator (desconto até 62%)

Domínio do site demo: https://sitegostoso.com

      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

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

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

1ª Seção (textos, vídeo e botão)Título (H1): ELEMENTORSub-título (H2): PASSO A PASSO PARA INICIANTESTexto botão: Sobre NósÍcone botão: angle right

PÁGINA INICIAL

2ª Seção - Nossos Serviços

Cabeçalho (H2) - NOSSOS SERVIÇOS 1ª coluna - Marketing (H3)Texto: Click edit button to change this text. Loremipsum dolor sit amet 2ª coluna - Design (H3)Texto: Click edit button to change this text. Loremipsum dolor sit amet 3ª coluna - Gestão (H3)Texto: Click edit button to change this text. Loremipsum 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

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

Cabeçalho (H2): CRIA SITES INCRÍVEIS Texto: Clique no botão de edição para alterar esse texto. Lorem ipsum dolorsit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorpermattis, pulvinar dapibus leo. Texto botão: SABER MAIS

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): ELEMENTORTexto: 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" quepertence à versão pro do Elementor. ✅ Aprende como instalar o Elementor Pro aqui (link)

PÁGINA SOBRE NÓS

Cabeçalho (H1): QUEM SOMOS

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

PÁGINA SOBRE NÓS

Sub-título (H2): PORQUÊ A NOSSA AGÊNCIA 11 176 320Anos Clientes Projetos Texto: Clique no botão de edição para alteraresse texto.Lorem ipsum dolor sit amet. Loremipsum dolor sit amet.

2ª Seção - Colunas de texto

Sub-título (H2): O QUE NOS DISTINGUE Texto: Clique no botão de edição para alterar essetexto.Lorem ipsum dolor sit amet. Lorem ipsum dolorsit amet. Ícone Benefício #1: chart lineÍcone Benefício #2: boltÍcone Benefício #3: link

PÁGINA SOBRE NÓS

Sub-título (H2): NOSSA MISSÃO Sub-titulo (H3): Descreva por curtas palavras amissão da sua empresa. Texto: Clique no botão de edição para alteraresse texto.Lorem ipsum dolor sit amet. Loremipsum dolor sit amet.

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

Imagem: Baixar pasta de imagens pág. 9

PÁGINA SOBRE NÓS

Sub-título (H2): NOSSOS VALORES Sub-título (H3): Quais são os valores da suaempresa? Texto: Clique no botão de edição para alteraresse texto. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Ut elit tellus, luctusnec ullamcorper mattis, pulvinar dapibus leo.

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

Imagem: Baixar pasta de imagens pág. 9

PÁGINA SOBRE NÓS

Amanda VazCEO, 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.

5ª Seção - Caixas de imagem

Lourenço MarquesDesigner 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

Cabeçalho (H1): SERVIÇOS

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

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 sitamet. Lorem ipsum dolor sit amet.

PÁGINA SERVIÇOS

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

Sub-título (H3): REDES SOCIAIS

Texto: Clique no botão de edição paraalterar esse texto. Clique no botão de edição

para alterar esse texto.

Sub-título (H3): EMAIL MARKETING

Texto: Clique no botão de edição paraalterar esse texto. Clique no botão de edição

para alterar esse texto.

PÁGINA SERVIÇOS

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

Sub-título (H3): PRODUÇÃO DECONTEÚDO

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

alterar esse texto. Clique no botão de ediçãopara alterar esse texto.

Sub-título (H3): TRÁFEGO

Texto: Clique no botão de edição paraalterar 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): PORQÛÊ A NOSSAAGÊNCIA Texto: Clique no botão de edição paraalterar esse texto. Clique no botão de ediçãopara alterar esse texto.

7 55 127

Anos Clientes Projetos

Sub-título (H3): O QUE NOS DISTINGUE Texto: Clique no botão de edição paraalterar esse texto. Clique no botão de ediçãopara alterar esse texto. Ícone Benefício #1: chart lineÍcone Benefício #2: boltÍcone Benefício #3: link

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áginaCabeçalho (H1): PORTFOLIO

PÁGINA PORTFOLIO

2ª Seção - Colunas (Carrossel de mídia* +texto com botão)

Texto: ESPREITE POR DENTRO DO NOSSO TRABALHO Cabeçalho (H2): NOSSO TRABALHOTexto: I am text block. Click edit button to change this text.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utelit tellus, luctus nec ullamcorper mattis, pulvinar dapibusleo.Texto botão: CONTATO

Baixar pasta de imagens pág. 9

*O carrossel de mídia é um elemento quepertence à versão pro do Elementor ✅ Aprende como instalar o Elementor Proaqui (link)

PÁGINA PORTFOLIO

3ª Seção - Cabeçalho + VídeoCabeçalho (H2): VIVE DA NETLink 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*

Título (H1): Isto é Um Post de Blog PerfeitoInformações: Tiago /// Junho 22, 2019 /// Sem ComentáriosExcerto: Isto é Um Post de Blog Perfeito Nesta parte do post escreves um breveparágrafo de 2 a 3 frases a explicar o que vais

*Para criar os artigos do blog usei Elementos Call to Action, Share Buttons e Facebook Pageque pertencem ao Elementor Pro. ✅ Aprende como instalar o Elementor Pro aqui (link) 1ª Seção - Título do artigo

Nesta parte do post escreves um breve parágrafo de 2 a 3 frases a explicar o quevais abordar neste artigo. A introdução ajuda o visitante a perceber que está nosítio certo. [Imagem 1: ver pág. 9]

2ª Seção - Conteúdo

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émvai 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 umelemento 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 evídeos Podes usar também listas com pontos ou numeradas pois facilitam a leitura e compreensãoquando apresentamos a informação. » Este design foi criado com o tema OceanWP em combinação com o construtor depáginas Elementor. » Os elementos campo de captura de email, comentários e botões de compartilhamentopertecem à versão profissional do Elementor.

» Se quiseres usar elementos de design como estes aprende como instalar o ElementorPro 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. Essahierarquia 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 foicriado 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 depáginas Elementor.

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

» Os elementos campo de captura de email, comentários e botões de compartilhamentopertecem à versão profissional do Elementor.

3ª Seção - Formulário de contatoSub-título (H2): Gostaste do artigo?Texto: Finalizar um artigo com um campo de captura é a melhor forma de fortalecer à relação com osnossos visitantes e transformá-los em clientes.Campo do formulário: Seu melhor emailTexto do botão: SubscreveTexto 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áginaCabeçalho (H1): CONTATO

PÁGINA CONTATO

2ª Seção - Colunas (Formulário + Texto)Sub-título (H2): ESTAMOS PRONTOS, VAMOSFALAR.Campo#1: Seu nomeCampo#2: Seu emailCampo#3: MensagemTexto botão: Enviar Mensagem

Sub-título (H2): INFORMAÇÃO DE CONTATOSub-título (H3): MORADALondon Eye, Londres, Reino UnidoLambeth, Londres SE1 7PB, UKSub-título (H3): ENVIE UM EMAILtiago@vivedanet.comSub-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ÓRIOImagem: Baixar imagens na pág. 9

Elemento Google MapsLondon Eye, London, United Kingdom