Watch this before you start ⬇
About this Preinstall
My Preinstall is set up as a “blank slate” site. For me it typically shaves 4 hours off every build as a lot of the donkey work is done already.
Working on someone else platform is always a pain in the ass at first till you figure out how I’ve done everything, but hopefully as you get more familiar it’ll save time!
I usually just go through the homepage and delete most elements and start again.
The templates and structure is all in place to save time.
Elementor Templates are set up
I’ve used Elementor Theme builder to build all parts of the site including:
- Header
- Footer
- Sticky contact button in B-L corner of site
- Blog archive
- Blog single posts
- Blog Thumbnail Loop
- Service page template
- Service thumbnail loop
- Contact form with redirect to success page
- Contact success Page
- Popups
- 404 pages
- T&C pages (Cookies, Privacy Policy Pages)
If in doubt you can see all templates used on a page from the topbar, their all named pretty clearly.
Start with Elementor Site Settings
First Things First:
Please use Elementor Site settings to design the fonts, colours etc on a site-wide level so we can quickly make changes to the site later, it’s a total ballache if every heading and element is styled individually.
I’m sure you know this already 😊
I use Elementor Site settings to control global styling such as
- colour themes
- fonts,
- typography,
- buttons
- forms
- etc.
Any changes here will quickly restyle the whole site. I’d start here setting up your fonts, spacing, and overall styling.
The custom CSS uses variables to pull global colours, fonts styling from the “Site Settings” too to save time.
Colours
There are primary, secondary, tertiary and quarternary colours set up, with 5 shades each.
Simply change the colours in site settings to control the colours on the site.
Ie. if you want to use Blue, change Primary 1 – 5 to shades of blue.
This will change colours throughout the site from green to blue.
For example, buttons use “primary-2”, then on hover change to “primary-3”
Please don’t delete these global colours in site settings, because they are tied to CSS variables in the custom CSS.
Fill Out Site Options Page
On the dashboard there is an ACF “options” page which populates the client’s details across the site
- Company name
- Contact numbers
- Social profile links.
- etc.
These details are pulled dynamically and shortcoded across the site to save you putting them all in manually:
Some Examples
- Contact page
- Footer
- Social Icons in header
- Coming soon page
- T&Cs page
- Privacy and Cookies Policy page
- etc.
Advanced Custom Fields
I’ve added some useful custom fields to templates like service pages. You can edit, use these or ignore them as you wish.
Building the service pages using a templates and ACF fields means you can quickly create and edit ONE design for all the service pages at once.
Custom CSS
I try to do as much in Elementor as I can, but there are some custom CSS styles that can help with fine tuning…
The custom css is all in the theme customizer.
All the CSS has annotated notes, so try hitting Ctrl+F and searching for what you’re looking for. ie “single”, “archive”, “testimonial”, “button” “thumbnail” “loop” etc.
Some examples:
- CSS resets
- Animations
- Logo effects
- inline link effects
- Custom button styling
- Sticky header effects
- Sticky contact buttons in footer
If it’s hindering your progress in Elementor feel free to just delete the custom CSS or write your own.
Do's and Dont's
✅ Feel Free to add your own plugins
❌ Please dont delete any plugins. I use all of these plugins after launch
✅ Use “Elementor Site Settings” to design the fonts and colours on a site-wide level.
❌ As above, please don’t control fonts and colours on each individual element level as far as possible. Small tweaks are fine, but restyling a site from feedback like this can take hours.
❌ Please don’t delete my custom colours on Site Settings.
If you're stuck...
I know working on someone else’s platform is always a pain in the ass! i hope I’ve not constrained you too much. if you want to know how I’ve done something or something isn’t working for you just give me a ring or drop me a Whatsapp!
