Wordpress/Elementor

Page builders: Elementor and Wordpress (WP) editor

Most pages have been set up using the page builder Elementor. These must be edited in Elementor. If you edit these in other page builders or WP Editor you will break the layout. If that happens, just return to Elementor and the layout will be restored.

DO NOT EDIT THE FRONT PAGE IN ANYTHING BUT ELEMENTOR

However, you can add and edit new posts and pages in normal Wordpress and stay with that if you want.

The quickest way to access the Edit functions, is to log in and view the page in your browser. Right: "Edit page" to use WP Editor, "Edit with Elementor" to use Elementor. If the page/post has a fancy layout, it it is likely Elementor.

Content organisation

News or permanent content?

The main principle of content structuring is the differentiation between news content and permanent content. If you follow this principle your site will stay current and be easy to maintain.

POSTS: News content is content with a sell-by-date, such as calls and jobs, announcements of prize winners, recent projects, events. This content should be published as posts.

PAGES: Permanent content should be published as pages, Examples: About us, generic pages which describe the organisation's purpose and activities. Or landing pages with an introduction which lists posts in a category - ie prize winners, funding calls, or events.

Organise all posts into categories

The categories have been created based on the content and structure. If you stick to assigning all posts to these categories, then your site will stay tidy and easy to maintain. A post can have more than one category, ie it can be assigned as “news” and also as “jobs”. Once this post is no longer “news” then unassign the category “news”, and it will not longer show in your news widgets but will remain in your jobs archive.

NO POST SHOULD HAVE THE CATEGORY “Uncategorized”.

Post grids - auto generating lists of posts in the same category

The listings of posts or pages on one of the main pages are generated by the Post Grid widget in Elementor. News posts which show on the home page news widget are posts assigned the category “news”.

There are post grids on other pages listing posts in other categories. If you want a new post to show, go to WP dashboard > posts > find an example post > check which category is assigned > give your new post the relevant category.

If you want a post in a specific category ie “events” to display in the news section on your homepage, assign both categories, “news” and “events”.

See below for how to determine how a post is in a post grid (ie title, image, excerpt)

Adding posts and pages

Option A: Adding posts / pages with the EA Duplicator

Duplicating content can save a lot of time. So you could use the EA duplicator when creating new post and pages. Use the this duplicator to duplicate post/page from a similar section or category, or a post/page with similar layout to what you require.

Go to posts/pages in WP dashboard
Identify an existing page with an useful layout, or a post in the same category
Hover over the post/page title to see options

Click EA duplicator, the page/post will be duplicated as a draft with the same title
Hover of this new draft version and click “quick edit”

Change Title, set status to “published”, if it’s a post change the category from “uncategorized” to the relevant category, then click update

Now click "Edit" or "Edit in Elementor"

Option B: Adding post/page without duplicator

click new > add page/post
enter your title
Click “Edit” or “Edit with Elementor” and add your content.
If this is a post: DO NOT FORGET TO SET THE CATEGORY

Templates for pre-made text and image boxes

To aid layout work, I have set up templates for the most common text layout scenarios

Heading and 3 columns – white background and border
Heading and 2 columns – white background and border
3 columns - different background colours
Heading and single column – white with border
Heading and single column

1. Inserting a template using the template icon

2. Finding and selecting My Templates

3.Do not apply settings

Adding and editing existing content

Working with Elementor

The most common functions you need to know are indicated in the screenshot below:

Choose element by selecting and dragging into place
Edit element
Delete and other options by right-click
How to insert a template (see further explanations in the template how-to section)
History - how to undo your steps - useful!
How to access page settings(described in more detail in the next screenshot)

Page settings in Elementor

In page settings you can edit the page title, add a custom excerpt (posts only!) and add a featured image. This allows you to decide how the post/page will be presented in a post grid or other post listings

Duplicating existing containers in Elementor

Duplicating existing content is an efficient way to create new content at the same time as maintaining a tidy layout. Below are a few screenshot which exemplify how that can be done

Containers vs elements

Right: Note the difference between a container and the element inside it (text, image, form, embed etc). When duplicating content, we mostly duplicate the container by clicking the container icon, then we replace the content inside by clicking the edit element icon.

Example 1: team member

Hover over the team member widget
Right-click on the edit icon to the right
Choose copy
Go to an empty container and paste the team member widget into it
Now replace the existing content in left pane with the new team member's image and details

If the widget does not look right, there may be missing styles in the container:

Right click the container icon of the first container
Click copy
Paste style into the new container

Example 2: Partner logos

Hover over the last container with a logo inside it
Right-click the container icon and duplicate

If the widget does not look right, there may be missing styles in the container:

Click the edit icon to the right to edit the logo image
Now replace the existing content in left pane with the logo image caption and link

Example 3: Duplicate a whole row of logos

Hover over the container which houses the smaller containers - the blue border will aid you.
Right-click the container icon and duplicate

Click the edit icon to the right to edit the logo image
Now you can delete the images you don't want
Note: delete images rather than containers, to keep the layout, size and structure