Websites | Simplified
Getting the best out of the Elementor Page Builder is not an easy task, but it’s not super hard to pick up the basic skills for adding content. The following guide has been produced using the Stairs Technique Physiotherapy Leaflet page as an example. From the following, you should learn how to use an Elementor Template to create a simple page, add content to it and move elements around on that page. This should give you the basic outline to how powerful Elementor really is. Elementor is installed on the Limbrecon.com website, meaning it is available to be used to create content for any of the types of content on the website. Be it a Post, Media Item, a Page, Staff Profiles, EduResources or adding Users, Elementor is there and ready to assist you with your page design.
Stage One – Creation of the Resources Page:
Add New EduResource Screen – Pre-saved: (click image to view larger)
On the screenshot above, you can see by the highlighted areas, the sections of this page which need to be completed upon adding a new EduResource entry to the website. They are:
On the right of the screen are the Resource Page Options. These need to be set correctly in order for the content to appear correctly, but follow this very simply guide and you will be all good:
When these settings are set, importantly click ‘Save Draft’ from the Publish block at the top right of the page. This will save the page and our settings but won’t publish the page as live, so it can still be worked on.
Stage Two – Launching the Elementor Page Builder:
Next up we are now ready to launch the Elementor Page Builder. – Above the editor on the Add New Resources page, click the large blue ‘Edit with Elementor button’. Elementor will launch and you will notice the screen change a little. Now you have a toolbar / properties panel on the left of the screen and a preview of your page on the right of the screen. You will notice that aside from the header, the page is blank.
Elementor Editor Opened – (click image to view larger)
On the screenshot above you can see the Properties panel on the left and the blank screen on the right. As we are working on adding a new Resource to the site, I have pre-created a basic content template for this page. All we have to do is load it, then use the existing blocks on the page to edit and change the content. Let’s begin:
You will now see some content on the page. This will include a title, subtitle, byline, description and then the main body of the content. If you hover over any of these parts of the website, you will notice a blue line appearing around them. This indicates that the content can be edited. These are called ‘Content Fields’ or ‘Elements’. To edit the content of a Content Field. Simply click on it once and you should notice that the panel on the left of the screen changes to display the currently selected content. Simply edit the Content File in the left-hand panel and you will see the change happening live on the right of the screen.
Elementor Content Template Opened – (click image to view larger)
This is the most basic level of Editing available within Elementor. Each Content Field has a type. For example, everything above the three images is classed as a ‘Text Field’. The images are called ‘Image fields, and also on the page is an Content Field called a ‘Spacer’ This is an invisable content field which is used to simply add space between fields. A better word is ‘Elements’. The next stage for this page is to fill in the Image Placeholders with the images required for this page. These images should be created prior to making the page, so that you are not left with Placeholder content on a live page. However it is possible to save the page as a draft while you are awaiting images. For assistance with Images & the preparing of images for the web, please send a Support Ticket anytime.
We will use the Media Library to add the images we require for this page. There are 6 images. We can access the Media Library from within Elementor. Let’s get started:
Patient Leaflet Download Link on Frontend – (click image to view larger)
The screenshot above shows the link to the Patient download we set back in stage one. This is how it displays to the end user. This is automatic and this is why adding files for download during the creation of the page can boost the on-screen presence and add interactivity to your content.
In terms of editing this Content Template for the page we are currently working on, we are done. The final stage would be to add the Footer to the page, and with Elementor, this has been pre-created also. It is simply a case of choosing a file from the Elementor Library. The file we need is called ‘Footer[Themev2]’. We do this in the same way as before. Click the Grey Folder Icon in the dashed box below your page content. Click on ‘My Templates’, Click on ‘Footer[Themev2]’ and click Insert. Click No when the Pop up comes up. The page will reload that the Footer will be added below your content.
Finally, click on the Green Publish button at the bottom of the panel on the left. The page will save and your newly added Resource page will be added and pushed live on the website. To view it, visit the Resources page.
Powered by BetterDocs
Your email address will not be published. Required fields are marked *
Save my name, email, and website in this browser for the next time I comment.