Creating a Page

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.

Creating a Resources Page from Scratch with Elementor #

Stage One – Creation of the Resources Page:

  1. Login with your Editor Account Details
    1. Visit https://limbrecon.com/wp-admin
    2. Use your Editor Username
    3. Enter your Editor Password and click on login
  2. From the Dashboard Menu on the left of the screen, click on the EduResources link. A list of EduResources will now be shown.
    1. Click on the ‘Add New EduResource’ button – the defualt WordPress editor will load. – Before we edit the page with Elementor, there are a few options to setup.
    2. Add a Title to your EduResource. – This is your page title, and this is what people click on to view your content.
    3. Below the editor are some Resource Files Options – You can currently add a YouTube video automatically by pasting a URL to the video in the first box provided. Additionally you can currently attach two documents to the Resource. For example, if you had a printable PDF document version of your Resource that you wanted people to be able to download, add your files here.
    4. On the right of the page, the Featured Image box is where you would add a Photograph to represent the content you are creating. Click the ‘Set featured image’ link to upload or choose an image from the Media Library.
    5. In the Specialty box, please select the Speciality the content you are adding belongs to. – If a relevant one doesn’t exist, simply click ‘add specialty’ to add your own.
    6. In the EduResource Attributes box, leave Parent set to ‘(no parent)’ and the Template setting has three options. – Select ‘Elementor Canvas’ here. [Do NOT use Elementor Full Width].

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:

  1. Resource Title – Add a title to the Resource, usually match this with the content held in the resource. In our example this is ‘Stairs Technique [two crutches].
  2. Resource Files – Below this is the Resource Files section. Here is where you would add a YouTube video to your Resource (if available) or files for Patients and end users to download. This is shown automatically on the frontend of the website once the Resource is live, I will show this later in this tutorial. For our example there is a PDF document available for download. This was added via the Media Library earlier.

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:

  1. Featured Image – Add an image via uploading to or choosing from the Media Library. Clicking the ‘Set featured image’ button will take you to the Media Library. Either drag and drop an image into the Media library, or select one from those already existing within the library. For our example we will use the same image as is shown on the other Physiotherapy Resources, which is already uploaded to the Media Library.
  2. Specialty – Select the relevant Speciality that the Resource belongs to. For our example this will be Physiotherapy. If a relevant Speciality does not exist, click ‘+Add Speciality’ to create one. Remember to select it after creation.
  3. Page Attributes – The Parent setting should be ignored at this time, this is not required. The Template however, as we are going to use Elementor to design the content of this page, please select ‘Elementor Canvas’. This will tell the page to load the correct template to allow our content to be seen on the frontend of the website.

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:

  1. Click on the Grey Folder Icon on within the dashed box. The Elementor Library will display. Select ‘My Templates’ from the top 3 links.
  2. Scroll down till you see ‘SimpleResourceContentTemplate’ and click ‘Insert’. A Popup will ask you if you wish to Import Document Settings. Select No and the page will reload with the Content Template.

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:

  1. Click on the first image placeholder. You will notice the panel on the left changes. Click on the placeholder image again, but this time in the panel on the left. The Media Library will open.
  2. Click on Upload Files and then either drag and drop your files into the window, or use the ‘Select Files’ button to select the images you wish to upload.
  3. The Media Library will update showing the freshly added images. Click once on the one you want to place in this first image placeholder field and click on Insert Media.
  4. Repeat the process for the rest of the image you require on the page. Click the Image Placeholder on the page, then again in the left panel and either select the image from the Media Library, or upload a fresh image & select.

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

Leave a Reply

Your email address will not be published. Required fields are marked *