Website Training

Updated Nov 2024

Welcome to Website Training

This course is built to be viewed on a Desktop and not tablets or mobiles.

Note Chrome Ad-Blockers can affect open/download buttons if so use Edge or Safari instead.

The website has been desiged using a combination of WordPress & Elementor. WordPress is the free basic building block of the website although most of the design work is carried out in Elementor which consists of Elementor Free & Elementor Pro which is a paid service.

Please be aware the objective of this training is to enable you to have enough knowledge to update pages in the website design and is not intended to be a full WordPress/Elementor designers course. I am happy to recomend youtube web based training on full website design on request but can be quite technical.

What is WordPress?

A tool to build professional websites without coding

Creating a website by writing HTML code, integrating CSS styles, and debugging a website’s backend are daunting tasks even for experienced professionals. WordPress and Elementor work together to make coding a thing of the past, enabling anyone to quickly create a professional website.

In this guide, we’ll take a look at what WordPress and Elementor are and how they work together to save you time developing sleek professional websites.

Let’s first take a look at WordPress.

WordPress

WordPress is a content management system (CMS) that simplifies the process of creating blogging websites.

At it’s core, it’s a user-friendly way to create the database underpinning your website without any need to know SQL, the standard database language. In addition to being designed for non-programmers, WordPress is an open-source platform; meaning it’s free to use. This open source approach led to the growth of a large and thriving global WordPress community in which members create themes and plugins to help others build their websites, and extend WordPress’s capabilites.

Elementor is one such plugin that has found popularity within the community thanks to its powerful editing and site building tools – tools which make building professional WordPress sites even more efficient and intuitive.

Did you know? WordPress powers ~43% of all websites on the internet!

WordPress.org

WordPress.org provides you with the software to create your own website. It can be referred to as self-hosted WordPress because you are responsible for hosting or, in most cases, finding a third-party, to host your site. So while the software is free, you will most likely have to pay for someone to host your site. There are a few other limitations:

No drag and drop editing capabilities
You are responsible for backing up and maintaining your site
You are responsible for the security of your site

Where does Elementor fit in?

Elementor is a popular WordPress website and webpage builder plugin that brings its own tools to the WordPress world. Perhaps the easiest way to look at it is that WordPress provides a building’s framework, while it’s Elementor that lets you build the beautiful mansion resting on this infrastructure.

One of the key tools allowing you to build your “mansion” is the Elementor Editor. This visual drag and drop editor allows web creators to seamlessly build webpages capable of sophisticated, dynamic functionality.

By using the editor to drag and drop widgets onto your page, you can save time creating your masterpiece. It means working more intuitively, with no need to code in order to create a professional website.

The Elementor Editor is a visual drag and drop editor for WordPress websites. — With the Elementor Editor, users drag and drop widgets onto the canvas to create a page.

Theme Builder

While the Elementor Editor allows you to build beautiful web pages, the Theme Builder allows you to put these pages together to create an entire website. Using the Theme Builder you create headers and footers for your pages, templates allowing you to create uniform pages and posts and even a creative, fun 404 page designed just for your site. I have used the Hello Theme for both MCTC & CTBC websites.

Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open source, and designed for users who want a flexible, easy-to-use, and customisable website. The theme, which is optimised for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced web creators.

Elementor's Theme Builder allows users to create a WordPress website quickly and efficiently. — The Theme Builder transformed Elementor from a webpage editor to a site builder.

Not only that, if you don’t have the time, or inclination to design your own site, Elementor comes with a kit library filled with ready-to-use sites that you just need to add your own content to.

Along with the free version of Elementor, there’s Elementor Pro, which is designed to give you more advanced professional features. These powerful tools include drag and drop ecommerce tools, embedded forms, and customizable features.

If you’ve had to code your own websites you know these features can take days to implement and test successfully. With Elementor and Elementor Pro, drag and drop means hours not days to complete a project. It also means you’re not worrying about how your code is working or how it might break.

The bottom line

WordPress was built, and does a great job of, holding the content of a website. Elementor was created with design in mind, making the process of building attractive, sophisticated, professional websites faster and more efficient. Drag and drop editing, the Theme Builder, the Kit Library, all combine to make Elementor a popular plugin to use on any WordPress website project. Elementor is a visual editor that keeps your workflow lean while providing you with a professional website when you’re done!

WordPress Dashboard

Once logged in you will be presented with the admin Dashboard this is a condensed version with items not relevant to updating the website content hidden. The Full Dasboard can be viewed by clicking on Show All bottom left of screen.

Understanding the Dashbord/WP Admin

Elementor is a complete website-builder solution that sits on top of the WordPress infrastructure, so you need to be familiar with WP (WordPress) Admin to work proficiently with Elementor.

This overview explains the most important points about WP Admin, especially those parts most heavily used in conjunction with Elementor.

WP admin contains a top bar and 11 standard tabs:

Posts
Media
Pages
Comments
Elementor
Templates
Appearance
Plugins
Users
Tools
Settings

Additional tabs like Light Speed Cache, Rank Math SEO also appear on WP Admin.

Starting at the top, let’s take a look at the top bar!

Top bar

You can use the top bar to visit the WordPress official website and your Elementor website, check out comments, create new pages, posts, add media, tweak Site Lock mode, and more. You can access your User Settings.

The top bar of WP Admin gives you access to the following:

wp dash 3 Understanding WP Admin 5 — WordPress Posts tab

wp dash 4 Understanding WP Admin 7 — WordPress Posts tab

What are pages and posts?

WordPress was originally created as a way for bloggers to create websites without having to know any code. WordPress was, therefore, originally designed for creating posts. Over time, web creators began using WordPress to create full-fledged websites, and pages became more important.

In this article, you’ll learn the differences between posts and pages. You’ll also learn when it’s best to use posts and when you’d be better off using pages.

What are posts?

Posts are used when you want to share information that changes frequently or when you want to share content on social media. If you have a blog that you update on a daily basis, each daily blog entry is a post.

Organization

Posts will appear in reverse chronological order. That means your newest posts will appear at the top of the page, and your older posts will be located at the bottom.

Features

Posts come with numerous built-in features that allow you to make them interactive:

Comment section
Buttons to share the posts on social media

Posts also have built-in features that allow you to organize them more effectively:

Author credit (you can include an author picture or avatar and a short biography)
Publication date
Categories
Tags

When to use

You don’t have to limit your posts to blog entries. Posts are also great when you want to announce new product releases or exciting information about your company, when you have time sensitive content, or when you have a schedule of events, etc.

What are pages?

Pages are a great way to describe your business or organization as a whole. The most common pages are the Home, About Us, Contact, and Product or Services pages. You can also use the 404 page to let your visitors know they’ve tried to reach a non-existent page on your site.

Organization

The organization of pages is hierarchical with parent pages and child pages. Parent pages have characteristics that they pass down to the child pages, like the overall theme or just the location of it.

Features

Pages come with no built-in features. If you want a specific feature on one of your pages, you can achieve that functionality by installing plugins.

When to use

It’s best to use pages for static content that rarely, or never, changes.

Posts and pages, a side by side comparison

What are Posts?	What are Pages?
Time: Dependent	Time: Independent
Organization: Reverse chronological	Organization: Hierarchical
Built-in features: Numerous	Built-in features: None

Posts and pages – a comparison

Note: You may, at certain points, come across the term “Post Types”. This is a category definition in WordPress and is unrelated to the term “post” as we use it in this article.

Gutenburg Editor

Gutenburg is the name given for the WordPress block-based editor. On our websites I only tend to use Gutenburg for Post & Basic Pages as find Elementor more comprehensive and visually easier to use.

The Gutenberg editor can easily add and remove the blocks. To create your first post go to the “Posts” in the left sidebar and press the “Add New” button.

An editor will open and you will see the white working space without excess elements. Add the post title in the special field at the top.

You can choose one from two methods to add the new blocks:

Add the block by clicking on “+” button. Choose the necessary one from the list of available elements.

Or if you know what content you want to add, type “/block_name”.

add blocks2 — In Gutenberg editor, you can add a lot of necessary blocks choosing from the block groups, such as common blocks, formatting, layout elements, widgets, and embeds. For more features, you should install special WordPress plugins.

Add visualities

It’s very hard to read the text without any media inside. When you create a blog post in WordPress, make sure to dilute the content with images, video, etc. You can simply add the image the same way we have added paragraphs in the previous step. Choose the “Image” or “Video” block and upload your media.

If you need more images and you don’t want to use a lot of space, choose a Gallery block to put images in a grid. You can change the block settings in the right sidebar. Enter the number of columns and link images.

Using the “Media & Text” block you can write the text next to your image.

If you have amazing content on different platforms and you want to add it to your blog post, you can do it with the help of “Embeds” block.

Or simply enter the link into the paragraph block and press “Enter” on your keyboard to make this action. Then your link will convert in “Embed URL” window.

Left sidebar settings

In the left sidebar of Gutenberg editor, there are some things you should try to use and get to know, in order to make your post more recognizable:

In status&visibility section, you can make your post visible to everyone, or private, and there is an opportunity to make it password protected. Also, you can choose the publishing date.
WordPress automatically creates a post link for you, called permalink. It takes your post title and transforms it into the form of link. But you can also change it as you wish to make it more SEO-friendly.

Add categories to organize the posts into several topics and let users find the necessary content faster.
Use tags to make your posts SEO-friendly and simplify the search.
Set featured image to present your article. You can see it on blog, home, and other pages, near the post title.

Write an excerpt to let visitors make a quick acquaintance with your article. Excerpt is a post summary. So try to make it as catchy as possible to attract more readers.

Editor top panel buttons

In the Gutenberg editor, there are some buttons that finish your work with a blog post:

When you make changes in your post, don’t forget to press “Save Draft” to save them.
“Preview” button allows you to see how your content will look on your website page without posting it.
To publish your article and make it visible on the webpage, click “Publish”.
Next to the “Publish” you will find the “Settings” button. By tapping on it you can hide or show the left sidebar from the editing field.
Ellipsis button opens more tools and options you can choose from.

We have written short guidance on how to publish on WordPress. Follow it to create your posts. In addition, we want to give you some advice to make your blog more popular and readable:

You should publish the content regularly. Try to make posts every day.
Find interesting ideas for your posts. To catch more readers try not only to copy someone’s content but share your own ideas.
Learn the basic marketing tips to promote your website.

Elementor

The default WordPress editor is fine for simple blog posts, but it doesn’t offer very many design options and you can’t see what your design will really look like until you click the preview button.

Elementor fixes that by giving you full drag-and-drop design flexibility with a live, visual builder – no CSS or HTML knowledge needed. When you’re creating a design, you’ll see your design exactly as your visitors will, which makes it easy to quickly adjust your design as needed.

Elementor offers countless design options and dozens of pre-built content widgets for everything from buttons to forms, sliders, pricing tables, and more.

In addition to designing individual posts and pages, you can also use Elementor to design your entire WordPress theme – including your header, footer, and everything in between.

Elementor Pages / ( Posts )

Elementor has beed used to produce the majority of pages and some of the more involved post on the website. I have included below a video by Elementor on creating your first web page. We will go into specific website pages and updating them later.

Webpages

Home

The Home page is made up of two containers both containing Posts. The first container includes MCTC show results in date order. This is achieved in the Query by including the category MCTC Shows to all relevant Result Posts. The second container includes all general mail Posts, Instead of include in the Query we use exclude to omit Show Results.

News

The News page uses the Edit Posts Widget which shows all posts in date order and includes three columns and six posts per page.

Shows

The Drop Down menu under shows includes Show Diary & Results pages. All these pages are made up of a Header and a Short Code Widget which links to the Tablepress Widget with corresponding ID number.

Show Diaries

Results Pages

The Results pages are identical to the Diary pages but with the exclusion of Venue, Dates & Schedule Columns. IE will rename 2024 Diary at end of year and remove Venue, Dates & Schedule Columns.

Show Results

The Show Results Page is made up of an Edit Tabs Widget

Each Years results are linked to years tab by Tablepress short-code Widget,

Champ Show CC Results

The CC Results Page uses a different Table Widget called Ninja Tables, the reason being it has better search functions with regards to CC Results. Have used this on another Breed Website and below explains the advantage.

As an example, if we put BOB in search box all BOB awards are shown however as one of the dogs names includes BOB this record is also shown.

This can easily be solved by clicking on pointer to the right of blue box & restricting search to awards.

You can add multiple searches into search box as below, as an example adding Birmingham to search box & only Birmingham bob’s will be shown.

You will notice that more than one Birmingham Society are being shown, this can be overcome by providing full dog description or if you click on header title the records will be sorted by show name. Note the arrow to the right of Show this allows to search up or down. All fields can be sorted by clicking on header and normal form sort is restored upon exit.

The form only shows 18 records at a time but you can use the pagination tool at bottom of page to scroll through all available records.

Please feel free to experiment with both search & sorting facilities you can always reset page by clicking on Menu again which will reload the page.

Open/Premier Show Classes

The Open/Premier Show Classes Page highlights another use of the Tablepress Widget which is used repeatedly through the website.

Critiques

The Critique Pages use a widget called Accordion, this presents as a list of Critiques and when you click on a title the critique is displayed.

Website Updates

Show Diary 2025

The Show Diary 2025 uses a Tablepress Table Widget to collate all information. We will need to update the show information when available starting with Show, Type, Show Date, Judge etc.

Let us start with a Show update. Scanning Fosse & Higham Press I found entry information for Birmingham National. The video below shows how to go about updating the website.

Show Results Table

Below is a video showing the creation of Results Table for Nov 2024 Cairn Terrier Association Champ Show.

Show Results

After a show has finished we need to add the results to the Diary. As an example, let us create the page for the Nov 2024 Cairn Terrier Association Champ Show.

Below video shows how to create webpage.

Show Photo Gallery

We now need to add the show images to the results page. First of all we need to upload the photos to the Media Library under the dashboard. We then return to the results page and click on link to create the Gallery where we add images from the Media Library. The video below explains the complete procedure.

CC Results Page

The CC Results Page uses a different Table Widget called Ninja Tables, the reason being it has better search functions with regards to CC Results.

The below video shows complete procedure taken including importing CC data from an excel.csv file.

The video shows how to create the excel.csv file from the existing Ninja Table, once you have done this you can save the file and use for updating with new show results.

Critiques Pages

The Critique pages are made up with an Accordion Widget. The Accordion widget allows you to display text in a collapsed, condensed manner, saving space while presenting abundant content. Visitors can see condensed titles and selectively expand items for more detailed information.

The Critique pages utilise an accpordion with a title for each critique and a text box for Critique wording.

As well Elementors own video I have included a demonstration of adding new Critique on our website.

The Elementor video demonstrates various content that can be added to each title as well as basic text box which I have used on website.

Committee Page

The Committee page demonstrates the use of the Elementor Testimonial carousel. The short video below shows how to edit the committee members.

WordPress logo	Click this to visit the official WordPress website.
Your site name	Click this to visit your Elementor website.
Comments	View the comments visitors left on your webpages.
New	Use the dropdown menu to create a new page, in addition to the media library, post, landing page, template or user.
Site lock	Indicates your page is inaccessible to visitors unless they have a code. For more details, see Site lock.
Support (Elementor Hosting users only)	Submit a support ticket or open support chat.
User settings	Access your user settings. This is located on the right-hand side of the top bar.

All Posts	See a list of all your site’s posts. Hover over a post, and select Edit with Elementor to edit the post.
Add New	Create a new post for your site.
Categories	Create, delete or edit your post’s categories. Categorizing your posts allows you to organize them more easily and helps you direct visitors to the information they’re looking for.
Tags	Create, delete or edit your post’s tags. Tags are a great way for search engines to find your posts.

Library	A gallery management tool for your website. The Media Library contains all the pictures and videos available to you.in your media library. Here you can view, edit captions and metadata, delete, and search for your media.
Add New	Click this to Upload media to your website.

All Pages	A list of all your site’s pages. Hover over a post and select Edit with Elementor to edit the page.
Add New	Create and edit a new page by selecting Add New, and then Edit with Elementor. For more details, see Create or open a page

Settings	Control default types and allow data sharing in the General tab, connect to third-party software in the Integrations tab,control features in the Advanced tab, and activate/deactivate experimental features in the Features tab.
Submissions	Access information visitors submitted using your website’s forms.
Custom Fonts	Add or Edit your site’s custom fonts.
Custom Icons	Add or Edit your site’s custom icons.
Custom Code	Add sitewide Custom Code to your site, for example, Google Tag Manager (GTM).
Role Manager	Assign roles to people with access to your website. Boost website security by making sure people have enough access to complete their tasks but no more than that. For more details see, Add a user.
Tools	Maintain and debug your website, import and/or export a website kit.
System Info	Lists details about your site’s server environment. This information is often needed when debugging your site.
Getting started	View the video, Getting Started with Elementor.
Get Help	Clicking this takes you to the Elementor Help Center.

Saved Templates	Access templates you created and saved. These templates can be reused on this site or exported for use on other sites. For more details, see What is a Template?
Popups	Access popups you created or create a new popup. These popups can be reused on this site or exported for use on other sites. For more details, see Create a popup.
Theme Builder	Opens the Elementor Theme Builder. For more details, see What is the Theme Builder.
Landing Pages	Access landing pages you created or create a new landing page. For more details, see What are landing pages?
Kit Library	Apply a website kit to your site. For more details, see Apply a kit to your site.
Add New	Create a new template.
Categories	Create, delete or edit your post’s categories. Categorizing your posts allows you to organize them more easily and helps you direct visitors to the information they’re looking for.

Themes	Choose a theme for your website. We recommend Elementor’s Hello Theme. For more details, see What is the Elementor Hello Theme?
Customize	Change site settings such as the site setting, menus and the header and footer. Many of these settings can be changed within Elementor. For more details, see Configure Site Settings.
Menus	Create links to your site’s pages to make navigation easier. Menus can also be created using the Menu widget. For more details, see Menu widget.

Installed Plugins	Access a list of all the plugins you’ve added to your site. For more details, see Activate & deactivate plugins.
Add New	Look for plugins to add functionality to your site. For more information, see Install WordPress plugins.

All Users	Access a list of people with access to your website as well as their level of access. These could be clients or team members.
Add New	Give someone permission to access your website. For more details, see Add a user.
Profile	Manage your personal information such as the language you work in and color scheme.

Import	Move your website from it’s current location to this server.
Export	Move your website from this server to another one.
Site Health	Access a list of recommendations to speed up your site.
Export Personal Data	Create a zip file with a website visitor’s personal information. Some jurisdictions may require this capability.
Delete Personal Data	Erases all data you collected about a website visitor. Some jurisdictions may require this capability.

General	Access and edit basic information such as the site’s name and tagline.
Writing	Control the default category of posts and enable posting by email.
Reading	Control settings for your homepage how visitors will view post archives.
Discussion	Controls the interactions between website owners and visitors.
Media	Control the site’s image sizes.
Permalinks	Control the URL structure of your site. For more information, see What are Permalinks?
Privacy	Allows you to set up a privacy policy page. Some jurisdictions may require this capability.
Limited Login Attempts

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.