Elementor PRO + Hello Theme (Initial Setup)

Here are steps for the initial settings for a new install preparing for production using Elementor Pro and Hello Theme.

Basic Settings

  • Settings > General > Site Title + Tagline > Save Changes
  • Settings > Permalinks > Month and name (select) > Save Changes
  • Appearance > Themes > Add New > Hello Elementor > Install
  • Appearance > Themes > Upload Theme > Hello Child Theme > Activate
  • Appearance > Themes > Confirm Hello child theme is active and remove any themes you do not need
  • Plugins > Add New > Elementor > Install
  • Login to Elementor (KL credentials) > Download Pro Plugin > Plugins > Add New  > Upload Plugin > Install > Activate > Connect and Activate (KL credentials)
  • Elementor > Settings > Disable Default Colors (check) > Disable Default Fonts (check) > Save Changes
  • Pages > Add New > Home > Publish
  • Settings > Reading > Your homepage displays > “A static page” > (select) “Home” > Save Changes
  • Settings > Reading > Make sure “Discourage search engines from indexing this site” is checked
  • Do we want to disable Gutenberg? 

Theme/Style Settings

  • Edit a Page in Elementor (e.g. Home)  > Edit in Elementor > Left Panel Menu > Site Settings:
  • Global Colors > Set your brand colors and palette here
  • Global Fonts > you can leave these as they are or set to your preferred default (this is not where the global typography settings are made)
  • Typography > Set all of your typography options here based on design (Body, paragraph spacing, link color, H1, H2, H3, etc…)
  • Buttons > Set your default button style here
  • Layout > Set the site width as desired (default is 1140)

Add to customizer:

/**
* Heading spacing
*/
.elementor-widget-text-editor p+h2,
.elementor-widget-text-editor p+h3,
.elementor-widget-text-editor ul+h2,
.elementor-widget-text-editor ul+h3,
.elementor-widget-text-editor ol+h2,
.elementor-widget-text-editor ol+h3{
margin-top: 1.15em;
}

Scripts to Add:

  • Add Aaron’s script for rel=”oppenner” links

Speed Settings for Mobile:

Additional

Make non-elementor page width and entry-title (h1) width match the elementor page and title display. [Added by KL and open to ways to improve.]


body:not([class*=elementor-page-]) .site-main{
max-width: 1200px;
padding: 10px;
}
body:not([class*=elementor-page-]) .site-main .entry-title{
padding-left: 0;
}
.entry-title{
max-width: 1200px !important;
padding-left: 10px;
padding-right: 10px;
}

Powered by BetterDocs

Newsletter

Subscribe and stay connected through our Newsletter. We send out important news, tips and special offers.

  • This field is for validation purposes and should be left unchanged.