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

Escrito por

Reconstrução do site da Petrobras com Elementor e Wordpress

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

Site da Petrobras - a Reconstrução com Elementor e WordPress

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.

Imagem do carrossel do site da Petrobras

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!

Compartilhe este artigo

Compartilhar no facebook
Compartilhar no linkedin
Compartilhar no twitter
Compartilhar no email
Compartilhar no pinterest
Compartilhar no whatsapp
Compartilhar no telegram
Compartilhar no email

Curso Elementor Grátis

Aprenda o construtor de sites mais usado atuamente

Explore mais artigos

Como Traduzir Site em Wordpress [Plugin Gratis]
Desenvolvimento Web

Como Traduzir Site em WordPress [Plugin Gratis]

Neste vídeo vou te mostrar como traduzir site em WordPress. Se você já passou raiva tentando traduzir um site em WordPress, saiba uma coisa: eu sei como você se sente. Com o plugin Conveythis as coisas são mais simples. Ele traduz automaticamente em poucos minutos. Veja o vídeo completo pra traduzir seu site em WordPress

tipografia e cores elementor
Elementor

Tema Elementor: Guia de Estilo de CSS – Tipografia e Cores no WordPress

Neste vídeo eu mostro como criar a Tipografia e a Paleta de Cores do Tema WordPress usando o Elementor. Você vai aprender a descobrir quais cores e fontes o site da Petrobras está usando.Isso vai facilitar seu trabalho na hora de inserir estes dados no Tema.

Livros que indico


Quer dar um gás no seu site?

Vamos bater um papo que eu te ajudo

Curso Elementor Grátis

Aprenda todos os Widgets do Elementor nesse Curso Elementor exclusivo para você