Petrobras website - Reconstruction | Episode 01 - Presentation

Learn how to recreate the Petrobras website with WordPress and Elementor.

Petrobras website - Reconstruction with Elementor and WordPress

How to create a website with Elementor from a pre-created layout?

If you work as a free lancer for an agency, you must have already received a layout that gave you work.

It may even be that you have already said the phrase: "It can't be done" ...

But what if it was to create the Petrobras Site ??

Thinking about that…

I created a challenge for myself and for you, who want to raise the level of your knowledge.

And in this challenge you will learn two very important things:

  1. How to create the base of a website so that your work is more productive
  2. How to use CSS to adjust Elementor widgets

There will be several videos where I show the details, each step ..

In this series you will learn the steps I use to:

  • analyze a layout
  • create a CSS standard for colors and fonts
  • assemble the global colors and fonts in the elementor
  • analyze the best path to layout challenges
  • optimize workflow
  • make sure that your layout conforms to what was requested

Petrobras website: Tools that we will use

Chrome extensions

  • CSSViewer
    • In order to analyze the rules of each element
  • Stylebot
    • To create more naughty CSS rules
  • ColorZilla
    • Picking colors from some element
  • Snatchr
    • Generate a page color palette
  • Image Downloader
    • Download all page images
  • Pagerule
    • Measure elements
  • Resolution Test
    • Check the layout on different screen sizes


  • Elementor
  • Elemetor Pro


Hello, created by the Elementor developer team.

Web Design Tricks

Cached Google version for copying text. Let's search for “petrobras” on Google and click on the arrow “cached version” and then “text only”.

So now just watch the video, subscribe to the channel and follow the series.

There is a good thing coming!

Because I created this series on the Petrobras website

There are several videos on youtube teaching how to create websites with Elementor.

Many videos are more or less.

Few are excellent!

It turns out that even the 10-note videos often teach you how to create a “template-like” website.

And there's nothing wrong with that!

After all, in a single video, it is difficult to address all aspects of creating a website.

Therefore, the tutorials use much simpler layouts (without much difficulty), so that the video doesn't get too long.

So I thought…

What if I showed something more real? What if I created a website that already exists?

And to add more fuel to the fire ...

What if I recreated the website of a well-known company that wasn’t done on WordPress?

So I researched about Brazilian sites and found several options.

Among all of them I liked the Petrobras website.

Why did I choose this site?

As I said before, I wanted a Brazilian company and very well known. And then because I liked the typography, the spacing, the layout in general.

But there is something more ...

The home page carousel. It is quite different from most sites. Rather than having a background image covering your entire area, it covers only half.

And the text is in the other half. And if you notice, we still have decentralized navigation bullets. That is, they are more to the right. They are not exactly the center of the carousel, as Elementor uses.

Carousel image from the Petrobras website

So, looked now. It seems to be a nice challenge. Out of the chance to apply this to future web design projects for your clients.

What to expect from this series on the Petrobras website

Certainly, there will be times when I will need to get around the situation.

A widget is missing

It will stick to the mobile

Some functionality that does not scroll

But this is where you separate yourself from the great mass.

It is by winning a challenge that you gain experience and raise the level of your work.


Run to see the video and put it into practice right now.

If you have questions, you can leave it on my channel and I always go there to answer.

I know that the rush of everyday life does not always allow me to be there daily, but I promise that I will do my best.

And I wait for you on this new journey!

Free Elementor Course

Learn all Elementor Widgets in this Elementor Course exclusive to you