Como fazer um site do zero em 2023 (tutorial detalhado)
Publicados: 2023-07-07A 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á.
- 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?
As duas principais opções que você tem ao decidir construir seu próprio site são:
- um sistema de gerenciamento de conteúdo
- 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
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
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.
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.
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 .
Selecione o domínio novo, existente ou temporário do seu site e clique em continuar .
Em seguida, selecione Iniciar novo site .
Em seguida, selecione WordPress , digite seu endereço de e-mail e crie uma senha. Em seguida, clique em continuar .
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
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
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.
Baixar Divi
Aqui, você encontrará a possibilidade de baixar o arquivo de tema 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 .
Na parte superior da página, você notará um botão que diz Adicionar novo . Clique neste botão.
Em seguida, clique em Carregar Tema .
Procure a pasta compactada Divi que você baixou na parte anterior deste tutorial e clique em Instalar agora .
Depois de conseguir isso, você também poderá ativar o tema!
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 .
Em seguida, clique em Nome de usuário e Chave de API .
Você pode criar e copiar novas chaves de API na área de chaves 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).
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
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
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
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
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 .
Dê um título à sua página. Neste caso, vamos chamá-lo de Home .
Você pode salvar a página como rascunho ou publicá-la para começar a trabalhar nela.
Quando estiver pronto, mude para o Divi clicando em Use 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!
Para fazer upload de um layout para sua página, escolha a opção do meio que diz Procurar layouts .
Assista à nossa biblioteca de pacotes de layout e layouts se desdobrando!
Você pode usar a barra de pesquisa na barra lateral esquerda se estiver procurando por um pacote de layout específico.
Para este tutorial, usaremos o layout da página inicial do Marketing Layout Pack. Vamos apenas digitar Marketing na barra de pesquisa.
Em seguida, selecionaremos a página inicial do Marketing.
Isso nos levará à visualização completa do pacote de layout.
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!
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!
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.
Salvar & Publicar
Você pode salvar e publicar depois de aplicar as alterações desejadas em sua página!
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 .
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.
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.
Continue adicionando as páginas que deseja em sua navegação.
Feito isso, defina seu menu como o menu principal .
E salve seu cardápio. Este menu principal agora será refletido no cabeçalho do seu site automaticamente.
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 .
Clique em Adicionar cabeçalho global para adicionar um cabeçalho.
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