SPAN Default Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Tellus id interdum velit laoreet id donec ultrices tincidunt arcu. Aliquam faucibus purus in massa tempor nec feugiat nisl. Nam aliquam sem et tortor.
P Default Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Tellus id interdum velit laoreet id donec ultrices tincidunt arcu. Aliquam faucibus purus in massa tempor nec feugiat nisl. Nam aliquam sem et tortor.
P LARGE Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Tellus id interdum velit laoreet id donec ultrices tincidunt arcu. Aliquam faucibus purus in massa tempor nec feugiat nisl. Nam aliquam sem et tortor.
P Medium Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Tellus id interdum velit laoreet id donec ultrices tincidunt arcu. Aliquam faucibus purus in massa tempor nec feugiat nisl. Nam aliquam sem et tortor.
P Small Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Tellus id interdum velit laoreet id donec ultrices tincidunt arcu. Aliquam faucibus purus in massa tempor nec feugiat nisl. Nam aliquam sem et tortor.

H1 XXL Welcome to your new website project

H1 Welcome to your new website project

H2 Welcome to your new website project

H3 Welcome to your new website project

H4 Welcome to your new website project

H4 Welcome to your new website project

This page acts as a typography tester page as well as a set of instructions for getting started building the theme for a new website.

There are a few things you’ll need to know about to develop for this site:

  • Hello Theme
    • The most basic of WordPress Themes, designed as a blank slate with minimal settings for sites where all parts of the theme are created in Elementor.
  • Central Colour Palette
    • Gives us a better global colour pallette which isn’t tied to any particular theme or page builder.
    • Colour pickers now always include the predefined swatches that we have configured here.
  • Code Snippets
    • A central place to managed and inject blocks of code. HTML/JS/PHP, whatever we need.
    • Removes to need to worry about child themes or theme updates breaking stuff.
  • Simple CSS
    • A central place to manage global custom CSS code.
    • Operates independently of the page builder and theme.
  • Elementor Pro
    • All page templates are created using Elementor Pro Theme Builder
    • The intention is that all pages, except for blog posts will use Elementor to build and manage the page content.
    • Default widget space is 20px
    • Custom CSS to enforce our preferred grid rules by default
    • White labelled as Page Builder
    • Default colours and fonts are disabled
    • We’re using Elementor Theme Styles to manage default typography, buttons, form inputs, etc.
  • Ultimate Addons for Elementor (UAE)
    • A premium library of widgets for elementor.
    • White labelled as “Dash Page Builder Addons”
    • Many widgets are disabled by default. Turn them on here if you need them.

What about Gutenberg?

Gutenberg (the WordPress block based content builder) is enabled and can be accessed on any pages that isn’t using Elementor.

The intention is that Gutenberg is only used for Posts and perhaps for Custom Post Types when it makes sense.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H 5 Heading
H6 Heading

Parahraph of Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus urna duis convallis convallis tellus id interdum velit. Sit amet tellus cras adipiscing enim eu turpis. Viverra vitae congue eu consequat ac felis donec. In pellentesque massa placerat duis ultricies lacus. Ullamcorper sit amet risus nullam eget felis. Ut ornare lectus sit amet est placerat. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh.

Blockquote of Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Tellus id interdum velit laoreet id donec ultrices tincidunt arcu. Aliquam faucibus purus in massa tempor nec feugiat nisl. Nam aliquam sem et tortor.

  • Unordered List
  • Items

Followed by a paragraph. Note that there’s not space after the list.

Here is an example of an:

  1. Ordered List
  2. Item

Followed by a paragraph to show what happens when a list is followed by a paragraph in the same widget.

Step 1: Central Colour Palette

WordPress Dashboard > Settings > Central Colour Palette
 
There you can define and name your central colour palette. This will load the swatches on every colour picker across the theme & elementor with the pre-defined options.
 
Here are some boxes with background colours set so that you can then visually demonstrate the new colour palette here on this page:

Step 2: Hello Theme Customization

Work through the Hello theme settings first and get those settings right before touching anything else.

Step 3: Elementor Settings

Configure the Elementor Style Settings and Integration Setting setting things like:

  • The width of the grid system
  • The vertical space between widgets
  • Breakpoints
  • reCAPTCHA keys

Step 4: Elementor Theme Styles

Elementor Theme Styles control and set the default appearance of many things that traditionally would have been configured in the WordPress theme customisation.

Controls the default styles for:

  • Typography
  • Buttons
  • Form Inputs
  • Images

Generic widgets with theme styles

Click Me #1
Click Me #2
Button
Default
Click Here
Info
Success
Warning
Danger
Extra Small
Small
Medium
Large
Extra Large

Custom versions of widgets saved as global widgets

If the site design requires more than just a primary and a secondary style then create more buttons and turn them into global widgets, paying close attention to the names you choose.

What’s next?

Now that we’re done with the theme customisation and buttons, you can move on to using Elementor to design the site.

These Elementor templates already exist and can be used as a starting point for the new designs.

  • Header Template
  • Footer Template
  • Homepage Template
  • Single Template
  • Archive First Page Template
  • Archive Other Template
  • Blog Article Template
  • Landing Page Template

The following starter pages already exist in WordPress.

  • Home
  • Example Blog Articles
  • Starter services section with sub pages
  • Starter Contact Page
  • Starter Landing Page