Site da Petrobras – a Reconstrução | Episódio 01 – Apresentação

Aprenda a recriar o site da Petrobras com WordPress e Elementor.

Como criar um site com Elementor a partir de um layout pré criado?

Se você trabalha como free lancer para uma agência, já deve ter recebido um layout que deu trabalho.

Pode até ser que já tenha falado a frase: “Isso não dá pra fazer”…

Mas e se fosse para criar o Site da Petrobras??

Pensando nisso…

Eu criei um desafio para mim mesmo e para você, que quer elevar o nível do seu conhecimento.

E nesse desafio você vai aprender duas coisas super importantes:

1. Como criar a base de um site pra que seu trabalho seja mais produtivo
2. Como usar CSS para ajustar os widgets do Elementor

Serão vários vídeos onde eu mostro os detalhes, cada etapa..

Nessa série você vai aprender os passos que eu uso para:

• analisar um layout
• criar um padrão CSS para cores e fontes
• montar as cores e fontes globais no elementor
• analisar o melhor caminho para os desafios do layout
• otimizar o fluxo de trabalho
• certificar-se de que o seu layout está de acordo com o que foi pedido

Site da Petrobras: Ferramentas que iremos usar

Extensões do Chrome

• CSSViewer
  • Para analisarmos as regras de cada elemento
• Stylebot
  • Para criarmos regras de CSS mais marotas
• ColorZilla
  • Pegar cores de algum elemento
• Snatchr
  • Gerar uma paleta de cores da página
• Image Downloader
  • Baixar todas as imagens da página
• Pagerule
  • Medir elementos
• Resolution Test
  • Verificar o layout em diferentes tamanhos de telas

Plugins

• Elementor
• Elemetor Pro

Tema

Hello, criado pela equipe de desenvolvedores do Elementor.

Truques de Web Design

Versão em Cache do Google para copiar textos. Vamos pesquisar “petrobras” no Google e clicar na setinha “versão em cache” e depois “somente texto”.

Então agora é só ver o vídeo, inscrever-se no canal e acompanhar a série.

Tem coisa boa vindo aí!

Porque criei esta série do site da Petrobras

Existem diversos vídeos no youtube ensinando a criar sites com Elementor.

Muitos videos são bem mais ou menos.

Poucos são excelentes!

Acontece que mesmo os vídeos nota 10, muitas vezes te ensinam a criar um site “com cara de template”.

E não tem nada de errado nisso!

Afinal, em um único vídeo, é difícil abordar todos os aspectos da criação de um site.

Por isso, os tutoriais usam muito layouts mais simples (sem muita dificuldade), para que o video não fique muito longo.

Então eu pensei…

E se eu mostrasse algo mais real? E se eu criasse um site que já existe?

E pra jogar mais lenha na fogueira…

E se eu recriasse o site de uma empresa conhecida que não tivesse sido feito no WordPress?

Então pesquisei sobre sites brasileiros e encontrei diversas opções.

Entre todas elas eu gostei do site da Petrobras.

Porque escolhi este site?

Como já disse antes, eu queria uma empresa brasileira e super conhecida. E depois porque eu gostei da tipografia, do espaçamento, do layout em geral.

Mas tem algo mais…

A carrossel da home page. Ele é bem diferente da maioria dos sites. Ao invés de ter uma imagem de fundo cobrindo toda sua área, ela cobre apenas metade.

E o texto fica na outra metade. E se você notar, ainda temos os ‘bullets’ de navegação descentralizados. Ou seja, eles estão mais para a direita. Não estão exatamente o centro do carrossel, como o Elementor usa.

Então, olhado agora. Parece ser um desafio bacana. Fora a chance de aplicar isso em futuros projetos de web design para seus clientes.

O que esperar dessa séria sobre o site da Petrobras

Certamente, surgirão momentos em que eu precisarei contornar a situação.

Vai faltar um widget

Vai dar pau no mobile

Alguma funcionalidade que não rola

Mas é aí que você se separa da grande massa.

É vencendo um desafio que você ganha experiência e sobe o nível do seu trabalho.

Portanto…

Corre pra ver o vídeo e coloque em prática agora mesmo.

Se tiver dúvidas, pode deixar lá no meu canal que eu sempre passo lá pra responder.

Sei que a correria do dia a dia nem sempre me permite estar lá diariamente, mas prometo que farei o meu melhor.

E te espero nessa nova jornada!