By using’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor

    Join us!
elementor official

From png layout to Elementor Pro.



New Member
Hello! I want to transfer the layout (png image) to the Wordpress Elementor site. Please see the images attached. (Designer's layout and the image of the house he sent to me).

Firstly I think of recreating the upper block (Hero image of House with header and footer). I plan it to be 3 Sections.

The image of the house itself is not ready because as you can see there is a green layer on the left (with logo on the top),grey on the right (with nav menu) and the frame above it all. Is there a way to design it with background color in Elementor without Photoshop? But for now, I plan to use Photoshop:

Add a green layer to the left side and grey to the right with Photoshop. And then add this frame around the house (I think that the frame was created using the rotated version of the existing image of the house). After all of that, I plan to put widgets (transparent header, menu, heading, and footer) onto the image.

Am I on the right track or there is a better way to do this?

Any help would be very appreciated! Thank you!


  • 1.png
    414 KB · Views: 87
  • Render_1.jpg
    168.5 KB · Views: 61
Koni Kodes

Koni Kodes

David Foy has a tutorial on how to make nested rows and columns. It may give you some good ideas:

Latest posts

Latest Resources

Other Elementor Resources

elementor official