Como Criar Um Site Profissional Sozinho [WordPress]

Aprenda como criar um site profissional sozinho no WordPress e comece o seu negócio online

Fala aí, porra!

Hoje tô de bom humor e vou soltar um conteúdo molezinha pra quem deseja montar um site e não faz ideia de como fazer.

Tem muito conteúdo de como criar um site solto por aí, isso dificulta muito na hora de colocar em prática.

Pra facilitar sua vida separei o passo a passo necessário pra criar um site foda!

Sim, foda! Porque são sites que funcionam, projetados para passar uma apresentação profissional.

Para fazer sites com design fantásticos é preciso se inspirar no melhores. Por isso, separei uma lista de site de empresas de sucesso na Internet. Se você reparar, existe um padrão de website que as grandes empresas adotam:

https://www.airbnb.com/
https://www.uber.com/
https://www.campaignmonitor.com/
https://www.udemy.com/
http://mailchimp.com/
https://www.kissmetrics.com/
http://www.skype.com
http://www.apple.com

Reparou nas semelhanças estéticas do design? Isso não é coincidência! Este design é baseado na página das melhores empresas, como a Apple e a Airbnb.

Como fazer um site completo usando o WordPress em menos de 2 horas e meia.

Comprar Nome de Domínio e Hospedagem

O domínio é o nome do seu site. O meu domínio é blogdemarketingdigital.com.br e o seu domínio será o seu-site.com. Felizmente, podemos adquirir um nome de domínio e hospedagem no mesmo lugar Hostgator.com.

Visite www.hostgator.com
Clique em Get Started Now
Clique em Choose a Plan
Escolha o Hatchling Plan (se pretender registar um site apenas) ou Baby Plan (se pretender registar mais do que um site)
Insira os seus dados
Use o cupão PLANOECONOMICO para pagar apenas $0.01

Voçê poupa e eu ganho crédito quando voçê usar o cupom PLANOECONOMICO, isso ajuda-me a fazer estes tutoriais gratuitos. Obrigado a todos o que usaram o meu cupão. Agora vamos avançar!

Passo 3

Instalar o WordPress

O HostGator vai lhe enviar um e-mail de boas-vindas com as informações de login para o cpanel. Você vai usar essas informações para instalar o WordPress através dos seguintes passos.

Clique no link do Cpanel dentro do e-mail.
Aceda com o seu nome de usuário e senha fornecidos no e-mail.
Desloque-se para software/services
Clique em QuickInstall
Clique em WordPress
Siga as instruções para instalar o WordPress
Se você acabou de comprar a hospedagem, você pode ter que esperar 2 – 24 horas até o seu site funcionar.
Vá para o seu-site.com/wp-admin para fazer login.
Faça login com o seu nome de usuário e senha.

Passo 4

Crie Seu Site

Agora começa a parte divertida! Primeiro vamos preparar o seu site, alterar a senha e de seguida vamos atualizar o WordPress.

Alterar sua senha

Clique em Usuários
Clique no seu nome
Role para baixo e digite sua senha duas vezes
Clique em Atualizar Perfil

Prepare o WordPress

Clique em Plugins
Exclua os seguintes: Jetpack, Mojo Themes e WP Super Cache

Instalar Tema

Vá a Vivedanet.com.
Clique em “Baixar Tema“
Guarde no Ambiente de Trabalho
Clique em Aparência
Clique em Tema
Clique em Adicionar Novo
Clique Upload Theme
Clique Procurar e selecione o tema do Ambiente de Trabalho
Clique Abrir
Clique Instalar
Clique Ativar

Altere as Cores do Menu Header

Passe o rato sobre o nome do site no canto superior esquerdo
Clique em Personalizar
Clique em Header Options
Clique em Header Colors
Clique em Select Color
Clique em Save and Publish

Instalar os seguintes Plugins

Page Builder por SiteOrigin
Video Background por SiteOrigin
SiteOrigin Widgets Bundle
Editor do Visual por BlackStudio TinyMCE Widget
Formulário de Contato 7
Easy Google Fonts
Lightbox Colorbox
Spacer
Title Remover

Baixe as Imagens

Leia esse artigo para baixar imagens profissionais e gratuitas para usar em seu site.

Criar a Página Principal

Crie o título

Vá a Páginas e clique em Início (o nome que daremos à página principal)
Clique no Page Builder
Faça upload do vídeo de fundo
Copie este código: INSPIRE
Cole no editor de texto do seu site
Copie este código: o mundo à sua volta
Cole no editor de texto do seu site
Copie o código do botão: <a href="https://www.youtube.com/embed/Rk6_hdRtJOE" class="popup button primary-button">Veja o Vídeo</a>
Cole no editor de texto do seu site
Copie o código para o outro botão: <a class="button secondary-button" href="/nosso-trabalho">Nosso Trabalho</a>
Cole logo ao lado do primeiro botão
Crie um Spacer de 300x
Vá ao editor visual
Selecione e centre tudo
Clique em Feito
Clique em Atualizar
Veja a Página
Volte ao Dashboard
Vá a Configurações > Google Fonts
Clique em Criar Nova Google Font
Dê o nome de Inicio Titulo
Clique em Criar Google Font
Em baixo, em CSS coloque .inicio-titulo
Clique em criar novo font control
Vá à pagina principal e clique em Personalizar
Clique Typography > Theme Typography
Em baixo de Inicio Titulo clique Edit Font e use as seguintes definições

Font Family: Roboto
Font Weight/Style: 300
Font Color: #ffffff
Font Size: 100px
Line Height 0.8
Letter Spacing 6px
Margin Top 183

Volte ao seu Dashboard
Vá a configurações > Google Fonts
Clique Criar Nova Google Font
Dê o nome de Inicio Sub
Clique Criar Google Font
Em baixo, em CSS coloque .inicio-sub
Clique em criar novo font control
Vá à página principal
Vá à pagina principal e clique em Personalizar
Clique Typography > Theme Typography
Em baixo de Inicio Sub clique Edit Font e use as seguintes definições

Font Family: Roboto
Font Weight/Style: 100
Font Color: #ffffff
Font Size: 25px
Line Height 0.8
Margin Bottom: 23px

Crie outro título para página principal (logo abaixo do vídeo de fundo)

Crie uma nova coluna de 100% no Page Builder
Clique em editar para abrir o editor visual
Clique em texto
Cole esse código de título: fazendo do mundo um melhor lugar
Clique em Atualizar
Vá a configurações > Google Fonts
Clique Criar Nova Google Font
Dê o nome de Inicio Fazendo
Clique Criar Google Font
Em baixo, em CSS coloque .inicio-fazendo
Clique em criar novo font control
Vá à página principal
Vá à pagina principal e clique em Personalizar
Clique Typography > Theme Typography
Em baixo de Inicio Fazendo clique Edit Font e use as seguintes definições

Font Family: Roboto
Font Weight/Style: 100
Font Color: #4c4c4c
Font Size: 37px
Margin Bottom: 25px

16. Clique Salvar e Publicar

Definir tipo de letra para parágrafos e títulos

Parágrafo

Vá a Personalizar
Clique Typography > Default Typography
Clique Edit Paragraph
Use as definições abaixo

Font Family: Roboto
Font Weight/Style: 300

Ainda em Default Typography use as seguintes definições para Heading 1, Heading 2 e Heading 3

Font Family: Roboto
Font Weight/Style: 100

Criar 3 Caixas em destaque

Edite a página Início
Clique em Adicionar Linha
Definir layout de linha para 3
Adicionar editor visual para cada uma das três colunas
Guarde os 3 logos para o seu Ambiente de Trabalho (encontre-os na pasta Imagens que baixou)
Copie os créditos para um documento do word, bloco de notas ou textedit
Cores usadas nos logos por ordem: # 81BADA, # FEE3D6, # 81BADA
No primeiro dos 3 editores visuais, clique em Editar
Clique em Adicionar mídia, adicione o logotipo e verifique se o tamanho ficou bom
Dê um espaço de sua manchete e realçá-lo e torná-lo H3
Em um novo tipo de linha em uma descrição
Vá para a aba de texto e cole este código: <a href="/nosso-trabalho" class="button primary-button">Nosso Trabalho</a>
Volte para o editor visual, destaque tudo e centre, de seguida clique em Feito
Repita estas etapas para cada coluna certifique-se de mudar o link e o texto do botão
Atualize a página e visualize o seu progresso maravihoso!

Adicionar botão com “chamado a ação”

Edite a página principal
Adicione uma linha
Crie duas colunas de 50%
Adicione o editor visual na primeira coluna
Clique no editor de texto e cole este código: Nosso Trabalho
Em baixo cole este código: As ações falam mais alto do que as palavras.
Adicione o texto que quiser
Clique em feito.
Adicione um editor visual na segunda coluna e clique no editor texto
Adicione um spacer de 30px
Cole os seguintes botões: <a class="button darkblue" href="/servicos">Nossos Serviços</a> <a class="button darkblue-outline" href="/nosso-trabalho">Veja-nos em Ação</a>
Adicione mais um spacer de 30px
Clique em feito
Edite a coluna
Clique em design e escolha a cor de fundo (background color) com o código: #FAFAFA
Clique em guardar e faça update ao seu site
Vá configurações > Google Fonts
Clique em criar nova google font
Dê-lhe o nome de Inicio Nosso
No CSS coloque .inicio-nosso
Guarde a nova fonte
Clique em criar nova google font
Dê o nome de Inicio As
No CSS coloque .inicio-as
Guarde a nova fonte
Vá até personalizar
Clique em Typography > Theme Typography
Debaixo de Inicio Nosso clique em Edit Font e use as seguintes definições

Font Family: Roboto
Font Weight/Style: 300
Font Color: #8bc3ed
Font Size: 35px
Line Heigh: 0.8
Margin Top: 38px

Em baixo de Inicio As use as seguintes definições

Font Family: Roboto
Font Weight/Style: 300
Font Color: #898989

Criar o Logótipo

Vá até a Logo Maker
Procure por Compass e escolha o logo correto
Mude a cor para branco
Guarde o logo no Ambiente de Trabalho
Copie os créditos para um documento
Vá até personalizar
Clique em General > Logo
Faça upload do logo, guarde e publique

Criar uma Página de Créditos

Clique em Páginas > Adicionar Nova
Escreva Créditos no título
Clique no editor texto
Cole todos os seus créditos
Adicione um link para o meu site lá ?
Coloque a página em Largura Completa
Clique em atualizar e publicar

Criar o Menu Rodapé

Clique em Aparência > Menu
Criar novo menu com o nome Rodapé
Selecionar as páginas Início, Sobre, Créditos e Contato e adicionar ao menu
Colocar as páginas na ordem desejada
Em baixo, em configurações do menu selecionar Footer
Salvar o menu

Criar a Página Sobre

Volte ao Dashboard
Clique em Páginas, selecionar página Sobre
Crie um coluna de 100% com o page builder
Adicione o editor visual
Clique no ícone com uma chave inglesa, de seguida clique em Design
Selecione a sua imagem de fundo e defina a exibição como Cover
Clique em Feito
Cole o seguinte código: A nossa missão é ajudar voçê a começar um negócio que vai mudar o mundo.
Vá até editor visual e alinhe no centro
Corte a linha em começar
Clique em Atualizar ou Plublicar
Vá até Configurações > Google Fonts e crie uma nova font control
Chame essa fonte de Sobre Titulo
Adicione CSS .sobre-titulo e guarde
Vá até Personalizar
Clique em Typography > Theme Typography
Edite Sobre Titulo
Escolha as seguintes definições:

Font Family: Roboto
Font Weight/Style: 300
Font Size: 23px
Background color: #FFFFFF
Letter Spacing: 2px
Margin Top: 174px
Margin Bottom: 316px
Padding Left: 10px
Padding Right: 10px

Guarde as alterações e veja o trabalho bonito que fez!

Criar texto adicional na página sobre

Adicione uma nova linha com 3 colunas 15% 70% 15%
Clique em guardar
Clique na coluna central e adicione o editor visual
Clique no editor Texto
Cole e copie o seguinte código: Olá, fico muito grato por poder ajudar voçê a alcançar o sucesso com este tutorial. Tudo o que eu posso dizer é,"Obrigado"!
Clique no editor Visual e centre o texto
Clique em Feito e Publique
Vá até Configurações > Google Fonts e crie um novo font control
Dê o nome Sobre Texto
Adicione o CSS .sobre-texto e guarde
Vá até Personalizar
Clique em Typography > Theme Typography
Edite Sobre Texto
Escolha as seguintes definições:

Font Family: Roboto
Font Weight/Style: 300
Font Size: 22px
Margin Top: 125px
Margin Bottom: 125px

Guarde e veja como ficou bonito!

Criar 3 caixas com imagens

Edite sua página sobre e adicione uma nova linha com 3 colunas 33 %, 33% , 33 %
Clique na chave para editar a linha, e sob a guia de layout , torná-lo largura total esticada
Adicionar editor visual na primeira coluna e editar o texto
Adicionar um spacer de 250 pixels
Em Design carregar a imagem de fundo
Faça o mesmo para todas as outras linhas
Clique em Atualizar

Criar texto final na página sobre

Adicione uma nova linha com 3 colunas 15%, 70%, 15%
Adicione um editor visual na coluna do meio
Clique em Texto
Cole este código: Que todos os seus sonhos se tornem realidade.
Clique em Feito
Clique em Update

Criar a Página Nosso Trabalho

Edite a página nosso trabalho e coloque toda a largura do modelo
Remova o título da página
Adicione uma linha com 3 colunas de 15%, 70%, 15%
Adicione um editor visual para a coluna central
Clique na chave e duplique a coluna até ficar com um total de 3
Cole no primeiro editor visual: Queremos celebrar a abundância do oceano, sua calma e paciência. Tudo flui no oceano porque ele deixa fluir.
Cole no segundo editor visual: A nossa casa é na Terra e a nossa ligação é com as pessoas. Quanto mais no ajudamos uns aos outros, melhor o mundo se torna.
Cole no terceiro editor visual: Vamos olhar para as estrelas no céu como exemplos, elas dão e dão. É por isso que o mundo gira à sua volta.
Crie uma nova linha com 100% de largura
Adicione um editor visual
Coloque um spacer 400px no editor visual
Clique na chave e duplicá-lo mais duas vezes para que haja um total de 3
Para o editor visual, onde você colocou o spacer de 400px clique na chave e edite a linha
Em Design faça upload das imagens de fundo que eu usei Medusa, Ravina & Céu Nocturno para os três fundos.
Altere a imagem de exibição de fundo para cover e clique em guardar.
Clique em Atualizar
Vá para Configurações> Google Fonts
Crie uma nova google font chamada Nosso Texto
Adicione CSS .nosso-texto
Clique em Salvar
Visite seu site e vá a personalizar
Clique Typography > Theme Typography
Edite o Nosso Texto

Use as seguintes definições

Font Family: Roboto
Font Weight/Style: 300
Font Size: 28px
Letter Spacing: 2px
Margin Top: 111px
Margin Bottom: 111px

Criar a Página Serviços

Edite a página Serviços e coloque em largura total
Remova o título da página
Adicione uma linha com duas colunas de 50%
Clique na chave e duplique até existir um total de 5 colunas
Alternando da esquerda para a direita cole o seguinte texto em cada coluna
Cole na primeira coluna na esquerda: Relaxe Quando chegar ao nosso retiro será lhe dado espaço para relaxar e apreciar a natureza e todo o ambiente ao seu redor.
Cole na segunda coluna na direita: Comece Depois da sua chegada será lhe dado um chá de ervas que irá ajudar no seu processo de reflexão.
Cole na terceira coluna na esquerda: Reflitat A próxima fase nem sempre é fácil, voçê terá de olhar para dentro e refletir, muitas vezes enfrentando emoções que já não sentia há muito tempo.
Cole na quarta coluna na direita: Alegre-se Com as suas emoções libertadas voçê irá sentir-se renovado e completo de novo, com uma calma e alegria indescritíveis.
Cole na quinta coluna na esquerda: Marque uma Visita Ligue ou mande um email para marcar um retiro de 3 dias ou para ver o nosso trabalho.
Adicione um spacer de 20px na parte debaixo desta coluna
A seguir, na coluna superior direita vá até ao editor visual e adicione um spacer de 20px
Em baixo do spacer introduza uma imagem
Faça isto no lado oposto de cada texto. Usei as imagens: Relaxe, Comece, Reflita e Alegre-se por essa ordem
Na quinta coluna, na direita adicione um spacer de 40px
Cole os seguintes botões: <a class="button darkblue" href="/contato"> Marque Aqui</a> <a class="button darkblue-outline" href="/nosso-trabalho">Veja Nosso Trabalho</a>
Clique no editor visual e centre os botões
Guarde as alterações
Clique na chave de colunas alternandas e coloque full width em Layout e a cor de fundo: #f9f9f9
Clique em Atualizar
Vá para Configurações> Google Fonts
Crie uma nova google font chamada Servicos Titulo
Adicione CSS .servicos-titulo
Clique em Salvar
Visite seu site e vá a personalizar
Clique Typography > Theme Typography
Edite o Nosso TextoUse as seguintes definições
- Font Family: Roboto
- Font Weight/Style: 100
- Font Color: #5e5e5e
- Font Size: 42px
- Margin Top: 18px
Guarde, muito bem!

Criar a Página Contato

Bem, vamos começar!

Edite a sua página Contato
Remova o título e coloque a página em largura total
Adicione uma coluna de 100%
Adicione o SiteOrigin Google Map Widget
Use as seguintes definições
- Map center: Sua Morada
- Height: 200
- Zoom to scroll: Uncheck
Adicionar uma nova coluna de 100%
Coloque um editor visual
No topo do editor coloque um spacer de 10px e adicione o seu E-mail, Contato e Morada
Adicione uma linha e um spacer de 10px debaixo
Do lado esquerdo do seu dashboard clique em Form contato
Copie o Shordcode
Volte à página Contato e cole o shortcode abaixo do spacer
Clique em Feito
Atualize a sua página, parabéns!

Polindo o seu Site

Criando os Botões de Navegação

Vá a Aparênca > Lightbox Plus Colorbox
Em baixo de General clique em Use Secondary Lightbox
Role para baixo na página até Secondary Lightbox Settings
Use as seguintes definições:

Elastic
300
90%
Width: 80%
Height:80%
Max Width: 90%
Max Height: 90%
Secondary Class Name: popup

Clique em Save all Settings
Vá a Personalizar > Header Options > Header Right Block Content
Certifique-se que o botão está selecionado
Cole o seguinte código: <a href="https://www.youtube.com/embed/Rk6_hdRtJOE" class="popup button primary-button">Veja o Vídeo</a> <a href="/nosso-trabalho" class="button secondary-button">Nosso Trabalho</a>
Clique em Salvar e Publicar