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

Here we see a WordPress dashboard with the Elementor plugin installed.
WP Admin with the Elementor plugin installed.

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 SQLthe 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.

Condensed Dashboard
Ful Dashboard

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 WordPress top bar 1 Understanding WP Admin 1

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

WordPress logoClick this to visit the official  WordPress website. 
Your site nameClick 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 lockIndicates 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 settingsAccess your user settings. This is located on the right-hand side of the top bar. 

Posts Tab 

The Posts tab lets you create, manage, and edit the posts on your website. 

wp dash 3 Understanding WP Admin 5
WordPress Posts tab
All PostsSee a list of all your site’s posts. Hover over a post, and select Edit with Elementor to edit the post. 
Add NewCreate a new post for your site.
CategoriesCreate, 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. 

Media Tab

Add your site’s images, videos and audio files to the Media Library. 

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 NewClick this to Upload media to your website.
wp dash 4 Understanding WP Admin 7
WordPress Media tab

Media Add New screen

The Media Add New Screen allows you to upload Media (Images, video, files, etc.) for later use in your posts and pages. This screen allows you to both add single items as well as perform bulk uploads, if you wish to add more than one media item to your Media Library.

Upload New Media

Uploading media from your local computer into the Media Library is quite simple. Two ‘uploader’ methods, Multi-File Uploader and Browser Uploader, are provided. The Multi-File Uploader is the primary method for adding media to the Media Library, but if doesn’t work then click the “Browser Uploader” link to use the Browser Uploader.

Picture1

Media Upload screen

You will also see a message displayed at the bottom of your view that indicates maximum upload size for files, as set by your hosting provider. 

Multi-File Upload

Multi-File Upload

  • Drag-and-Drop – If you are using a web browser that supports HTML5 then you will see an active upload area (indicated by a dashed border) where you can “drag-and-drop” files from your computer to this area to upload them to the Media Library. You can upload files one at a time, or you can add multiple media items by dragging and dropping a group of files in this area.

Picture2

  • Select Files – If drag-and-drop is not working for you, click on the Select Files button, which will launch a file browser that allows you to find and select (by clicking) the files you want to upload. Multiple files can also be selected by holding down the Ctrl key (Cmd key on a Mac) and clicking on each file you wish to upload. After all the files are selected, click on the Open button to begin uploading.

As your files are uploaded, a status bar will be displayed next to each one to indicate progress.

Picture3

When the uploading is complete, a thumbnail of the media is displayed. Once your upload is complete, you may click on the Edit link to edit and save the information about that media files (see the Edit Media page for more information) if you wish.

You may also click on the ‘Copy URL to clipboard’ button to copy the URL of the file you uploaded.

Browser Uploader

Uploading via the Browser uploader:

  • Browse – Click this button, and then from the File Upload window, find and click the file to upload, then click the Open button. The Media file name will be placed in the text box to the left of the Browse button.
  • Upload – Once a Media file name is displayed in the text box to the right of the Browse button, click the Upload button to upload that Media. At that point the Media Library Screen is displayed.
  • Cancel – If the Upload is not working or is taking a prolonged period of time, click the Cancel button to cancel the Upload process.

Media library

The Media Library Screen allows you to edit, view, and delete Media previously uploaded to your blog. Multiple Media objects can be selected for deletion. Search and filtering ability is also provided to allow you to find the desired Media.

Media Library provides two type of views. One is simple visual Grid View and another is conventional List View. Switch between these views using the icons to the left above the screen.

Edit Media

Overview

The Edit Media page is where you manage information about your media that is saved in the Media Library. To reach the Edit Media page, go to Media > Library and click the name of the media item or the Edit link that appears below the name on hover. You can also reach this page by clicking on the Edit link when adding new media to your site.

The data entered on the Edit Media page is often used by attachment pages and galleries if the theme or plugin chooses to display it, and the data is also used as the default values at the time an image is inserted into a page. Once the image has been inserted as an individual image, it becomes disconnected from the data in the media library and you can use the Image Details screen to update it on a per-image basis.

In addition to managing meta data such as title, caption, alt text, and description, there are also added controls for performing basic media edits such as rotating, scaling, and cropping images. For more information see the Edit Image section.

Picture4

Edit media showing the options

Edit media page

Title

The name of the media. A title is displayed in the File column of the Media Library Screen and is often shown on attachment pages and galleries if themes or plugins are designed to display it.

Permalink

This is the URL of the media attachment page. There is also a link to view the attachment page. Next to this, there may be a button to edit the permalink—if there isn’t, you can change the permalink by activating ‘Slug’ from the screen options and changing the slug’s value.

Edit image button

(Image files only) allows you to make edits such as rotate, scale, and crop.

Caption

A brief explanation of the media.

Alternate text

The alt text for the image, e.g. “The Mona Lisa” to describe the media. Used for accessibility.

Description

An explanation of this particular media.

File URL

Read only display of a direct link to the media file.

Copy URL to clipboard:

Click to copy the URL of the file you are editing into the clipboard. 

Download file

Makes it easier for users to download their uploaded media by providing a download link on the attachment details screen and in the media modal.

Save meta box

Displays information about your media, such as the upload date, web address, file name, type, size, and dimensions. Also includes actions to Delete Permanently or Update any change you have made.

More edit media options

Screen options in Edit media page

Note: The following Meta Boxes may not be visible by default. You can enable them by clicking on the Screen Options tab at the top right of the Edit Media page.

Discussion

Turn the ability to leave comments and/or trackbacks on the media attachment page on or off

Comments

List of current comments saved for this media file

Slug

the attachment page slug

Author

the Author for the media

 

Edit image

Picture5

Edit image

Clicking the Edit Image button launches the image editor screen, giving you access to several useful image editing controls. The edits you make to your image are non-destructive and you can restore the image to its original (uploaded) specifications at any time. Here are the various controls available to you in this Edit Image mode:

Crop

To crop the image, first, click on the image and drag to make your selection. Once a selection has been made, then click the crop icon above the image to finalize the crop. You can use the Aspect ratio and Selection option to make further adjustments or use keyboard shortcuts to fine-tune your crop selection before clicking the crop icon.

Rotate left button

Rotate the image 90 degrees counter-clockwise.

Rotate right button

Rotate the image 90 degrees clockwise.

Flip vertical button

Flip the image upside-down.

Flip horizontal button

Flip the image left-to-right.

Undo/Redo button

Remove or restore your last edit. You can click as many times as you want in succession to “step” through the edit history.

Scale image

Proportionally scale the original image. For best results, scaling should be done before you crop, flip, or rotate. Images can only be scaled down, not up. The original dimensions are displayed as a guideline above the box for entering new dimensions. Click Scale button to display the new scaled image.

Also Restore Original Image button appears to allow you restore the change.

Restore original image 

If changes have been made to an image, the Restore Original Image pull-down allows you to discard any changes and restore the original image. Previously edited copies of the image will not be deleted. Press the Restore Image button to complete the action.

Picture6

Restore original image

Image crop

Used in combination with the Crop icon, this tool allows you to make the following precise adjustments:

  • Crop aspect Ratio: You can specify the crop selection aspect ratio then hold down the Shift key while dragging to lock it. The values can be 1:1 (square), 4:3, 16:9, etc. If there is a selection, specifying aspect ratio will set it immediately.
  • Crop selection: Once started, the selection can be adjusted by entering new values (in pixels). Note that these values are scaled to approximately match the original image dimensions. The minimum selection size equals the thumbnail size as set in the Settings Media Screen.

Thumbnail settings

WordPress thumbnails are smaller, usually square, versions of your main image. They are automatically created each time you upload a new image. 

Pages Tab

The Pages tab allows you to access all the pages on your site. You can create pages by clicking Add New, and edit them by selecting Edit with Elementor.

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
wp dash 5 Understanding WP Admin 9
WordPress Pages tab

Comments Tab

The Comments tab lets you moderateedit, and delete comments on your website.

wp dash 6 Understanding WP Admin 11
WordPress Comments tab

Elementor Tab

The Elementor tab contains settings and controls relevant to the Elementor plugin. It includes the following:

wp dash 7 Understanding WP Admin 13
WordPress Elementor Tab
Settings Control default types and allow data sharing in the General tabconnect 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 FontsAdd or Edit your site’s custom fonts.
Custom IconsAdd or Edit your site’s custom icons.
Custom CodeAdd sitewide Custom Code to your site, for example, Google Tag Manager (GTM).
Role ManagerAssign 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 InfoLists details about your site’s server environment. This information is often needed when debugging your site.
Getting startedView the video, Getting Started with Elementor. 
Get HelpClicking this takes you to the Elementor Help Center.

Templates Tab

Work more efficiently by creating and using templates and website kits. 

wp dash 8 Understanding WP Admin 15
WordPress Templates Tab

The Templates tab features the following:

Saved TemplatesAccess 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 BuilderOpens the Elementor Theme Builder. For more details, see What is the Theme Builder.
Landing PagesAccess landing pages you created or create a new landing page. For more details, see What are landing pages?
Kit LibraryApply a website kit to your site. For more details, see Apply a kit to your site.
Add NewCreate 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.

Appearance Tab

Themes are the framework of any WordPress website. Therefore, all WordPress websites must have the theme. The Hello Theme was created by Elementor especially to work with the Elementor plugin.

wp dash 9 Understanding WP Admin 17
WordPress Appearance Tab
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.

Plugins Tab 

Inside the Plugins tab, you can search, update, install, activate/deactivate, enable/disable auto-updates, and delete plugins. 

wp dash 10 Understanding WP Admin 19
WordPress Plugins Tab.
Installed PluginsAccess 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.

Users Tab

The Users tab lets you add new users to your website and edit the permissions of existing users.

wp dash 11 1 Understanding WP Admin 21
WordPress Users Tab
All UsersAccess a list of people with access to your website as well as their level of access. These could be clients or team members.
Add NewGive 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.

Tools Tab

Features to help you build and maintain your site.

wp dash 12 Understanding WP Admin 23
WordPress Tools Tab
Import Move your website from it’s current location to this server.
Export Move your website from this server to another one.
Site HealthAccess a list of recommendations to speed up your site.
Export Personal DataCreate a zip file with a website visitor’s personal information. Some jurisdictions may require this capability.
Delete Personal DataErases all data you collected about a website visitor. Some jurisdictions may require this capability.

Settings Tab

The Settings tab includes settings tools like GeneralWritingReadingDiscussionMediaPermalinksPrivacy, and Limit Login Attempts.

This tab controls basic functionality such as access to your site.

wp dash 13 Understanding WP Admin 25
WordPress Settings Tab
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

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: DependentTime: Independent
Organization: Reverse chronologicalOrganization: Hierarchical
Built-in features: NumerousBuilt-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.

%D0%B0dd new

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.

%D0%B0dd title

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.
%D0%B0dd blocks

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.

image gallery

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

media

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.

embeds

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.
left sidebar
  • 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.
left sidebar 2

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.

left sidebar 3

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.
top panel

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

Show Diary Page

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.

Tablepress Diary

Show Results

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

Show Results Tabs

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

Years Link

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.

Picture1

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

Picture2

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.

Picture3

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.

Picture4

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.

Picture5

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.

Open Premier Shows

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.

Critiques AccordionAccordion drop down

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.

Critique

Committee Page

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