ABOUT THE STYLES
Using css styles, we can add consistency to the site. Visual changes can be made that apply to the whole site much more quickly. Manually changing styles can create a real headache when you want something to look the same throughout the website.
When using elements (from the left sidebar) in Elementor, try to avoid using the “Style” options. Instead, go to the “Advanced” tab, and add the following CSS classes (below) in the CSS Classes option. More than one style can be applied just by putting a space between the styles. The dashes are only there to make the styles more readable. (style1 style2 style-type-3)
NOTE: You may not see the styles applied 100% when editing a page. Preview, or view page to see the styles applied.
Typography
When using headings, don’t apply styles. Just use the headings. We can make custom styles for headings inside certain types of elements… like CTA bxes.
This is an H1 (aurora)
This is an H2 (Ubuntu bold)
This is an H3 (Ubuntu bold)
This is an H4 (ubuntu condensed)
This is an H5 (ubuntu condensed)
Font overrides and sizes
Text styles can be used for colors, fonts, weight, and position. There is one to center text on mobile as well.
text-xlrg font-aurora
text-xlrg font-script
text-lrg font-ubuntu
text-med font-ubuntucond (normal size)
text-sm
Type position
text-left
text-center
text-right text-center-mobile
text-white text-justified
This is justified text. Not really common to use, but it is possible. This is justified text. This is justified text. Not really common to use, but it is possible. This is justified text. This is justified text. Not really common to use, but it is possible. This is justified text.Basic Type Elements (using the regular text editor)
This is just regular text in a text editor element, with the default styling. NO
This is an h4 heading
This is just a regular paragraph of text. No added styling. But, you can make text bold, or italic. You can also add an underline or a strikethrough (which will make the text do whatever we want).
This is a list:
- list item 1
- list item 2
- list item 3
This is just a regular paragraph of text inside a blockquote.
And, this is NOT in the blockquote.
This is a list inside of a blockquote:
- list item 1
- list item 2
- list item 3
And here is a built-in horizontal line:
Now, it CAN get tricky when you want to override something… like making text a different font like Aurora or Ubuntu Condensed. These require adding in <span class=”classname1 classname2″>your text here</span> in to the text (code) window.
That’s about EVERYTHING you will ever use in a text block.
Note: It is usually best to set up more complex rules… ie, what an H2 looks like in a callout box. These should be developed, but will take longer to determine.
Type color and style overrides
text-white
text-black
text-bold
text-darkgrey
text-bolder
text-grey
text-condensed
text-red
text-yellow
Backgrounds (can be added to section, column or element)
Backgrounds can be added with classes as well… including simple color ones. You can add a css background color or change it manually in Elementor.
bg-black
bg-darkgrey
bg-grey
bg-lightgrey
bg-yellow
bg-red
bg-white
These are the defaults for the image backgrounds. Add the class to a section or a column.
bg-haiti
bg-mali
bg-rwanda
bg-rwanda
bg-red
bg-diamonds
bg-texture
Backgrounds can be sized using simple classes too, using width in pixels.
bg-haiti bg-size-200
bg-haiti bg-size-150
bg-haiti bg-size-100
bg-haiti bg-size-75
bg-haiti bg-size-50
Backgrounds can be sized, And, you can manually select background and background-overlay colors in Elementor to override.
if you want to “sandwich” the image bg betweeen Elementor styles you must add -wrap after the background choice… ie, bg-mali-wrap. This puts the bg image on the wrapper for the column… allowing you to change the background and overlay. Note… you can still add an OVERLAY without using the -wrap style. You can even use filters (like darken, and screen) to get interesting results. DO BE AWARE: Adding in different background colors does add to inconsistency in the site.
bg-mali
(not -wrap… so the manual bg color overrides the image)
bg-mali-wrap
(with -wrap… so the image is between the bg color and overlay)
bg-mali bg-size-50
(with a blue overlay set to “screen” filter)
bg-rwanda-wrap bg-size-50
(manual background color)
bg-rwanda-wrap
bg-size-25
(manual background color)
Background positions can be either scroll or be fixed
bg-haiti bg-size-150 (scrolls by default)
bg-mali bg-fixed (it will NOT be fixed on mobile)
You can even add overlay gradients!
Borders (can be added to section, column or element)
Borders can be added to sections, columns or elements. Size and and color are separated, but we can create easier to use ones.
border-1px border-black
border-2px border-red
border-3px border-white
Padding (can be added to section, column or element)
You will add padding to items a lot. Here are some helpful standards. All padding will reduce with screensize… ie, the padding will be less. All will be 10px on mobile.
padding is by pixel amount. pad-20 means 20px.
pad-80
pad-50
pad-40 (40px)
pad-30
pad-20(20px)
pad-sm (10px)
Expanding and Equal Heights (can be added to section or element)
Individual elements an be forced to fit the height of the column with “expand”. Best practice is to have only ONE element in the column.
This is the heading
This is the longest
This one is much longer than the other two.
This one is much longer than the other two.
This one is much longer than the other two.
This is using expand
(BTW, I also removed the image and added bg-red border-1px border-white
Elements inside all columns can be forced to equal height by applying the equal-heights class to the section. Only have ONE element in each column.
This is the heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
asdfasdfasdf
asdf
asdff
asdf
asdf
dsfa
sdfa
sdfa
Add Your Heading Text Here
Buttons
Buttons should be styled for a purpose… ie, “action” buttons can all be red. We can make store (add to cart) buttons styled consistently too.
Dividers
Some are global dividers (that use SVGs), and others (that have images) must be added via their shortcode on the right in the Saved Templates in Admin. (like the wheel below). The issue with some of them (like the wheel) is that the image MUST be small… ie, the size that is used (42px x 42px or similar).
We can fake a divider with a (SMALL) image element by adding the “divider-dark” or “divider-light” class. Note… we may need to play with colors later.
Conditional Styles
Create styles for different types of conditions is really helpful. For example, heading colors and text colors inside a dark background. Here are some I have set up.
I set up darkstyles and lightstyles… for dark or light containers. Add the class to the column to have all text inside adopt the styles.
Header 3 text
Heading 4 text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
- Lorem
- Lorem
- Lorem
- Lorem
Header 3 text
Heading 4 text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
- Lorem
- Lorem
- Lorem
- Lorem