WordPress: crie sites com Elementor e Figma

Visão geral - Apresentação

Olá, pessoa!

Meu nome é Jonathan Jacinto, mas pode me chamar de Jota, e serei o seu instrutor nesse curso de WordPress: Sites com Elementor.

Objetivos

O objetivo é introduzir vocês a essa plataforma de desenvolvimento de sites extremamente popular e que facilita o processo de desenvolvimento, principalmente para quem não tem uma base de programação muito técnica.

O projeto

Partiremos de um cenário em que temos como cliente uma agência de viagens chamada "Jornada Viagens", que solicitou a construção de um site completamente novo. Tendo como referência um layout desenvolvido por um designer, construiremos todos os elementos necessários para a exibição da nova identidade visual da nossa cliente.

Como exigências para o desenvolvimento, nossa cliente pediu que o site fosse:

• Administrável;
• Rápido de ser desenvolvido;
• Customizável, ou seja, que ela pudesse fazer alterações e customizações com uma maior facilidade;

O WordPress é perfeito para esse cenário, porque ele nos dá recursos, plugins, temas e ferramentas para edição de elementos visuais diretamente no navegador. Com isso, a pessoa usuária tem o poder de fazer alterações à vontade, seguindo um layout de referência ou não.

Ao longo desse curso, introduziremos vocês a esse mundo do WordPress, apresentando as ferramentas disponíveis. Vocês também terão um pouco de experiência com a ferramenta de design Figma, que usaremos para explorar os elementos visuais antes de transferi-los para a estrutura do site em si.

Pré-requisitos

Vocês não precisam ter nenhum pré-requisito para este curso. Não é necessário nenhum tipo de conhecimento em programação, mas se tiverem conhecimento básico de HTML pode ajudar bastante.

Porém, qualquer pessoa pode iniciar esse curso sem nenhum problema, porque é um curso bastante visual e prático. Ele te dará confiança para construir seus primeiros sites, mesmo sem ter um conhecimento de programação aprofundado.

Convido vocês a virem para o próximo vídeo comigo e iniciarem essa jornada.

Vamos lá?

Visão geral - Ferramentas necessárias

Para darmos início à construção do site para nossa cliente "Jornada Viagens", precisaremos de duas ferramentas: o XAMPP e o WordPress. O XAMPP é um ambiente onde nosso site será executado e o WordPress é a ferramenta que utilizaremos para a construção das páginas, dos posts e tudo mais que o site precisa, seguindo o layout definido.

Fazendo o download das ferramentas

Antes de instalarmos essas ferramentas, precisamos fazer o download delas, então começaremos pesquisando pelo XAMPP no Google.

XAMPP

O XAMPP é, na verdade, um conjunto de ferramentas, porque ele reúne todo o ferramental necessário para termos um ambiente de execução do nosso site. Vamos entender essa sigla.

• X é de multiplataforma;
• A é de Apache;
• M é de MariaDB;
• Primeiro P é de PHP;
• Segundo P é de Perl.

Sendo multiplataforma, o XAMPP pode ser executado tanto no Windows, quanto no Linux e no MacOS, ou seja, em qualquer ambiente. Além disso, o apache significa que o servidor é o responsável por executar as páginas do nosso site.

O MariaDB é o banco de dados MySQL, que armazena as informações do nosso site. Por fim, temos o PHP e o Perl. O PHP é a linguagem utilizada pelo WordPress para execução e programação dos seus recursos, ou seja, a linguagem que ele depende para ser executado.

Já o Perl é uma linguagem auxiliar utilizada de forma mais generalista, podendo ser usada tanto para questões web, quanto para outras funções em um servidor. Para nós, o Perl não será muito necessário, pois o PHP é a linguagem principal do WordPress, mas o Perl também vem no pacote XAMPP.

Instalando o XAMPP

Após buscarmos "XAMPP" no Google, podemos clicar no link "Download XAMPP" para acessarmos a página das opções de download do XAMPP. Como comentei, ele é multiplataforma, disponível para MacOS, Linux e Windows.

Faremos o download da versão do PHP 8.2, que é a versão mais recente, lançada em novembro de 2022. Nela teremos todos os pacotes de segurança instalados e bugs corrigidos. Então eu deixo o alerta para sempre instalarem a versão mais recente dos softwares e recursos que irão utilizar.

Clicaremos no botão azul escrito "Baixar (64 bit)" e daremos início ao processo de download iniciado. Se o download não for iniciado, podemos clicar no link "clique aqui", na parte superior da página, para forçar a inicialização. No meu caso, não precisou.

Já temos o ambiente local para desenvolvimento para executarmos nosso site dentro da nossa máquina antes de colocarmos no ambiente final, que é o ambiente de produção. Agora precisamos do WordPress.

Instalando o WordPress

Abriremos uma nova aba no navegador e pesquisaremos "download WordPress". Em seguida, clicaremos no link "Baixar | WordPress.org Brasil". Assim, abrimos a página de download do WordPress como recurso, para utilizarmos em outros locais.

Rolando a página para baixo, temos o botão "Baixar o WordPress 6.2". Novamente, sempre façam o download da versão mais recente. Durante a gravação desse curso, a versão mais recente era a 6.2, mas se tiver uma versão superior quando forem fazer o curso, optem pela versão mais recente pelos motivos que já comentei, como correção de bugs e falhas de segurança.

Conclusão

Após os downloads serem concluídos, temos os dois elementos principais para criarmos o site para a "Jornada Viagens":

• WordPress: ferramenta que utilizaremos para criar o site, incluindo páginas, upload de imagens, separação de posts e categorias;
• XAMPP: ambiente em que esse site será executado, emulando o ambiente de produção, mas na nossa máquina.

Agora podemos partir para a instalação de cada uma dessas ferramentas. Vamos lá?

Visão geral - Instalando o XAMPP

Feito o download dos recursos, iniciaremos a instalação deles.

Etapas da instalação

O primeiro que vamos instalar é o XAMPP, que é o ambiente de execução. Para isso, abriremos a pasta em que fizemos o download e clicaremos no executável. O Windows vai pedir aqui permissão para executar o instalador e ele vai iniciar. Fazendo isso, aparece uma janela no centro da tela escrito "Welcome to XAMPP!" (Boas-vindas ao XAMPP!).

Apareceu uma janela com um aviso, informando que alguns recursos do sistema estão restritos para o XAMPP, mas podemos continuar a instalação sem problemas clicando no botão "OK", no canto inferior direito da janela.

A janela "Setup", de configuração do XAMPP, é aberta no centro da tela e a primeira mensagem é a de boas-vindas. Clicamos no botão "Next" (Próximo), no canto inferior da janela para iniciarmos a configuração.

A janela atualiza para etapa "Select Components" (Selecione os componentes), onde temos os componentes do XAMPP. Como eu disse, o XAMPP é um pacote de recursos, então podemos selecionar os recursos que queremos ou instalar todos os recursos padrões que ele tem. No nosso caso, manteremos a instalação de todos os recursos, bastando clicar novamente em "Next".

A janela atualiza para seção "Installation folder" (Pasta de instalação). No campo "Select folder" (Selecione a pasta), ele já cria uma pasta chamada XAMPP no disco C, que é o local de instalação padrão. Manteremos essa pasta, então clicaremos no botão "Next".

A próxima seção é a "Language" (Idioma). Ele só dá duas opções de idioma: inglês ou o alemão. No nosso é muito melhor seguirmos com o inglês, então clicaremos novamente no botão "Next".

Em seguida temos a seção "Ready to Install", com uma mensagem avisando que a instalação está pronta. Clicando no botão "Next", no lado inferior direito da janela, iniciamos a instalação do XAMPP no computador. Quando a instalação terminar, retornamos.

Aviso: Durante a instalação pode aparecer uma janela do Windows falando do firewall. Se acontecer, basta clicar no botão "Permitir acesso", no canto inferior direito da janela. Dessa forma, o firewall do Windows não bloqueia os módulos do XAMPP e a instalação acontece corretamente.

[Animação de carregamento com sons de circuitos eletrônicos]

Ativando os módulos no XAMPP

Após a instalação ser finalizada, aparece uma janela com uma mensagem informando que o setup foi concluído. Nessa janela tem uma caixa de seleção selecionada perguntando se queremos iniciar o Painel de Controle ao final da instalação. Manteremos ela marcada.

Clicaremos no botão "Finish", no lado inferior direito da janela. Fazendo isso, ele abre o Painel de Controle do XAMPP. Aqui a janela apareceu no canto superior esquerdo da tela, então vou trazê-la para o centro.

Como eu expliquei, o XAMPP é um pacote com vários módulos. No Painel de Controle encontramos um tipo de tabela com os módulos que podemos administrar ou iniciar. Nesse curso, os mais importantes são o Apache e o MySQL. O Apache é o servidor onde as páginas do nosso site serão executadas e o MySQL é o banco de dados.

Na coluna "Actions" (Ações) do painel, temos várias colunas de botões, um para cada módulo. A primeira coluna é de botões "Start" (Iniciar). Clicaremos no "Start" correspondente ao Apache, que é o primeiro, e depois no correspondente ao MySQL, que é o segundo.

Feito isso, se o nome dos módulos ficarem dentro de um retângulo verde, significa que o serviço foi iniciado com sucesso. Além disso, o botão em "Actions" mudará de "Start" para "Stop" (Parar).

Para administrar esse serviço, podemos clicar nos botões "Admin", que ficam na segunda coluna de botões da "Actions", ao lado direito dos botões "Stop". Clicando no botão "Admin" do Apache, ele abre a página http://localhost/dashboard do Apache. Essa é uma forma de validarmos se o Apache está executando, então, se aparecer essa página, está tudo certo.

Voltando para o painel de controle, se clicarmos no botão de "Admin" do MySQL, a página phpMyAdmin abrirá no navegador, com o link http://localhost/phpmyadmin. O phpMyAdmin é gerenciador de dados da nossa aplicação.

Portanto, no Apache temos a confirmação de execução do servidor de páginas, onde as nossas páginas serão executadas e entregues para o cliente que estiver visitando o nosso site. A página do phpMyAdmin é a confirmação do administrador do banco de dados, que utilizaremos para fazer a instalação e criação do banco de dados do nosso site.

Com isso, instalamos o XAMPP e estamos utilizando os módulos necessários para executarmos o nosso site. Falta apenas o WordPress.

Vamos lá!

Sobre o curso WordPress: crie sites com Elementor e Figma

O curso WordPress: crie sites com Elementor e Figma possui 188 minutos de vídeos, em um total de 52 atividades. Gostou? Conheça nossos outros cursos de WordPress em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Visão geral
• Configurando o WordPress
• Apresentando o Elementor
• Seções da Home
• Finalizando a Home
• Rodapé e detalhes finais