This guide also contains the various Elementor widgets you will be styling, so it can be used as a visual reference when you change the settings in Style Kits. It is important to note that not every single Elementor widget can be automatically styled through Style Kit, take note of the widgets that don’t play nice, these will have to be styled individually, and should be kept to a minimum.
The logo is available in 3 formats:
Use the logo version best suited to the available space.
Minimum clear space around the logo:
25% of the total logo width.
Minimum size:
Stacked:
18 pixels wide/0.25 inch wide/0.635 centimeter wide.
Horizontal:
18 pixels wide/0.25 inch wide/0.635 centimeter wide.
Display the logo and/or icon in any colour that strongly contrasts with the background colour.
The icon is designed for use as a Favicon, social media icon or watermark.
Use the icon when the logo is to appear in perfectly square or round space of limited size (e.g. Twitter, Browser Tab, etc).
Don’t:
Display the logo and/or icon in any colour that strongly contrasts with the background colour.
Minimum size:
Stacked:
18 pixels wide/0.25 inch wide/0.635 centimeter wide.
Horizontal:
18 pixels wide/0.25 inch wide/0.635 centimeter wide.
Minimum clear space around the logo:
25% of the total logo width.
When we select fonts, our goals are to:
Try stick to the default web safe fonts, system fonts or Google fonts. Every font you add, increases the complexity of your style guide, and slows your website down a bit, so use them sparingly and with purpose.
Here is the list of all the different typographic styles used on the website. You can set the styles in Style Kit and check back here for a visual reference of what you have changed.
Headings provide a hierarchy for the content on your site.
Logically structure your page content using your headings.
Body Copy
Accent Colors change the default style for Links, Button backgrounds, Tab and Accordion headings, and Badges. We like to style buttons separately, so that we have more control, but everything else on the list will grab it’s default style from the accent colours.
#000000
#000000
#191919
#4c4c4c
#7f7f7f
#cccccc
#333333
#666666
#b2b2b2
#e5e5e5
We classify our buttons based on intent.
If we want the user to take a single direct action on the page, we use the call to action button. e.g. ‘download this template’, ‘contact sales’, ‘buy this product’.
If you want the user to take some other action you should use the ‘other’ button style. e.g. ‘click here to download the spec sheet’, ‘click here to read more about x’
These styles will apply to the default Elementor button widget, if you are using a different button widget please make sure you have applied the correct styling and saved it as a “global widget’.
Icons are useful because images can communicate an idea faster than text, they give context to your message and they can help overcome language barriers.
Consistency, as with everything, is key. When adding icons, avoid mixing and matching icons with very different styles or variations in line-thickness, and avoid mixing Line and Solid icons.
It is important that your icon matches your message. Don’t use an icon if it doesn’t enhance the message being communicated!
Collecting information from users is imperative to the success of digital marketing efforts.
We use Gravity forms for all our forms.
Happy Add-ons and Ultimate add-ons have Gravity Form styler widgets.
Remember to apply branding to the redirect pages and notification emails, too!
De-clutter: Leave lots of white space – keep it practical and clean.
Label fields clearly: Keep the field close to it’s label to avoid any confusion.
Try to keep things optional: Name, Surname and email should be the only required fields.
Test responsiveness: Ensure it’s easy to complete on any device.
Go with the flow: The design should visually guide the users – from completing details to submission!
By subtly styling all your images, you can create a sense of cohesion on your website.
Applying the same filter on all your images can bring some uniformity to galleries, or maybe tinting them with your brand’s colours will help them blend in better with the style of the website, or you could apply a border radius to give your images rounded edges to spice them up a bit.
Using ‘on hover’ effects with images, can give your pages a bit of interactivity, but don’t over do it, inverting the colours or using a bounce animation on hover can be a jarring experience. There are no strict rules but remember, the aim of setting a global style is to reduce your workload. Don’t apply a tint on all your images if you have to go and manually remove that tint from 20 logos in your client carousel.
Columns gaps are a quick and easy way to apply padding across your web elements.
Lorem ipsum dolor sit amet, consectetur shorter adipiscing elit. Ut elit tellus, luctus nec ulla mcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur shorter adipiscing elit. Ut elit tellus, luctus nec ulla mcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
