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 totalmentepara o seu site.
Etapa 1 – Comprar nome de domínio e alojamento web
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ção3. Registe o seu novo nome de domínio
Etapa 2 – Instalar o WordPress
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 login3. 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 proeminente3. 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 cores2. Altere as cores que aparecem no seu seleccionadorAgora 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
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 painel3. Em aparência, vá para os menus.4. Crie um novo menu5. 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 menuSe 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 – Concluiu o seu site!
Espero que tenha conseguido acompanhar e criar o seu próprio site. Gostaria de receber os seus comentários sobre o uso desse método de modelo para criar um site de uma página mais rapidamente.