How to Create Section Templates in Elementor | Elementor Resources 1261184322971373023
How to Create Section Templates in Elementor

How to Create Section Templates in Elementor

It is pretty normal for a website to have the same element/s throughout its pages. It can be pretty tiring for the developer to add and style “again” a specific element if the website’s inner page/s will be using that element over and over again. 

I would like to use a “banner” for this tutorial which will be the element that will be used in different pages of the website. 

Head now to your workspace so we can proceed to our tutorial! 

Step 1: First, let’s add a “Heading” widget. Head for the widget tab, select the inner section and drag it all the way to your workspace. It will serve as the title/heading of that page..

save to library blog image 2

Step 2: Let us first add some styles to the heading that we just recently added.

save to library blog image 4

Step 3: We can now add the background image that we will be using for this tutorial. I managed to find a “high-quality” image that is entirely free at pexels.com. So go ahead and choose an image of your choice! Edit the outer container of the heading widget (section), head to the widget pane and click the “Style” tab. Find the “Background Type” and click “Classic”. You can go ahead to copy the styles that I choose for our background image.

save to library blog image 5

Step 4: You can add an overlay to the background image if you want to emphasize the heading of the banner.

save to library blog image 9

Step 5: Let’s add some padding at the top and bottom of the section so it would really look like a banner.

save to library blog image 6

Step 6: We’re almost done! We can now save this element for us to use this in different pages of the website. In order to do that, again, right click on the “Edit Section” of the heading’s container and click “Save as Template”.

save to library blog image 8

Step 7: After that, we can give a name to the templates that we wish to save and use it again to the other pages of the website. After giving a name on it, go ahead and click Save! In this panel, you will see the elements that you save as templates that can be used again without adding a raw element and adding styles to them again!

save to library blog image 7

Now you can head to the pages that you want to apply the banner that we made earlier. In order to add that element, just click on “Add Template” icon and find the template that you wish to add and click “Insert”:

save to library blog image 3

And we’re done!!! Even though you saved it as a template, it doesn’t mean that you can edit them. Go ahead and replace the heading, background etc.

save to library blog image 1

Thanks for Reaching This Far! 🙂

I hope we were able to help you with this tutorial! You can also try to install the Elementor Pro Version and get access to more Elementor templates for free!

Get Elementor Pro Now

If you have more concerns or have encountered other issues, let us know in the comments section!

Leave a Reply

×
×

Cart