The basics - An overview
GeneratePress
GeneratePress is in control of the main Theme Elements, such as Typography and the Navigation.
GeneratePress Elements
Header Elements, Layout Elements and Hook Elements are all used throughtout this site. Elements are found in Dashboard > Appearance > Elements.
You can find out more about elements here.
Elementor Free
The Front Page and Static pages are all built with Elementor Free. Aside of the navigation all of the page can be edited in Elementor. Please remember that Typography and the text and heading colors can be set globally from the Customizer ( aside of those that have been specifically styled in Elementor )
WP Show Posts
As we have no Posts widget in Elementor Free we are using the awesome WP Show Posts to display post grids on any static page. You can find out more about WP Show Posts here.
Gutenberg Block Editor
We have the Gutenberg Plugin installed so we have the latest version of the Block editor which is used on our single posts.
Safe SVG
This plugin is require to allow us to upload SVG images. They are being used for the logos section on the home page.
Custom Styling - Additional CSS
The CSS for any custom styling can be found in the Customizer > Additional CSS.
Please note that the site uses some CSS properties that are not parsed by the WP Customizer. Such as mix-blend-mode – the error they generate can be safely ignored.
The basics - Elementor set-up
Typography and Typography Colors
Within the Elementor > Settings we have disabled the default fonts and colors. All fonts are now styled from the Customizer > Typography and Colors section. Please note that Elementor does not respect the typography line-height for headings which have been adjusted in the Elementor editor.
Full Width Pages with GP Layout Element
Using a Layout Element we have set our Front Page, Static Pages and Elementor Templates to Full Width and have removed some of the Theme Elements. So there is no need to select a Full Width Canvas when creating a new Page.
If you wish to change these rules, maybe you want to exclude a page from this layout, then simply edit the Layout Element and change its Display Rules.
Widget spacing
By default Elementor adds 20px of space between each widget. This has been reduced in the Elementor Global Settings. To a minimal 10px.
Custom CSS
Adding Custom CSS is done be selecting the Section, Column or Widget and adding a class name in the CSS Classes field on the Advanced Tab. The CSS is then added to the Customizer > Additional CSS.
Templates
To make things easier the Site contains 3 saved Page Templates to simply import for the Front Page, About Page and Services.
The basics - Navigation as header
Unless stated otherwise the Theme Styled elements are set-up in the Customizer. The other options is via Custom CSS or where there is GP Element being used. Wherever Elements are mentioned they can be found in Appearance Elements
Navigation as header
The site uses the navigation as the Header. It currently displays the site title. You can edit the title or add a logo in the Customizer > Site Identity. Then you can choose which branding ( title or logo ) to display in Customizer > Layout > Header.
Primary Navigation - single post
The primary Navigation styling is set in the Customizer. Fonts, colors and hover effects can be selected from there
Merged Header (Header Element) - Pages & Blog
Our Pages and Blog have a merged Header Element assigned to them. From the site header tab in the header element we have set the header to merged and changed the navigation colors to transparent and white.
Mega Menu
Our Services Category uses the simple CSS mega menu. To learn more on how to set-up the mega menu Read here.
The CSS is already added to the Customizer > Additional CSS. With a slight tweak so the mega menu expands the width of the navigation.
Off Canvas Panel - Mobile Navigation
As the site is designed for a large Menu with many sub categories for our mega menu we have chose the Off Canvas Panel. You can change its layout in the Customizer as well as its typography and colors.
The Single Post & Blog Layout
Custom Post Hero ( Hook Element )
This Hook uses some Custom PHP to create a 2 column row. That places the Post Title and Category ( using the text-highlighter class ) in the first column and the featured image in the second column. Using CSS grid to create the columns with the overlap.
Single Post Left Sidebar
The left sidebar contains an empty HTML widget. This is to ensure that Sidebar is always displayed. The author box is hooked in above this.
Author Box - Single Post Left Sidebar ( Hook Element )
We use a Hook Element to strip in a little HTML and PHP to display the author gravatar, name, description and read more link. To edit the read more link edit the Single Post Sidebar Hook
Custom Blog Hero ( Hook Element )
This Hook Element creates a custom hero which pulls in the Featured Image of the first header a background that is overlayed and blended with the background using CSS.
Blog H2 entry title
A little custom CSS has been used to reduce the H2 Heading size for Blogs and Archives. The font has also been changed to inherit the Body text.
The Elementor Hero
text-highlighter
Custom Styling CSS - Elementor
A few elements are styled with Custom CSS. All of the necessary CSS is held in the Customizer > Additional CSS
Slide In Up animation
The Slide Up entrance animation is used in our hero and call to action sections ( and in the charts used on the services page ). We have reduced the distance of that animation. This has also been applied to the FadeIn Up animation in case you wish to use that instead.
The effect you see that looks like the element is sliding out from behind the next element is simply achieved by add a solid color background to the element below it.
Hover Buttons
Our Buttons are styled with a Box Shadow and have a Hover Float Animation. Both of which are set in the Buttons > Style tab. The button has a CSS Class of:
no-hover-shadow
Our custom CSS reduces the distance of the hover effect and removes the shadow when the button is not being hovered on.
Custom Underline
When selecting a string of text and selecting Underline it wraps the text in <u></u> tags. The CSS used targets the U tags to remove the underline ( only works on front end ) and adds a colored border.
Text Highlighter
By adding the text-highlighter class to a heading widget provides the effect seen above. You need to set the text color to white in the Elementor editor.
Clicks Boxes
As we’re using Elementor Free there is no Flip Boxes or CTAs so we made our own. Carry on reading to find out more about click boxes.
Overflow Hidden
The optional class of overflow-hidden can be added to any column or section that uses animations. This will make the animation limited to its container ie. no more ugly elements flying in from off the edge of the screen.
WP Show Post
The posts seen below are added using a WP Show Posts Shortcode. You can edit and create them from Dashboard > WP Show Posts. Then add them using a Shortcode Widget in Elementor or Gutenberg Editor
Sorry, no posts were found.
The color is set on the Backround. The image is added to Section Background Overlay.
Custom Click Boxes
I am a click box
These columns contains a CSS Class of: click-box It needs a button within the column for it to work.
Click Box preview
Preview me from the front end. The Elementor preview doesn’t behave as it does when viewed on the live site.
Custom CSS
I use Custom CSS. The only part you may want to change is the hover color. The rest of the colors are controlled in Elementor
Service Levels
Service Level Charts
Well a bit hackish but a little bit of fun using a multi column section filled with spacer widgets. It takes a little maths and some manual sizing of each spacer. Bit it’s fun.
Please try not to break it, adding animations to 15 elements is a little painstaking