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..
Step 2: Let us first add some styles to the heading that we just recently added.
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.
Step 4: You can add an overlay to the background image if you want to emphasize the heading of the banner.
Step 5: Let’s add some padding at the top and bottom of the section so it would really look like a banner.
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”.
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!
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”:
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.
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!
If you have more concerns or have encountered other issues, let us know in the comments section!
