Como fazer um site do zero em 2023 (tutorial detalhado)

Publicados: 2023-07-07

A presença online conhece muitas formas. Uma delas é ter seu próprio site. Seja para o seu negócio ou para a sua marca pessoal, ter um site pode ajudá-lo a aumentar a sua presença online. Mostraremos como criar um site do zero para ajudá-lo a colocá-lo em funcionamento o mais rápido possível. Forneceremos todas as etapas essenciais de que você precisa! No total, percorreremos 13 etapas. Esta postagem deve ajudá-lo a criar um plano de ação claro ao planejar a criação de seu próprio site.

Vamos lá.

Índice
  • 1 Preciso Saber Programar?
  • 2 Etapa 1: CMS ou construtor de sites?
  • 3 Passo 2: Escolha um Provedor de Hospedagem
    • 3.1 Tipos de Hospedagem
    • 3.2 Nossa recomendação: SiteGround
  • 4 Etapa 3: escolha seu domínio
    • 4.1 .COM
    • 4.2 Torne-o Memorável
    • 4.3 Registre seu domínio
  • 5 Passo 4: Instale o WordPress.org
    • 5.1 Instalação Automática
  • 6 Passo 5: Planeje a estrutura do seu site
    • 6.1 Páginas a Considerar
  • 7 Etapa 6: escolha seu tema
    • 7.1 Tipos de Temas
    • 7.2 Nossa principal recomendação: Divi
  • 8 Passo 7: Instalar Plugins
    • 8.1 Plug-ins Essenciais
    • 8.2 Plug-ins Opcionais
  • 9 Etapa 8: Crie sua primeira página
    • 9.1 Adicionar nova página
    • 9.2 Selecione Layout Pré-fabricado
    • 9.3 Alterar conteúdo e imagens
    • 9.4 Salvar e Publicar
  • 10 Passo 10: Crie Páginas Adicionais
  • 11 Passo 11: Crie a Navegação do Seu Site
    • 11.1 Selecione a página inicial
    • 11.2 Criar Menu Primário
  • 12 Passo 12: Coisas adicionais a considerar
    • 12.1 Criando um Cabeçalho e Rodapé
    • 12.2 Criando Modelos
    • 12.3 Otimizando seu SEO
    • 12.4 Otimizando para dispositivos móveis
  • 13 Etapa 13: Manutenção do seu site
    • 13.1 Atualize Regularmente
    • 13.2 Dados de medição
  • 14 Considerações Finais

Preciso saber codificar?

Saber codificar costumava ser essencial quando se tratava de sites. Embora seja altamente recomendável que você tenha experiência em algum desenvolvimento básico da Web, isso não é necessário. Muitas ferramentas existentes se concentram em tornar a criação de sites uma experiência visual. Essa é a abordagem que adotaremos neste post. Você não precisará de conhecimentos técnicos para seguir este tutorial e criar um site do zero.

Etapa 1: CMS ou construtor de sites?

WordPress.org

As duas principais opções que você tem ao decidir construir seu próprio site são:

  1. um sistema de gerenciamento de conteúdo
  2. um construtor de sites

Um sistema de gerenciamento de conteúdo, como o WordPress, permite que você controle todos os aspectos do seu site, incluindo a hospedagem. Eles geralmente são gratuitos também. A combinação dessas duas opções torna os sistemas de gerenciamento de conteúdo a opção mais popular do mercado.

Um construtor de sites, por outro lado, bloqueia você em sua plataforma de hospedagem. Você tem muito menos controle e muitas vezes fica preso com o construtor de sites, o que pode resultar em você ficar “preso” se estiver desapontado com o software.

Nossa escolha: Para este tutorial prático, escolheremos o WordPress.org. É gratuito, tem uma curva de aprendizado razoável e muitas opções para dar vida ao seu site.

Etapa 2: escolha um provedor de hospedagem

Escolher um provedor de hospedagem é a próxima decisão importante que você deve tomar ao criar um site. Existem muitos planos de hospedagem, por isso pode ser difícil ver a floresta pelas árvores. Vamos tentar colocá-lo para fora para você o mais facilmente possível.

Tipos de hospedagem

As opções de hospedagem variam de acordo com o tráfego do site. Para tráfego baixo, a hospedagem compartilhada funciona, mas você compartilhará armazenamento e recursos. A hospedagem gerenciada do WordPress é melhor para a maioria, pois lida com questões técnicas e de segurança. Aqueles que precisam de uma solução robusta podem considerar a hospedagem VPS - uma alternativa mais barata à hospedagem dedicada com recursos semelhantes. Para obter mais orientações sobre como selecionar a hospedagem WordPress correta, consulte nosso artigo abrangente sobre tipos e seleção.

Nossa recomendação: SiteGround

Hospedagem SiteGround WordPress

Vamos supor que você deseja criar um site simples, onde não espera muito tráfego. Nesse caso, um plano de hospedagem compartilhada fará seu trabalho (por enquanto). Você sempre pode ampliar sua opção de hospedagem. Nossa recomendação para hospedagem é o SiteGround. Ele tem uma pontuação de 4,4 em 5 no Trustpilot e é bem merecido. Suas soluções de plataforma e hospedagem priorizam o cliente e suas necessidades.

Preços

Preços do SiteGround

O SiteGround oferece três planos: o StartUp por US$ 14,99 por mês, o GrowBig por US$ 24,99 e o GoGeek por US$ 39,99. Para este tutorial, selecionaremos o plano GoGeek, que nos dará 40 GB de espaço na web, 400.000 visitas mensais e alguns recursos excelentes para começar.

Criar conta do SiteGround

O próximo passo é criar sua conta. Comece selecionando um plano (para nós, é o plano GoGeek) e siga as etapas para registrar um novo domínio ou adicionar o atual.

escolha um domínio

Por fim, adicione informações da conta, como e-mail e senha, informações do cliente, informações de pagamento e duração da hospedagem: mensal ou anual.

Criar conta SiteGround

Etapa 3: escolha seu domínio

Depois de escolher seu provedor de hospedagem, você pode continuar escolhendo seu domínio (caso ainda não possua um).

.COM

As URLs mais populares terminam em ponto com. Está enraizado em nosso cérebro. Por padrão, tendemos a confiar mais em domínios pontocom do que em outros, o que impacta positivamente a marca.

Torná-lo memorável

Independentemente de você optar por um domínio pontocom ou não, é importante tornar seu domínio memorável. Especialmente a longo prazo, você não quer tornar difícil para seus visitantes e clientes encontrá-lo online.

Registre seu domínio

Muitos registradores de domínio estão disponíveis, mas é importante escolher um bom. Alguns dos melhores registradores de domínio são Namecheap ou SiteGround, mas certifique-se de fazer sua pesquisa para determinar qual é o certo para você.

Passo 4: Instale o WordPress.org

Depois que sua hospedagem e domínio estiverem no lugar, é hora de instalar o WordPress em seu site. Existem muitas razões para escolher o WordPress acima de qualquer outra opção. Em primeiro lugar, é o CMS mais popular por um motivo. É intuitivo, de código aberto e permite personalização total. Você também tem infinitas opções de temas e plugins. Também não faz mal que você não precise pagar um centavo para usar o WordPress.org em seu site!

Instalação Automática

Para configurar o WordPress em seu domínio do SiteGround, você pode navegar até a página inicial da sua conta do SiteGround e clicar em Configurar site .

configurar site

Selecione o domínio novo, existente ou temporário do seu site e clique em continuar .

escolha o domínio

Em seguida, selecione Iniciar novo site .

iniciar novo site

Em seguida, selecione WordPress , digite seu endereço de e-mail e crie uma senha. Em seguida, clique em continuar .

Credenciais de login do WordPress

Passo 5: Planeje a estrutura do seu site

Neste ponto, o ambiente do seu site está pronto para começar a pensar no formato que seu site terá. É importante considerar como você deseja que seu site seja e quais funcionalidades serão necessárias. Um pager serve? Você precisa de algumas páginas básicas para um site tipo brochura? Você precisa da funcionalidade de comércio eletrônico? Por causa deste tutorial, vamos sair do objetivo de construir um site de brochura.

Páginas a considerar

Se você estiver criando um site de brochura, haverá algumas páginas indispensáveis:

  • Lar
  • Sobre
  • Contato

Além disso, dependendo do objetivo do site, você pode adicionar mais páginas dedicadas a:

  • Serviços
  • portfólio
  • blog

Não há estrutura de site certa ou errada; você terá que encontrar a opção que funciona para você, seu site e os objetivos do seu site.

Etapa 6: escolha seu tema

Assim que seu ambiente WordPress estiver pronto, é hora de trabalhar! Ao usar o WordPress, você pode definir um tema. Este tema constitui a base do seu site. Com base na funcionalidade que você deseja adicionar ao seu site, escolher o tema certo será uma etapa importante.

Tipos de Temas

Há uma variedade de temas diferentes que você pode escolher no WordPress. Os temas mais populares são multifuncionais e geralmente incluem um construtor visual. A razão para isso é a flexibilidade que oferece. Também existem temas especificamente adaptados para sites de comércio eletrônico ou sites de portfólio. Dependendo do tipo de tema que você está procurando, você pode conferir diferentes listas com nossas principais recomendações.

Nossa principal recomendação: Divi

Escolha Divi

Escolheremos um tema para trabalhar nas próximas etapas (práticas) deste tutorial. Recomendamos usar nosso próprio Divi para qualquer site que você criar. Divi é um tema multifuncional e inclui um Visual Builder de design sem código que torna a construção de sites muito intuitiva. O Divi vem com uma ampla gama de recursos, mais de 200 elementos personalizáveis ​​e mais de 2.200 layouts projetados profissionalmente para você escolher! Seja qual for o tipo de site que você deseja criar, as chances são altas de que haja um pacote de layout dedicado exatamente a esse negócio específico.

Preços

Preços dos temas elegantes

O Divi oferece duas opções de associação: anual e vitalícia. Você pode obter uma assinatura anual por US$ 89/ano ou uma assinatura vitalícia por uma taxa única de US$ 249.

Torne-se um membro Divi

Para se tornar um membro Divi, navegue até nossa página de adesão. Ou aproveite o desconto de 10% de hoje!

Depois de se inscrever para uma associação, você pode navegar para a sua área de membros.

Área de membros do Elegant Themes

Baixar Divi

Aqui, você encontrará a possibilidade de baixar o arquivo de tema Divi.

baixar Divi

Instale o Divi no seu site WordPress

Depois de baixar o Divi, navegue até o painel do WordPress, passe o mouse sobre o item de menu Aparência na barra lateral esquerda e clique em Temas .

temas WordPress

Na parte superior da página, você notará um botão que diz Adicionar novo . Clique neste botão.

adicionar novo tema

Em seguida, clique em Carregar Tema .

Carregar tema

Procure a pasta compactada Divi que você baixou na parte anterior deste tutorial e clique em Instalar agora .

instale agora

Depois de conseguir isso, você também poderá ativar o tema!

ativar Divi

Divi agora está pronto para você usar.

Adicionar chave de API às opções do tema Divi

Para acessar todos os layouts gratuitos que o Divi fornece, você precisará adicionar sua chave de API às opções do tema Divi. Você pode encontrar (e criar) chaves de API navegando até sua Área de Membros. Uma vez lá, passe o mouse sobre Conta .

Conta de temas elegantes

Em seguida, clique em Nome de usuário e Chave de API .

obter chave de API

Você pode criar e copiar novas chaves de API na área de chaves de API.

gerar nova chave de API

Para adicionar a chave de API às opções do tema Divi, você precisará do seu nome de usuário e de uma chave de API.

Em seguida, navegue até o painel do WordPress. Passe o mouse sobre o item de menu “Divi” na barra lateral esquerda (1) e clique em “Opções de tema” (2). Vá para a guia "Atualizações" (3). Você pode adicionar seu nome de usuário (4) e chave de API (5) lá. Certifique-se de salvar as alterações (6).

Opções do tema Divi

Etapa 7: instalar plug-ins

Outra grande parte do WordPress é a capacidade de instalar plugins. Existem literalmente milhares de plugins por aí para ajudar a atender a diferentes necessidades. Vamos dar uma olhada em quais plug-ins você deve considerar para o seu site.

Plug-ins essenciais

Com cada site WordPress, existem alguns plugins essenciais que você precisará para ter sucesso. Você vai querer instalar plug-ins para SEO, segurança e outros excelentes plug-ins do WordPress para ajudá-lo a manter seu site em perfeitas condições.

SEO

O WordPress é compatível com SEO pronto para uso, mas precisa de uma ajudinha se você quiser obter uma colocação mais alta nas páginas de classificação do mecanismo de pesquisa (SERPs). Felizmente, existem alguns plug-ins de SEO excelentes, como o Rank Math, para garantir que seu site seja facilmente descoberto por clientes em potencial.

Segurança

Outro aspecto vital a considerar é um plugin de segurança confiável, como o iThemes Security. Garantir proteção contra malware, bots e ataques DDoS é crucial. Com mais de 44% da internet construída no WordPress, ele se torna o principal alvo de agentes mal-intencionados.

Plug-ins Opcionais

Além dos plug-ins de segurança e SEO, alguns plug-ins opcionais podem aprimorar seu site. Considere bate-papo, boletim informativo, mídia social ou outros plug-ins opcionais para tornar seu site uma potência de geração de leads.

Bater papo

melhores plugins de bate-papo wordpress

O envolvimento do cliente é crucial para o sucesso do seu site. Você deve considerar a instalação de um bom plug-in de bate-papo, como o Tidio, para se tornar mais acessível aos clientes. Se você precisa automatizar a experiência do cliente ou fornecer um agente ao vivo para o seu site, um plug-in de bate-papo é uma excelente maneira de fornecer aos visitantes as respostas que eles desejam.

Boletim de Notícias

melhores plugins de newsletter para wordpress

Se você deseja aumentar os leads e aumentar sua base de clientes, um plug-in de boletim informativo, como o Bloom, é adequado. É uma excelente maneira de aumentar sua base de clientes, fornecer informações úteis a eles e acompanhar o envolvimento de seu site.

Mídia social

melhores plugins de mídia social para wordpress

Conectar seus feeds de mídia social ao seu site WordPress é uma excelente maneira de aumentar a visibilidade do seu site e contas de mídia social. Usando um bom plug-in de mídia social, como o Monarch, você pode incorporar seus feeds de mídia social do Facebook, YouTube e muito mais.

E mais

melhores plugins do WordPress

Se você precisa de uma solução para fazer backup, acelerar ou aprimorar a funcionalidade do seu site, um bom plug-in do WordPress pode ajudá-lo a atingir seus objetivos. Dê uma olhada em nossa postagem dos 31 melhores plugins do WordPress para obter mais informações sobre quais plugins você pode usar para tornar seu site WordPress o melhor possível.

Etapa 8: crie sua primeira página

Neste ponto, podemos começar a criar com confiança as páginas que queremos mostrar em nosso site! Esta parte pode ser esmagadora se você for novo na construção de sites. Embora fazer um site seja fácil, às vezes pode levar a uma sobrecarga de informações. Permita-se processar e retornar às informações com uma mente fresca quando necessário.

Adicionar nova página

Navegue até o painel do WordPress. Uma vez lá, passe o mouse sobre Páginas e clique em Adicionar novo .

adicionar nova página WordPress

Dê um título à sua página. Neste caso, vamos chamá-lo de Home .

nomeie sua página do WordPress

Você pode salvar a página como rascunho ou publicá-la para começar a trabalhar nela.

salve sua página

Quando estiver pronto, mude para o Divi clicando em Use Divi Builder .

usar Divi Builder

Selecione Layout Pré-fabricado

O Divi é uma ferramenta intuitiva e você pode criar qualquer página do zero se aprender o básico. Mas para ajudar a agilizar o processo, o Divi fornece mais de cem pacotes de sites com mais de 2200 layouts! Com tantas opções disponíveis, você encontrará um pacote de sites que atenda às necessidades do seu site. Lançamos um novo pacote de layout toda semana!

pacotes de layout Divi

Para fazer upload de um layout para sua página, escolha a opção do meio que diz Procurar layouts .

procurar layouts

Assista à nossa biblioteca de pacotes de layout e layouts se desdobrando!

Opções de layout do Divi

Você pode usar a barra de pesquisa na barra lateral esquerda se estiver procurando por um pacote de layout específico.

pesquisa de layout

Para este tutorial, usaremos o layout da página inicial do Marketing Layout Pack. Vamos apenas digitar Marketing na barra de pesquisa.

Layout de marketing Divi

Em seguida, selecionaremos a página inicial do Marketing.

página inicial de marketing

Isso nos levará à visualização completa do pacote de layout.

visualização de marketing

Para carregar a página inicial, clique no botão azul que diz Usar este layout .

Em nenhum momento, sua página será substituída pelo layout!

layout importado

Alterar conteúdo e imagens

Os layouts são ótimos pontos de partida, mas as coisas ainda precisam ser ajustadas às necessidades do seu site. Você pode ir tão longe quanto quiser com isso. Divi é um construtor visual que permite adicionar novas seções, linhas, colunas, módulos e muito mais. Ele também possui muitos recursos de eficiência que aceleram o processo de design.

Vamos simplificar este tutorial alterando apenas o conteúdo.

Alterar cópia

Você pode abrir cada módulo individual que contém a cópia e usar a caixa de conteúdo para alterar a cópia. Fácil!

editar módulo de texto

Alterar Imagens

Da mesma forma, você pode alterar todas as imagens que estão sendo usadas, se necessário/desejado. Certifique-se de otimizar suas imagens antes de fazer o upload para evitar velocidades de carregamento lentas.

editar módulo de imagem

Salvar & Publicar

Você pode salvar e publicar depois de aplicar as alterações desejadas em sua página!

Publicar página Divi

Passo 10: Crie Páginas Adicionais

Dependendo da estrutura do seu site, você pode repetir os passos acima para cada uma das páginas que você precisa. Se você deseja colocar seu site no ar o mais rápido possível, considere primeiro um de uma página e, em seguida, construa lentamente o restante de suas páginas.

Etapa 11: crie a navegação do seu site

É ótimo ter páginas em seu site, mas se as pessoas não conseguirem acessar a página que desejam, teremos um problema. É por isso que você deve prestar atenção extra à navegação do seu site. A navegação geralmente se encontra nas áreas de cabeçalho e rodapé de um site. O WordPress tem um local dedicado para criar menus a partir de páginas existentes dinamicamente.

Selecione a página inicial

Antes de criarmos o menu, vamos primeiro configurar uma página inicial. Se as pessoas digitarem seu URL principal, elas chegarão a esta página. Por padrão, a página inicial de um site WordPress é definida como Suas postagens mais recentes . Para modificar isso, você pode navegar até o painel do WordPress, passar o mouse sobre as Configurações no menu do lado esquerdo e continuar clicando em Leitura .

Configurações de leitura do WordPress

Uma vez lá, selecione Uma página estática na primeira opção e navegue pelas páginas para encontrar sua página inicial. Certifique-se de salvar as alterações.

definir página inicial

Criar menu principal

Em seguida, criaremos um menu principal. Navegue até o painel do WordPress, passe o mouse sobre o item de menu Aparência na barra lateral esquerda e selecione Menus .

Clique em Adicionar um novo menu e dê um nome ao seu menu.

criar novo menu

Continue adicionando as páginas que deseja em sua navegação.

adicionar páginas ao menu

Feito isso, defina seu menu como o menu principal .

Menu Principal

E salve seu cardápio. Este menu principal agora será refletido no cabeçalho do seu site automaticamente.

salvar menu

Passo 12: Coisas adicionais a considerar

Um site nunca está realmente terminado. Você sempre terá coisas para melhorar ou atualizar. Se você deseja aprimorar ainda mais seu site, considere alguns dos itens abaixo.

Criando um Cabeçalho e Rodapé

Existem várias maneiras de criar cabeçalhos e rodapés em um site Divi. Você pode usar o personalizador de temas do WordPress em Aparência > Personalizador para estilizar o cabeçalho e rodapé padrão do Divi ou usar o Construtor de temas para criá-los. É altamente recomendável usar o Divi's Theme Builder, pois permite criar cabeçalhos e rodapés personalizados usando o Visual Builder de arrastar e soltar. Para acessar o Theme Builder, navegue até Divi > Theme Builder .

Divi Theme Builder

Clique em Adicionar cabeçalho global para adicionar um cabeçalho.

adicionar cabeçalho global

Você pode criar qualquer layout de cabeçalho que desejar usando o Visual Builder do Div.

Criando modelos

Divi é o melhor tema de edição de site completo. Além de criar cabeçalhos e rodapés, você pode criar layouts para postagens, produtos, categorias e muito mais. O Divi's Theme Builder oferece a liberdade máxima para criar o site que você deseja usando sua criatividade ou aplicando um de nossos layouts de postagem pré-projetados em nosso blog.

Otimizando seu SEO

O WordPress já é compatível com SEO, mas usar um plug-in de SEO e uma boa ferramenta de SEO aumentará sua visibilidade. Aprenda sobre pesquisa de palavras-chave, escrevendo uma boa cópia de SEO e utilizando links internos. Seguindo essas etapas, você se tornará um especialista em SEO rapidamente.

Otimizando para dispositivos móveis

Criar um site visualmente atraente em todos os dispositivos é crucial. O algoritmo mobile-first do Google prioriza sites com telas pequenas. Felizmente, a Divi é especializada em designs mobile-first, dando a você uma grande vantagem.

Etapa 13: Manutenção do seu site

Para ter um site de sucesso, você terá que mantê-lo.

Atualize Regularmente

Mesmo que seja apenas por medidas de segurança, atualizar seu site regularmente tem vantagens. Certifique-se de que, se você atualizar, use um site de teste. Isso ajudará você a evitar conflitos ao atualizar o WordPress, um tema ou um plug-in.

Dados de medição

Considere também medir os dados que seu site traz, por meio de ferramentas como o Google Analytics. Isso ajudará você a acompanhar a eficácia do seu site, dependendo da meta que definiu para ele.

Pensamentos finais

Isso foi para este post sobre como fazer um site! Como em todas as coisas na vida, quanto mais você pratica, mais fácil se torna. Permita-se brincar com diferentes partes do processo de criação do site, porque geralmente é assim que você aprenderá mais. Se você tiver alguma dúvida ou sugestão, sinta-se à vontade para comentar na seção de comentários abaixo!

Imagem em destaque via Darko 1981 / Shutterstock.com