Tudo Sobre Hospedagem de Sites

Como criar um site WordPress em 4 passos (atualizado 2023)

Como criar um site WordPress

Ter um site é uma das ações mais importantes para qualquer pessoa que deseja empreender na internet. Felizmente, é muito fácil criar um site hoje em dia, graças à infinidade de ferramentas disponíveis. E se você chegou aqui com o objetivo de montar o seu próprio site, veio ao lugar certo. Neste artigo, vamos ver como criar um site WordPress, executando 4 passos fundamentais.

O WordPress é uma plataforma para criação de sites, blogs e lojas virtuais (e o que mais a sua criatividade permitir), que está presente em quase 40% dos sites em todo o mundo, segundo o W3Techs. E o melhor: na modalidade instalada, é uma plataforma gratuita e muito completa, o que talvez explique sua enorme popularidade.

Neste tutorial, você verá que qualquer pessoa com vontade pode construir e publicar o seu próprio site — começando do zero e sem ter conhecimentos técnicos.

O que esperar deste tutorial

Ao final do artigo você deverá ser capaz de criar um site WordPress profissional (clique para navegar na versão demo), que além de bonito é responsivo, ou seja, se adapta às telas de dispositivos móveis, como smartphones e tablets.

A aparência do site que vamos construir será semelhante à imagem abaixo. Mas a ideia é que você customize o seu site, deixando-o com a sua cara. 😉

Visão da página inicial do site de demonstração após as customizações

Visitar site demo

Antes de começar, é importante saber que vamos usar a versão instalada do WordPress, isto é, a versão que podemos instalar gratuitamente em qualquer hospedagem de sites. Esta é a versão que oferece maior flexibilidade pelo menor preço. Seu repositório oficial está localizado em wordpress.org, mas a maioria das empresas de hospedagem oferece a instalação automática do WordPress.

Muita gente confunde o WordPress instalado (.org) com a versão hospedada, disponível em WordPress.com. Essa última é uma plataforma que oferece o WordPress como serviço, de maneira similar às hospedagens especializadas em WordPress. Nesse caso, o WordPress já vem instalado por padrão e todas as atualizações de versão, bem como temas e plugins, ficam a cargo da empresa que fornece o serviço. Esse modelo de hospedagem WordPress é bem conveniente para aqueles que não desejam se preocupar com os aspectos técnicos, no entanto, pode sair um pouco mais cara.

O WordPress.com também oferece uma versão gratuita (e mais limitada), para quem está começando. Para usar o serviço WordPress.com e seguir este tutorial, é necessário obter o plano WordPress Pro, pois é o único que aceita a instalação de temas e plugins de terceiros.

Se você deseja saber mais sobre esse tipo de solução, leia nosso artigo sobre o WordPress.com.

Como criar um site WordPress

Para chegar ao resultado final, que é criar um site WordPress, passaremos por 4 etapas, que são:

  1. Registrar um domínio
  2. Contratar um provedor de hospedagem
  3. Instalar o WordPress
  4. Configurar o site WordPress

A última etapa, de configuração, é que daremos mais atenção, pois é justamente a mais trabalhosa. Apesar disso, é nesta etapa que deixaremos o site WordPress completamente personalizado.

Como bônus, também veremos como instalar e configurar um certificado de segurança SSL, que permite usar o protocolo HTTPS e exibir um cadeado 🔒 na barra de endereços do navegador. Além da segurança, o SSL também contribui para um melhor posicionamento nos mecanismos de busca.

Antes de iniciarmos, vamos conhecer alguns conceitos básicos sobre o funcionamento de um site. Vamos lá:

Agora que já entendemos o básico, vamos criar um site WordPress na prática?

Passo 1 – Registrar um domínio

O registro de um domínio terminado em .com.br custa a partir de R$ 40 por ano. Se você gosta de praticidade, pode registrar o domínio na mesma empresa que pretende hospedar seu site, assim não irá se preocupar com configurações extras. Se prefere liberdade (e um preço de renovação mais em conta), pode utilizar o Registro.br, entidade brasileira responsável pelos domínios .br. Se precisar de ajuda, confira nosso artigo que explica o passo a passo de como registrar um domínio.

Neste tutorial, vamos fazer o registro do domínio e a contratação da hospedagem no mesmo lugar, por uma questão de praticidade. No entanto, você pode registrar o seu domínio em qualquer empresa que desejar (veja aqui uma seleção das empresas de registro de domínio com os melhores preços).

Ao contratar uma hospedagem, normalmente o registro do domínio pode ser feito na mesma compra, o que facilita bastante as coisas. Por isso, vamos passar para o segundo passo de criação do site WordPress. Nele veremos como registrar o domínio junto com a hospedagem.

Passo 2 – Contratar uma hospedagem

Para criar um site WordPress utilizando a versão instalada e gratuita da ferramenta, é necessário ter um plano de hospedagem de sites. Se você não sabe qual plano escolher e se trata de um site novo, minha sugestão é que use um plano de hospedagem compartilhada. Este tipo de plano atende à maioria dos sites da internet é a modalidade mais barata (para ver ótimas opções de hospedagem compartilhada, consulte este ranking).

Neste tutorial, vamos utilizar a hospedagem compartilhada da HostGator, com o plano inicial (P), que é suficiente para hospedar 1 site (leia aqui nosso review sobre a HostGator). A hospedagem da HostGator tem um excelente custo-benefício e oferece compatibilidade total com o WordPress, incluindo a instalação automática da plataforma, como veremos adiante. Caso queira contratar a HostGator, aproveite este link promocional com desconto extra, oferecido aos nossos leitores.

É importante deixar claro que o mesmo processo pode ser realizado em qualquer outra empresa de hospedagem que ofereça suporte ao WordPress. Ou ainda em um plano específico para WordPress (geralmente mais caro). Neste caso, se você possui outra hospedagem, pode seguir os passos descritos aqui da mesma forma, atentando-se apenas quanto à instalação do WordPress, que se difere em outras hospedagens.

No caso da HostGator, a contratação envolve acessar a página da hospedagem e escolher um plano (se for apenas 1 site, pode ser o plano P).

Planos de hospedagem da HostGator

No carrinho de compras, insira o domínio que pretende registrar (se for o caso) e conclua a compra. Repare que, a partir do ciclo de pagamento anual, o domínio é grátis no primeiro ano. Caso já tenha um domínio, marque a opção “Vou usar um domínio que já tenho”.

Carrinho de compras HostGator, com o campo para registro do domínio

Preencha os demais campos de cadastro e finalize a contratação. Para ver em detalhes os passos de contratação, veja o artigo como contratar uma hospedagem na HostGator.

Após a confirmação do pagamento, você receberá um e-mail de boas-vindas da empresa, contendo os dados de acesso ao painel de controle de sua hospedagem.

Se você já registrou o domínio e contratou um plano de hospedagem, então estamos com tudo pronto para prosseguir e criar um site WordPress.

Passo 3 – Instalar o WordPress

Para instalar o WordPress na HostGator, você precisa acessar o painel de controle cPanel da hospedagem. Os dados de acesso são enviados por e-mail no momento de ativação do serviço. É possível acessar o cPanel diretamente pelo painel financeiro, como mostra a imagem abaixo:

Link de acesso ao cPanel no painel do cliente

Importante: caso você tenha registrado um domínio novo na empresa de hospedagem, ele poderá demorar até 24 horas para estar em pleno funcionamento. Se esse for o seu caso, aguarde o período de propagação do domínio para continuar este tutorial de como criar um site WordPress.

Uma vez dentro do painel cPanel (ou outro painel, se estiver usando outra empresa), localize o instalador do WordPress. No caso da HostGator, procure por Softaculous na área de softwares do cPanel.

Link para o Softaculous, no painel cPanel da HostGator

O WordPress é uma das primeiras opções dentro do Softaculous.

Lista de softwares para instalação no Softaculous, com o WordPress em destaque

Ao abrir o Softaculous, passe o mouse sobre o ícone do WordPress e clique em Install.

Na tela de instalação, preencha o formulário com as informações desejadas para o seu WordPress. Para ver em detalhes o significado de cada campo, acesse este tutorial de instalação do WordPress na HostGator.

Importante: No momento da instalação do WordPress, se você já possui um certificado SSL instalado, use a versão HTTPS do endereço do site (ex.: https://meusite.com). Caso ainda não tenha um e queira utilizar (o que é o ideal), veja como obter o SSL no final do artigo. Recomendo que faça isso antes de prosseguir com a instalação do WordPress.

Na etapa final do processo, você pode informar o seu e-mail, para ser avisado quando a instalação estiver concluída.

Depois de clicar em Install, o WordPress será instalado, em um processo que não leva mais do que alguns segundos. Uma tela de confirmação será exibida, incluindo o endereço de acesso ao painel do seu WordPress.

Tela de conclusão da instalação do WordPress usando o Softaculous

Agora você já possui um domínio, uma hospedagem e o WordPress instalado. Falta pouco para finalmente criar um site WordPress. Podemos, portanto, passar para o próximo (e melhor) passo: a personalização do seu site WordPress.

Passo 4 – Criar o site WordPress

Usando os dados de acesso fornecidos, acesse o painel de administração do WordPress no endereço indicado na etapa anterior. O endereço deve ser algo como https://meusite.com.br/wp-admin/. Você verá a tela de login do WordPress.

Tela de login padrão do WordPress

Insira o login e a senha do painel de administração, que você criou no momento de instalação. Ao acessar o painel, você verá uma tela parecida com esta:

Tela inicial do painel de administração do WordPress

Alterando o idioma para Português do Brasil

É comum que a instalação automática venha configurada em outro idioma na hora de criar um site WordPress. Já aconteceu do painel vir em inglês ou em Português de Portugal.

Felizmente a alteração de idioma no WordPress é muito fácil. Para isso, no menu lateral, vá em Settings/Configurações, depois altere o item Site Language para Português do Brasil. Modifique também nesta página as configurações de data e hora. Ao final das alterações, clique em Save Changes.

Instalando um novo tema

Para criar um site WordPress personalizado, precisaremos de um tema diferente do que vem instalado por padrão. O tema é o elemento que fornece o visual — o layout — do seu site. Ao instalar um novo tema, pode-se alterar radicalmente a aparência do site.

Neste tutorial, escolhemos utilizar o tema Hestia. Trata-se de um tema gratuito, responsivo e que pode ser customizado de muitas formas.

O tema Hestia está disponível na biblioteca do WordPress, o que facilita muito a sua instalação. Para isso, dentro do painel de administração do WordPress, vá em Aparência -> Temas e clique em Adicionar novo.

Área de administração da aparência do site WordPress, dentro do painel

Na tela seguinte, clique no campo de busca e escreva Hestia. O tema será exibido como o único resultado.

Insira o nome do tema no campo de buscas

Passe o mouse sobre o tema e clique em Instalar.

Botão para instalação do tema no painel do WordPress

Após a instalação, clique em Ativar para colocar o tema em funcionamento. Após a ativação do tema, a opção de importar conteúdo de marcação será exibida na tela. Esta pode ser uma ótima maneira de começar a customizar seu tema, especialmente se você estiver construindo um site novo. Para importar o conteúdo de marcação, clique no botão Importar conteúdo de demonstração.

Após a instalação do tema Hestia, a opção de importação de conteúdo é exibida na tela

Ao clicar no botão de importação, você será direcionado para uma página de opções de importação. Por padrão, alguns campos vêm marcados, incluindo a instalação de alguns plugins. Deixe todos os campos como estão e clique em Import.

Tela inicial de importação de conteúdo de marcação do tema Hestia

A importação é bem rápida. Assim que a mesma é finalizada, a tela de conclusão é exibida. Para visualizar o estado atual do seu site WordPress, clique no botão View Website.

Após o término da importação de conteúdo, você pode visualizar o estado atual do site

Você verá a página inicial do seu site, que provavelmente será parecida com esta:

Página inicial do site após a importação do conteúdo de marcação

A partir desse momento, você já pode começar a personalizar o seu site para deixá-lo com a aparência que desejar. Vamos, portanto, customizar os principais aspectos do tema e entender como criar um site WordPress único.

Elementos da página inicial

Um dos pontos interessantes do conteúdo de marcação do tema Hestia é que a página inicial vem pré-carregada com diversas seções, que podem ou não ser aproveitadas para o seu site. Logo abaixo do destaque principal, há uma área de destaque com 3 colunas.

Conteúdo de demonstração do tema Hestia

Adiante, há uma seção apresentando a equipe, que pode ser perfeitamente adaptada para você ou para sua empresa.

Conteúdo de demonstração do tema Hestia

Em seguida, há uma chamada para a newsletter e uma área de depoimentos de clientes.

Conteúdo de demonstração do tema Hestia

Posts do blog também são carregados automaticamente na página inicial. O post “Hello World” está presente em qualquer nova instalação do WordPress e é apenas um exemplo de post. Os demais foram inseridos pelo Hestia durante a importação do conteúdo de marcação.

Conteúdo de demonstração do tema Hestia

Por último, na base da página inicial, está presente um formulário de contato e as informações de contato, como endereço e telefone.

Conteúdo de demonstração do tema Hestia

Como podemos ver, o site fica com uma aparência bastante genérica após a importação do conteúdo de marcação. Apesar disso, é interessante ver que a página inicial é robusta e pode ser adaptada para uma série de finalidades.

Vamos então customizar completamente a página inicial para que ela fique com a aparência da nossa empresa fictícia. Para facilitar nossa empreitada de criar um site WordPress, inventaremos uma empresa fictícia e a batizaremos de Foto Criativa. Em nossa imaginação, esta empresa produz e comercializa fotos não convencionais, que podem ser criadas ao gosto do cliente. Como exemplos de fotos criativas, usaremos as que estão disponíveis no acervo do site Gratisography.

Vamos lá?

Editando a aparência da página inicial

Como primeiro passo, vamos remover alguns elementos da página inicial, deixando apenas o necessário para a divulgação da nossa empresa fictícia, a Foto Criativa.

O WordPress possui uma funcionalidade de customização que permite editar visualmente os elementos de uma página. Esse recurso é muito comum nos criadores de sites e, no caso do WordPress, as capacidades de edição podem ser maiores ou menores, dependendo do tema escolhido. Felizmente, o tema Hestia oferece muitas possibilidades de customização da aparência do site no modo de personalização visual.

Para começar a editar a aparência, estando na página desejada do site, basta clicar no botão Personalizar, na barra superior do WordPress.

A personalização visual do WordPress pode ser ativada em qualquer página do site

Outra maneira de chegar ao mesmo modo de personalização da aparência é por dentro do painel de administração, clicando no menu lateral em Aparência e depois Personalizar.

A personalização visual também pode ser alcançada por dentro do painel de administração do WordPress

Após ativar a personalização, você verá a página inicial com as opções de edição de elementos destacadas e um menu lateral de personalização.

Modo de personalização visual do WordPress

Editando a seção de destaque da página inicial

Para editar qualquer elemento basta clicar no ícone de lápis próximo ao mesmo. É o que vamos fazer agora para editar os textos de destaque. Ao clicar no ícone do elemento, o menu lateral abre as opções de edição correspondentes.

Para editar um texto, basta clicar no ícone de lápis próximo ao elemento

Para editar o conteúdo, basta substituir o texto de marcação pelo desejado. Também é possível editar o texto e o link do botão. Além disso, a imagem de fundo deste painel também pode ser editada nesta tela, e é o que faremos em seguida.

Para alterar a imagem de fundo, clique no botão Mudar imagem e faça o upload da imagem desejada. Você pode ver o resultado imediatamente após o upload da imagem. Para publicar a alteração no site, basta clicar no botão Publicar. Se você desejar continuar editando os demais elementos, pode simplesmente prosseguir com as alterações e deixar para publicá-las ao final do processo.

Página inicial já com os textos e com a imagem de fundo editados

Seguindo o mesmo procedimento, vamos editar as demais seções da página.

Todas as fotografias usadas no site de exemplo foram retiradas do site Gratisography.

Editando a área de destaques em colunas

Na área logo abaixo da chamada principal, aquela com 3 colunas, repare que os ícones podem ser substituídos, incluindo as cores usadas. O acervo de ícones faz parte da biblioteca Font Awesome, que disponibiliza ícones em vetor (alta qualidade) gratuitamente. Este tipo de recurso ajuda bastante na hora de criar um site WordPress. A lista completa de ícones está disponível no site fontawesome.com.

Busque pelo ícone desejado no site Font Awesome

Para buscar um novo ícone, faça uma busca usando palavras em inglês. Após escolher o ícone desejado, clique sobre o mesmo e copie o nome da classe do ícone.

Copie o nome da classe do ícone para usar no editor visual do tema Hestia

Em seguida, insira o nome da classe no campo correspondente no painel do WordPress. A cor também pode ser alterada.

Área para edição do ícone no modo de personalização do WordPress

Basta então prosseguir e editar as demais colunas.

Seção com os ícones e textos completamente substituídos

Editando a área de membros da equipe

A parte de membros da equipe pode ser editada de maneira semelhante. Para remover um membro, basta abrir o campo Team Member e clicar no link Excluir campo. Da mesma forma, se desejar acrescentar outros membros, basta clicar no botão Add new Team Member.

Membros da equipe podem ser adicionados ou removidos no editor visual

Como se trata de uma empresa fictícia, não temos clientes. Por isso, vamos esconder a seção de depoimentos. Para isso, basta clicar no ícone de olho, no canto superior esquerdo. A seção vai desaparecer imediatamente.

É possível esconder ou revelar as seções da página inicial

Você pode controlar a visibilidade de qualquer seção da página no menu de personalização, em Seções da página inicial. Em seguida, basta clicar na seção desejada e depois em Disable section. Da mesma forma, para a seção ser exibida novamente, basta desmarcar o campo Disable section.

No painel de personalização, pode-se visualizar todas as seções disponíveis, mesmo as que não estão visíveis

Configurando uma newsletter com cadastro de usuários

Logo após a seção de depoimentos, existe uma área para configuração da assinatura de uma newsletter. Este é um recurso muito útil para os leitores, que poderão receber um e-mail sempre que um novo post for publicado, sem falar de outras comunicações de marketing que você queira fazer no futuro.

Para configurar o cadastro na newsletter, vamos usar o plugin Brevo (antigo Sendinblue). Trata-se de um plugin gratuito que permite criar formulários integrados com uma ou mais listas de assinantes. É possível ainda importar contatos de outras plataformas e criar formulários de captação usando um editor de arrastar e soltar. É permitido enviar até 300 e-mails por dia na modalidade gratuita.

A instalação do plugin se dá como qualquer outro no WordPress. Você pode baixar o plugin diretamente do site da Brevo ou, mais fácil ainda, instalar o mesmo por dentro do painel do WordPress. Essa foi a minha escolha. Basta navegar até a área de plugins, ir até Adicionar novo e procurar por Sendinblue. Em seguida, instale e ative o plugin.

A instalação do plugin pode ser feita por dentro do painel do WordPress

Antes de usar o plugin, é necessário criar uma conta na Sendinblue e pegar a chave da API, que permite integrar o seu site com o sistema de e-mail marketing da Sendinblue. O processo é bem simples e está explicado no painel, na página de configuração do plugin.

Feito o cadastro, é hora de inserir o formulário de cadastro na página inicial do nosso site. Para isso, retorno ao editor visual do WordPress (Aparência -> Personalizar) e, na área Seções da página inicial, edito a área Inscrever.

Como nas demais seções, você pode editar o texto e a imagem de fundo desta área à vontade. Para inserir o formulário de cadastro, clique na aba Plugin Sendinblue e adicione o widget do plugin. Selecione o formulário padrão (que é criado automaticamente na ativação do plugin). Ele contém apenas os campos nome e e-mail, suficientes para o cadastro na newsletter.

No editor visual do WordPress, a inserção do widget do Sendinblue é simples

Após a inserção do plugin, clique em Publicar para salvar as alterações.

Se você desejar editar os campos do formulário, isso pode ser feito dentro do painel admin do WordPress, em Sendinblue -> Forms. Basta selecionar o formulário padrão e editar os campos como desejar. Os cadastros feitos a partir deste formulário serão inseridos diretamente na conta que você criou na Sendinblue.

Editando o endereço e o formulário de contato

Na base da página inicial estão as informações de localização da empresa e um formulário de contato. Vamos customizar as informações exibidas aqui e fazer o formulário de contato disparar e-mails para o endereço de e-mail desejado.

O primeiro passo é editar as informações visíveis na página, o que pode ser feito da mesma forma que as seções anteriores. Basta clicar no ícone de lápis correspondente e as opções de edição serão exibidas.

Editando as informações de contato

É interessante notar que os campos título, subtítulo e a foto de fundo da página estão visíveis para edição, enquanto o texto de localização e o formulário de contato demandam cliques extras para serem editados.

Edição dos textos e da imagem de fundo da área de contato

Para editar os textos de localização, clique na aba Conteúdo de Contato e em seguida em Editar.

Caminho para editar os demais textos da área de contato

Uma tela se abre para que você possa editar os textos.

Área de edição dos textos adicionais

Após editar os textos, basta fechar a aba de edição. As informações são atualizadas na página à medida que são digitadas.

Repare que apenas o formulário de contato permanece com os campos de marcação, em inglês. Para editar isso devemos acessar o formulário por dentro do painel de administração do WordPress. Feche a área de edição da aparência (clicando no “x” no topo esquerdo da página). Lembre-se de salvar as alterações que fez até aqui, clicando no botão Publicar.

Botão para fechar a área de edição da aparência do WordPress

No painel do WordPress, localize no menu o item WPForms e depois clique em Todos os formulários.

Caminho para editar os formulários do site

Na área de edição da aparência, ao editar os textos de contato, existe um campo chamado “Shortcode”. Nele, vimos que o formulário usado na página inicial é o de id 4287 (no nosso caso). Esta é, portanto, a primeira opção na lista de formulários (repare no Shortcode, na coluna à direita). Basta clicar no link Editar, logo abaixo do nome, para editá-lo.

Link de edição do formulário

Na tela de edição, edite os textos dos campos do formulário. Para editar um campo, clique sobre o campo e depois em Opções avançadas. Localize o campo Nome e edite-o.

Tela de edição de formulários, no WP Forms

Em seguida, clique no item do menu Configurações para editar as configurações gerais do formulário. Você pode, inclusive, editar o nome do formulário, para facilitar a organização.

Edição das configurações do formulário

Vale a pena navegar pelos itens do menu lateral. Você verá que é possível, inclusive, integrar um formulário com uma ferramenta de captação de e-mails, como o Constant Contact ou o MailChimp.

Quando terminar as alterações, clique no botão laranja de salvamento, no topo, e saia da edição, clicando no “x” ao lado do botão de salvar.

Após a edição do formulário, se você voltar para a página inicial, na seção de contato, verá que o formulário já se encontra atualizado.

Formulário de contato atualizado na página

Faça um teste e submeta uma mensagem e você verá o formulário em funcionamento. Um detalhe importante: o e-mail de destino do formulário é o mesmo que você usou no momento de criar o site WordPress. Para alterá-lo, basta ir em Configurações -> Geral -> Endereço de e-mail, no painel de administração do WordPress.

Veja também: JetFormBuilder: o que é e como usar este plugin gratuito de formulários para WordPress

Alterando o nome do site e inserindo um logotipo

Se você não fez isso no momento de criar o site WordPress, esta é uma boa hora para alterar o nome do site para o da sua empresa ou projeto. Para isso, acesse o painel de administração do WordPress e vá até a seção Configurações -> Geral. Edite os campos Título do site e Descrição. Após as alterações, clique em Salvar, na base da página.

Editando o nome do site e a descrição

Outra coisa que você provavelmente vai querer fazer é inserir o logotipo — a marca — da sua empresa. A inserção do logotipo em si é bem simples. Ela é feita pelo próprio menu de personalização da aparência. No entanto, como ainda não temos um logotipo para a nossa empresa fictícia, vamos precisar criar um.

Para criação do logotipo, vamos usar o site de criação de logos Logaster (mas você pode optar por qualquer ferramenta de sua preferência — outra boa opção é o Adobe Spark). A Logaster é um sistema de criação de marcas personalizadas através de inteligência artificial. O primeiro passo é inserir o nome da empresa.

Página inicial do site de criação de logos Logaster

Em seguida, você pode escolher um segmento e uma paleta de cores. O sistema vai exibir algumas opções. Dentre elas, você pode escolher a que mais lhe agrada e personalizá-la ainda mais.

Opções de logotipo são exibidas após a inserção de dados

Na etapa seguinte, você visualiza o logotipo aplicado em diversos suportes, como impressos, sites e redes sociais.

Aplicações de exemplo da marca criada são exibidas

Na modalidade gratuita da Logaster, você pode visualizar e baixar um logotipo de baixa resolução, aplicado em fundos de diversas cores.

Exemplos de aplicação do logotipo, no site da Logaster
É possível baixar o logotipo gratuitamente, em baixa resolução

Para baixar uma resolução maior, é necessário contratar um dos planos disponíveis. Se for esse o caso, use o cupom logo_logaster e ganhe 15% de desconto na Logaster.

Voltamos então à área de edição da aparência do site WordPress. Ao clicar sobre o ícone de lápis próximo ao nome do site, a caixa para envio do logotipo é exibida. Basta então clicar sobre ela e enviar o logo que criamos na Logaster.

Personalização do logotipo no painel do WordPress

Após o envio do logotipo, bastou publicar a alteração e nossa marca já estava no ar.

Página inicial com o logotipo publicado

Alterando a cor principal do site

A cor padrão do tema Hestia não combina muito com a marca que criamos. Todos os botões e demais elementos de apoio do site ficam subordinados à cor principal do tema. Por isso, é interessante alterá-la para uma que combine com a nossa marca.

Para isso, no menu de edição de aparência, navegue até a seção Configurações de aparência -> Cores. Lá você pode alterar tanto a cor principal como a cor do fundo.

Alterando a cor principal do tema

Basta então selecionar a cor desejada e ela será exibida imediatamente na página.

A cor escolhida é aplicada imediatamente na página

Publicando e editando os posts do blog

A funcionalidade de blog é uma das mais procuradas por aqueles que buscam saber como criar um site WordPress. Afinal, esta famosa plataforma foi criada originalmente como um sistema de blogs. Posteriormente, o WordPress evoluiu e é possível usá-lo para uma infinidade de propósitos. Neste exemplo, vamos criar um site que contém um blog. Esta combinação é bastante conveniente para aqueles que desejam ter um site institucional e também se valer do poder de atração que os blogs têm nos mecanismos de busca.

A página inicial do tema Hestia exibe, por padrão, os posts mais recentes do blog. E, como vimos anteriormente, ele está exibindo os posts de marcação do tema e aquele “Hello World”, que vem com a instalação do WordPress.

Seção “Blog”, na página inicial, ainda com o conteúdo de exemplo do tema

Para alterar esta seção e exibir conteúdo real, o processo é muito simples. Você pode simplesmente editar os posts existentes ou publicar novos. Os posts mais recentes são carregados e exibidos na página inicial.

Para exibir o processo de publicação de um post do zero, vamos optar por criar novos posts, ao invés de editar os existentes. Para isso, acesse o painel de administração do WordPress e localize no menu o item Posts. Uma vez na página, clique em Adicionar novo.

Caminho para criar um novo post no painel de administração do WordPress

O editor de conteúdo do WordPress foi completamente reformulado e é bastante completo e intuitivo. Para começar, digite o título do seu post e comece a escrever o conteúdo.

Tela de edição de posts no painel do WordPress

A tecnologia de “blocos”, presente no editor do WordPress, permite que você insira blocos de conteúdo, como textos, imagens, listas etc. Basta clicar no ícone de “+” para visualizar os blocos disponíveis.

Para adicionar um novo bloco de conteúdo, basta clicar no ícone de “+”

Após inserir o conteúdo do seu post, preencha algumas informações sobre ele na barra lateral. É fundamental classificar o post em uma categoria e inserir uma imagem destacada, pois estas informações serão usadas para exibição da chamada na página inicial e também na lista de posts no blog.

Antes de publicar o post, preencha as informações solicitadas na aba “Documento”

Além disso, você também pode inserir tags e fazer um breve resumo. O tema Hestia também permite que você defina se o post será exibido em largura total ou com uma barra lateral (à direita ou à esquerda).

É possível escolher se o post exibirá ou não uma coluna lateral

Quando estiver tudo pronto, basta clicar no botão Publicar e o post será publicado no blog.

Post publicado no blog

Depois de publicar ao menos 3 posts, a página inicial do site exibe suas publicações mais recentes.

Página inicial exibindo os 3 posts mais recentes

Editando a aparência do blog

Além da página inicial, também há uma página exclusiva para o blog. Esta página exibe todos os posts publicados no blog, do mais recente para o mais antigo. O endereço do blog, gerado automaticamente, é a página exemplo.com.br/blog. Nesta página, os posts são exibidos em um layout diferente da página inicial, como pode ser visto na imagem abaixo.

Página do blog, com a cor padrão do tema e os posts existentes

Repare na cor que está sendo exibida no cabeçalho. Esta é a cor predominante do site, que pode ser alterada livremente no personalizador de aparência do tema Hestia. Para alterá-la, clique em Personalizar, na barra de topo (ou, no menu do painel, em Aparência -> Personalizar). No personalizador de aparência, vá em Configurações de aparência -> Cores -> Cor dominante e escolha a cor que desejar. Lembre-se de que esta cor vai valer para diversos elementos do site, como botões e outros itens do tema.

Caminho para alteração da cor padrão do site

Também é possível inserir uma imagem no cabeçalho do blog. Para isso, estando no blog, basta clicar em Editar página e inserir uma imagem destacada.

É possível editar a página do blog
Definindo uma imagem destacada para a página do blog

Também é possível alterar a estrutura da lista de posts, para exibir, por exemplo, uma coluna lateral.

A lista de posts pode ou não exibir uma coluna lateral

O resultado será parecido com a imagem abaixo:

Página do blog (lista de posts) com uma imagem de cabeçalho e coluna lateral

Criando uma página Quem Somos

Ter uma página explicando o que faz a sua empresa e um pouco da sua história é algo que dá credibilidade para o seu negócio e pode fazer diferença para captar futuros clientes. Vamos ver agora como funciona a criação de páginas no WordPress e publicar uma página “Quem Somos” para a nossa empresa fictícia.

Assim como os posts do blog, a criação de páginas está disponível no menu de administração do WordPress. Para criar uma nova, basta acessar Páginas -> Adicionar nova.

Caminho para criação de uma página no painel de administração do WordPress

O editor de conteúdo das páginas é semelhante ao usado no blog. A principal diferença é que as categorias e tags não estão presentes já que este tipo de organização não se aplica às páginas.

Área de edição da página

Formate a página como desejar, usando o sistema de blocos do editor do WordPress. Quando estiver tudo pronto, basta publicar a página.

Opcional: Habilitando novos tipos de blocos para formatação das páginas

E se você estiver à procura de layouts mais arrojados para as páginas do seu site, deixo aqui uma dica interessante. O tema Hestia possui uma galeria de blocos extras, que permite usar formatações semelhantes às da página inicial em qualquer páginas do site.

Para ativar os blocos extras, procure, no menu lateral, por Orbit Fox e ative o módulo Gutenberg Blocks.

Caminho para ativação dos blocos extras para edição de páginas e posts

Depois disso, basta retornar ao editor de qualquer página e procurar pelos blocos da Orbit Fox.

Novos blocos já disponíveis no editor de páginas e posts do WordPress

Ao optar por um bloco do tipo Section, clique na opção Template Library e você terá à disposição diversos layouts de seção.

Opções de layouts de página disponíveis após a ativação dos blocos extras

As possibilidades de criação são bastante ampliadas com o uso dos layouts extras oferecidos pelo tema.

Criando uma galeria de fotos

Uma galeria de fotos pode ser muito útil para expor o trabalho da sua empresa. E o WordPress possui o recurso de galeria de fotos incorporado ao seu editor de conteúdo. Vamos ver como criar uma agora.

Primeiramente, vamos criar uma nova página denominada Fotos. Em seguida, carregue o bloco Galeria na página.

O primeiro passo é inserir um bloco do tipo galeria

Após a inserção do bloco, arraste as imagens que desejar para a área de inserção de imagens.

As imagens podem ser inseridas através de upload ou selecionadas a partir da biblioteca

Após enviar as fotos, defina em quantas colunas você deseja exibir a galeria e o comportamento desejado ao clicar nas imagens. Se não tiver certeza sobre o layout, não se preocupe, é possível modificar tudo posteriormente.

É possível ajustar as configurações básicas da galeria, como a quantidade de colunas

Não esqueça de inserir também uma imagem destacada, pois ela será exibida no topo da página. Após finalizar a edição, basta publicar a página.

Página de fotos com a galeria publicada

Criando uma página de contato

Todo site que se preze precisa ter uma página de contato. É através dela que muitos clientes e leitores vão entrar em contato com a sua empresa. Seja para pedir informações ou para fechar possíveis negócios, é fundamental ter canais de comunicação disponíveis no site.

Faça a criação de uma nova página, seguindo o procedimento que fizemos para as demais páginas. Na caixa de inserção de blocos, selecione a opção WP Forms, em Widgets.

Inserção de bloco do tipo WP Forms, para criação de um formulário de contato

Em seguida, basta selecionar um dos formulários de contato criados pelo WP Forms. Como já criamos um formulário de contato para a página inicial, basta selecioná-lo na lista. Se você desejar um formulário com campos diferentes, basta criar um novo.

Após a inserção do bloco, selecione o formulário que deseja exibir

Após selecionar o formulário, ele carrega os campos do formulário automaticamente.

O formulário é carregado automaticamente após a seleção

Após a edição, publique a sua página de contato. Lembrando que, como em qualquer outra página, se você desejar um layout diferente, basta selecionar um a partir da biblioteca de blocos personalizados do tema.

Página de contato publicada, já com o formulário

Se você acompanhou o tutorial até aqui e está vendo como criar um site WordPress personalizado, deve estar percebendo que as novas páginas não são inseridas automaticamente no menu. Isso ocorre porque o WordPress possui uma área para gerenciamento do menu. Para acessá-la, basta navegar até Aparência -> Menus, pelo painel do WordPress.

Caminho para gerenciamento e edição de menus no WordPress

Uma vez lá, você pode criar um novo menu ou editar os existentes. O menu que está ativo no site, fica marcado como “menu principal”. Para editá-lo, basta selecioná-lo na lista e clicar em Selecionar.

Selecione o menu que deseja editar

Em seguida, insira as páginas que desejar no menu. Também é possível inserir posts, categorias ou qualquer outro link personalizado que você desejar. Para adicionar um novo link ao menu, basta selecionar a página desejada e clicar em Adicionar ao menu.

Adicione as páginas que desejar no menu

Você também pode editar os rótulos de exibição das páginas, isto é, os textos que vão aparecer no menu.

É possível editar o texto de exibição no menu

Ao final da edição, clique em Salvar menu e ele será atualizado em todas as páginas do site.

Menu publicado, contendo todas as páginas que inserimos manualmente

Adicionando plugins para acelerar o carregamento do WordPress

O WordPress por si só já apresenta um ótimo desempenho. Mas é possível melhorar ainda mais seu desempenho com o uso de alguns plugins. Plugins são como extensões, que permitem ampliar os recursos e funcionalidades do sistema padrão do WordPress. Seu uso é tão comum que é impossível explicar como criar um site WordPress sem mencionar os plugins.

Para otimizar e acelerar o carregamento das páginas do nosso site, vamos instalar um plugin chamado WP Super Cache. De maneira resumida, um sistema de cache cria cópias estáticas do seu site, o que acelera o carregamento das páginas e também alivia a carga do servidor de hospedagem, o que é ótimo. Para saber mais, leia o artigo o que é cache e por que ele é importante para a sua hospedagem.

O WP Super Cache é um plugin muito fácil de usar e suas configurações básicas já permitem acelerar em muito a navegação.

Para instalar qualquer plugin no WordPress, devemos acessar o painel e ir em Plugins. Nesta página, podemos visualizar todos os plugins instalados — ativos ou não.

Localização da área de plugins no painel de administração do WordPress

Vamos então clicar em Adicionar novo e pesquisar por WP Super Cache. No resultado da busca, identifique o plugin WP Super Cache e clique em Instalar agora.

Busca pelo plugin WP Super Cache, na área de instalação de plugins

A instalação é automática e bem rápida. Assim que ela for concluída, clique em Ativar. Em seguida, acesse a página de administração do WP Super Cache para configurá-lo.

Link para a página de administração do WP Super Cache

Na página de administração, tudo o que você precisa fazer é alterar a opção de cache para Cache ligado (recomendado) e depois clicar em Atualizar status.

Configuração básica do plugin WP Super Cache

O cache do seu site será criado nesse momento. Para testar se está tudo certo, você pode rodar um teste clicando no botão cache de teste.

O plugin permite configurações avançadas, que você também pode explorar navegando pelas abas de configuração. Fique à vontade para fazer isso e otimizar ainda mais o seu site. Se configurações não são o seu forte, não se preocupe: a simples ativação do cache já é uma ótima ação para o seu site WordPress.

Vale mencionar que existem muitos outros plugins que podem ser úteis para o seu site. Um deles é o Yoast SEO, que permite melhorar a visibilidade do seu site para os mecanismos de busca. Não entrarei em detalhes sobre a configuração do Yoast, mas o processo de instalação é semelhante ao apresentado aqui: basta buscar pelo plugin e ativá-lo.

Ainda sobre plugins, um aviso importante. Apesar de serem ferramentas incríveis para acrescentar recursos ao seu site WordPress, o uso excessivo de plugins pode sobrecarregar o site e causar outros efeitos colaterais. Por isso, use apenas plugins confiáveis e realmente necessários para o seu site.

Bônus: instale um certificado SSL em seu site WordPress

Ao criar um site WordPress, existem muitos aspectos que devem ser observados, como vimos ao longo do artigo. Um deles possui uma importância especial: o certificado SSL. Este é o recurso que permite o uso do protocolo HTTPS ao navegar pelo site. Os navegadores modernos exibem um cadeado fechado ao lado do endereço da página dos sites que possuem o certificado SSL.

O certificado SSL criar uma conexão criptografada entre o servidor de hospedagem e o usuário, o que protege as informações trocadas, mantendo a confidencialidade das informações. Além disso, há alguns anos o Google passou a considerar a presença do certificado SSL como um dos fatores de ranqueamento dos sites.

Por isso, é fundamental que o site que você está criando possua um certificado SSL. E se você está em dúvida sobre como implementar o recurso no seu site WordPress, aqui vão algumas orientações.

Opção 1: use o certificado gratuito fornecido pela sua hospedagem

Muitas empresas de hospedagem oferecem certificados SSL gratuitamente para seus clientes. A HostGator, que usamos como exemplo neste artigo, oferece o recurso gratuitamente para todos os domínios presentes na hospedagem (veja aqui como instalar).

Se a sua empresa oferece o SSL gratuitamente, então o ideal é instalar o certificado antes de instalar o site WordPress. A razão é apenas a praticidade. Ao instalar o WordPress em um domínio que já possui SSL, basta informar a versão HTTPS do seu domínio (ex.: https://meusite.com) para que toda a configuração do WordPress seja feita usando SSL.

Se você realizou a instalação do WordPress em um domínio sem SSL, não se desespere. Nesse caso, após instalar o certificado, você pode seguir os procedimentos informados no tutorial como configurar o SSL no WordPress.

Opção 2: instale um certificado SSL externo ou comprado na sua hospedagem

Se a sua empresa de hospedagem não fornece gratuitamente um certificado SSL, você pode tentar instalar um certificado gratuito externo, como o Let’s Encrypt (veja aqui como instalar).

Infelizmente algumas hospedagens restringem o uso do Let’s Encrypt. Nesse caso, você pode comprar um certificado com a própria empresa de hospedagem ou com uma certificadora externa. Usar um certificado da própria hospedagem pode ser bem prático, pois eles farão a instalação e podem te ajudar com outras configurações relacionadas ao site. Todavia, um certificado SSL comprado pode elevar o custo total do seu projeto.

Se você não estiver disposto a pagar pelo SSL e a sua hospedagem não oferece o recurso, reveja se não vale a pena trocar de empresa. Veja aqui 8 empresas que oferecem SSL grátis na hospedagem.

Como criar um site WordPress – resultado final

Depois de todas as customizações, o nosso site de exemplo ficou com esta aparência:

Como vimos, pode ser fácil e rápido criar um site WordPress, bastando ter um bom tema e os plugins corretos. As possibilidades de criação de sites com o WordPress são infinitas e muitos outros temas e plugins estão à disposição de todos.

Veja aqui o resultado final do nosso site de demonstração, caso ainda não tenha acessado. Se alguma dúvida ou questão ficou em aberto, deixe um comentário e será um prazer ajudar!

E agora que você já sabe como construir um site WordPress, que tal ter um e-mail personalizado com o seu domínio? Confira aqui os melhores serviços de e-mail profissional, incluindo uma opção gratuita!

Ir para o topo
Sair da versão mobile