Como Usar o Elementor no WordPress: Instalação Passo a Passo

Neste vídeo, você aprenderá como criar e usar o Elementor num site WordPress completamento do zero, passo a passo, do início ao fim.

Existem muitos vídeos explicando como criar um site WordPress.

O que torna este único é que eu lhe mostro um método infalível para criar um site realmente bonito.

Esse é um ponto que muitas vezes é esquecido pelas pessoas que começam e criam seu primeiro site.

Vamos fazer isso sem codificação e sem a ajuda de um web designer.

Vou mostrar como utilizar os modelos personalizáveis da Elementor para criar uma estrutura bonita e personalizá-la totalmente
para o seu site.

Etapa 1 - Comprar nome de domínio e alojamento web

siteground website

A primeira coisa que você fará é comprar um nome de domínio e o respectivo alojamento web.

Eles serão usados como morada virtual na internet e que você criará.

A maioria dos artigos recomenda serviços de alojamento por meio de links afiliados.

Isso não é muito objectivo ...

Ele não fornece uma indicação verdadeira se a empresa de alojamento é realmente boa ou simplesmente recebeu a recomendação por razões de afiliação.

Neste guia, no entanto, eu recomendo o SiteGround.

Esta recomendação é dada porque eu realmente acredito que o SiteGround é uma empresa de alojamento excelente e confiável.

O SiteGround pode não ser o mais barato, mas quando se trata de alojamento, escolher a empresa mais barata não é algo que eu recomendaria.

O SiteGround é uma óptima opção por causa do seu suporte e serviço, confiáveis e de reputação.

Outro motivo para escolher essa empresa é porque a equipe de suporte trabalha em estreita colaboração com a nossa, assim você é coberto em termos de uso do Elementor.

Compre o domínio e alojamento no SiteGround

1. Visite o SiteGround (o link inclui uma oferta Elementor especial de até 70% de desconto)

2. Em alojamento na web, clique em alojamento partilhado. Existem vários planos no SiteGround. Escolha o plano de inicialização

3. Registe o seu novo nome de domínio

Etapa 2 - Instalar o WordPress

instalar o wordpress no cpanel

Agora que você comprou o domínio e o alojamento, pode fazer login no SiteGround e instalar o WordPress, através do instalador automático.

1. Digite o nome de usuário e a senha para efectuar login.

2. Vá para 'Minha conta' e depois vá para o cPanel. O cPanel é onde você gere o seu site e o seu domínio.

3. Clique no instalador automático do WordPress e conclua a instalação.

Após a conclusão da instalação, você deve esperar entre 24 e 48 horas para que o registro e a hospedagem do domínio sejam processados.

Então, se você acessar o URL do seu domínio, deverá ver a instalação padrão do WordPress. O tema padrão que é instalado é TwentySeventeen .

Etapa 3 - Instalar o tema & Elementor

Para personalizar completamente o design do seu site, você precisará instalar um construtor de temas e páginas gratuito.

Instalar tema

1. Vá para o administrador do WordPress. Para fazer isso, após o nome do domínio, digite '/ wp-admin'. Isso direcciona para a página de login padrão do WordPress.

2. Aqui, digite seu endereço de e-mail e senha para fazer login

3. Baixe o tema Hestia GRÁTIS da ThemeIsle.

4. De volta ao seu painel do WordPress, vá para Aparência> Temas.

5. Clique em Adicionar um novo tema.

6. Clique em 'escolher arquivo' e faça o upload do arquivo zip do Hestia. Em seguida, instale e active-o.

Para ver como o novo tema afectou o seu site, visite a página inicial do site novamente.

Instalar o construtor de páginas

Agora é hora de instalar o Elementor Page Builder. Este é um construtor de páginas gratuito e visual com toneladas de recursos úteis de design.

1. De volta ao painel, acesse Plugins.

2. Clique em 'Adicionar novo'

3. Procure Elementor, instale e ative-o

Etapa 4 - Adicionar modelo

O Elementor permite adicionar um modelo de design de página profissional completo com um clique, usando a biblioteca de modelos.

1. Clique em 'Página'> 'Adicionar novo'

2. Digite o título da página e clique no botão Editar com Elementor. Aqui, você pode ver o painel do editor, onde é possível projectar e visualizar o site ao mesmo tempo.

3. Para se livrar desse cabeçalho que você obtém do tema, vá para as configurações da página e escolha um modelo de largura total do construtor de páginas.

4. Clique em: 'Adicionar modelo'. Agora, escolha na longa lista de mais de 100 modelos de página , disponíveis no construtor de páginas Elementor. Clique em 'Inserir'.

Você pode revisar todas as secções que obtém: a secção de heróis, nossa secção de visão, nossas realizações, a secção 'Sobre nós', uma cotação, entre em contacto connosco e um carrossel de logótipos.

Vamos personalizar cada parte desta página, para torná-la completamente diferente e única.

Etapa 5 - Personalizar o modelo

Comece a projectar e alterar as diferentes partes da página.

Eu recomendo ir secção por secção, começando com a secção superior.

1. Altere a imagem de fundo. Você deve primeiro descobrir a largura e a altura exactas da imagem e usar esse tamanho para criar a nova imagem. Você pode usar uma ferramenta gratuita como o Pixlr para cortar e redimensionar a imagem.

2. Adicione uma sobreposição de plano de fundo, para que o cabeçalho fique mais proeminente

3. Outros elementos que você pode personalizar incluem títulos, texto, ícones, imagens e botões.

Alterar cores e tipografia

Você pode personalizar as cores e a tipografia da página.

Para tornar sua paleta de cores mais acessível, você deve personalizar o selector de cores que aparece no editor.

A alteração do selector de cores facilita a personalização das cores da página na sua paleta de cores:

1. Clique no ícone do hambúrguer e vá para o selector de cores

2. Altere as cores que aparecem no seu seleccionador

Agora você pode percorrer a página e alterar as cores para se ajustarem às cores do site.

A alteração das fontes é feita da mesma maneira fácil:

1. Sob o cabeçalho> estilo> família, escolha uma fonte, na grande variedade de fontes do Google.

2. Faça o mesmo com o restante dos títulos

Etapa 6 - Adicionar o menu

Adicionar Menu

Com sua página totalmente personalizada, você precisa voltar ao painel do WordPress e criar um menu de movimento suave.

Este menu permitirá que o visitante navegue por toda a página.

Quando o visitante clica em um link no menu, o cursor rola suavemente para a área direita da página.

1. Nomeie as diferentes áreas da página. Na secção Sobre, vá para a secção> avançado e, em 'CSS ID', escreva 'about'. O mesmo deve ser feito nas secções de serviços, depoimentos e contactos.

2. Volte para o painel

3. Em aparência, vá para os menus.

4. Crie um novo menu

5. Defina-o como menu principal. Dessa forma, ele estará disponível na parte superior do menu na página que estamos usando e no restante do site.

6. Adicione alguns links personalizados. O primeiro a adicionar é #about. É o mesmo nome que usamos em nossa área. E o texto do link será "Sobre". Faça o mesmo com #services, #testimonial e #contact.

7. Salve o menu

Se você actualizar a página, verá o menu e poderá clicar em um link e pode deslizar suavemente para a secção relevante.

Etapa 7 - Torne o site móvel responsivo

Na última parte do tutorial, você tornará o site inteiro responsivo a dispositivos móveis .

1. Para aceder à visualização móvel, clique no ícone da área de trabalho no canto inferior esquerdo e escolha móvel.

2. Agora, vá para a página e veja se consegue identificar áreas que poderiam ser melhoradas, como reverter a ordem das colunas ou adicionar preenchimento às manchetes.

Concluir o site

Já está quase terminando...

1. Em "Configurações da página", mude o status para publicado.

2. Volte ao painel do WordPress e defina esta página como a página inicial. Vá para Configurações> Leitura e defina uma página estática

Parabéns - Você concluiu seu site!

Espero que você tenha conseguido acompanhar e criar seu próprio site. Gostaria de receber seus comentários sobre o uso desse método de modelo para criar um site de uma página mais rapidamente.