Colored Background Call Out
Comes in any of the colors used on the website.
How to make a colored call-out section:
- Copy/Paste an existing Call-Out Section (like this one) to where you want it;
- Change for the Section Advanced>CSS Classes to the corresponding color (note that all you need to change is the color name, the rest is the same for each):
- back-shape bs-orange
- back-shape bs-red
- back-shape bs-purple
- back-shape bs-green
- back-shape bs-blue
Technical Note: The other section settings that are set and needed are the padding and Shape Divider settings.
Image Mask
Just copy this section and change out the image in the Section settings at Section>Style>Background>Image. Mostly that is all you need to do.
If you wish to edit the height of the image, you would click on the Spacer widget inside the Section and edit it’s space. And for large screen you could change the Section Min-Height if needed.
Technical Note: Some of the other important Section settings are activating the the top and bottom Shape Divider; Min-Height (for large screen ) and other Section Layout settings.
H1 Headline Title long enough to break to a second line
H2 Headline Title long enough to break to a second line
H3 Headline Title long enough to break to a second line
H4 Headline Title long enough to break to a second line
H5 Headline Title long enough to break to a second line
H6 Headline Title long enough to break to a second line
Blockquotes
You can copy and paste one of the below blockquote sections into any page. Replace the text with your quote.
There is a CSS Class in the section that changes the color scheme that is either:
- quote-default
- quote-blue
Also the “blockquote” styling in the Text Editor makes the quotes appear.
The default quote is with the purple and red background; and orange and red quotes.
To use the blue quote color scheme: go to Section>Advanced>CSS Classes and add: quote-blue
Buttons
There are 7 different background color designs.
Change the background design by changing the CSS Class of the Call to Action Elementor Widget using: button-1, button-2, button-3, etc to button-7.
Copy a widget and paste it where you want. Or paste the whole section with 3 buttons.
The widget used is a Call to Action widget. This way you can control more easily the text that shows on line one and line two. In the widget, go to Content>Content>Title for the first line; and go to Content>Content>Description for the second line. Add your link to Content>Content>Link. That’s it!
Section Text
Text Sections using class: sec-text
Note the class is applied to the section, not the text widget.
The text based sections of content have a CSS Class via the Section>Advanced>CSS Classes: sec-text. That sets the appropriate left and right padding.
You can enter different values if need for top and bottom padding for these sections and it will NOT affect the left and right values which are 12px on each side until mobile at which it changes to 6px on each side (because there is already 10px on each side built in, equaling the values of the design: 16px desktop and 22px mobile.
This rule also sets the max-width.
