Docs
Start Building Design Here.
Instructions:
We will be using Astra as the theme, Astra theme will control the global fonts, colors, and containers. And use Elementor for designing.
MENU:
Use Astra-global for designing menu for both desktop and mobile. Elementor shortcode can also be use in Astra menu for designing.
Footer:
Use Elementor global footer for designing a footer design. We already created a template for the footer named “Global Footer”. Location: elementor/theme-builder
COLORS:
Use Astra-global colors and avoid using individual colors
FONTS:
Use Astra-global fonts and avoid using individual fonts
BUTTONS:
Use Astra-global for fonts, colors & designs.
PLUGINS:
Avoid adding the unnecessary plugin. As possible use elementor
WP ROCKET:
Do not touch the WP rocket settings. And do not install another caching plugins.
CSS:
When writing CSS code avoid using static ways of calling colors, fonts instead call the Theme variables.
Static Example:
Static Example:
a.widget-name{
color:#000000;
}
Instead, call the Astra global variables: To locate color variables, use inspect element search for :root
a.widget-name{
color:var(--ast-global-color-0);
}
The –ast-global-color-0 is holding the global color for black.
MAPS
Use google map embed unless instructed or the client will provide Google Map APIs.
OTHER INFORMATION:
You still can use Elementor global for colors, fonts, buttons & designing menus but use it correctly.