Common styles from WGet Common
Tag colour conversions
Classes to convert style of <b> tags
Class: to-primary-bold > converts to primary color
Class: to-secondary-bold > converts to secondary color
Class: to-accent-bold > converts to accent color
Class: to-normal-weight > converts to normal weight
TestStyle
>to-primary-bold to-normal-weight
TestStyle
> to-accent-bold to-normal-weight
TestStyle
> to-accent-bold to-normal-weight
Classes to convert style of <mark> Tags
Class: to-primary-mark > converts to primary color
Class: to-secondary-mark > converts to secondary color
Class: to-accent-mark > converts to accent color
TestStyle
>to-primary-mark
TestStyle
> to-secondary-markTestStyle
> to-accent-markTypography Underlines
Classes to add Underline to parts of text.
Class: wpg-underline
Styles required: –height (height of line), –color (color of line)
How to use: Wrap text you want underlined in a TEST
Examples:
Test heading widget with part underlined - Primary 0.2rem height
<span class=”wpg-underline” style=”–height: 0.2rem; –color: var(–e-global-color-primary)”>Test Heading</span>
Test heading widget with part underlined - Secondary - 0.4rem height
<span class=”wpg-underline” style=”–height: 0.4rem; –color: var(–e-global-color-secondary)”>Test Heading</span>
Test heading widget with part underlined - Accent - 0.6 rem height
<span class=”wpg-underline” style=”–height: 0.6rem; –color: var(–e-global-color-accent)”>Test Heading</span>
Typography Background Blocks
Classes to add Block backgrounds to parts of text.
Class: wpg-block
Styles required: –padding(padding around text), –color (color of background)
How to use: Wrap text you want underlined in a TEST
Examples:
Test heading widget with part block - Primary, 0.4rem padding
<span class=”wpg-block” style=”–padding: 0.4rem; –color: var(–e-global-color-primary)”>Test Heading</span>
Test heading widget with part block- Secondary , 0.8rem padding
<span class=”wpg-block” style=”–padding:0.8rem; –color: var(–e-global-color-secondary)”>Test Heading</span>
Test heading widget with part block - Accent - 1.5 rem padding
<span class=”wpg-block” style=”–padding: 1.5rem; –color: var(–e-global-color-accent)”>Test Heading</span>
Redefine HTML Element Styles
Bullets to Arrow
Class: bullet-arrow > Changes marker to a FontAwesome Arrow
Add to any Widget with a UL
- List item 1
- List item 2
- List item 3
Alignment Styles
Align icon in Icon List Widget to the top
Class: icon-list-align-top
Fixes, by default the Icon List aligns the icon to the middle vertically.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae varius justo. Morbi in nisi facilisis sem molestie egestas. Aliquam ipsum eros, ornare sed sodales ut, dictum in orci
- Ut malesuada rhoncus sapien, at rutrum ante faucibus at. Phasellus convallis ac nisl vel lacinia. Curabitur erat metus, consequat ut libero nec, ultrices convallis metus.
- Morbi tempor suscipit ligula a gravida. Praesent tincidunt orci non porttitor porttitor. Pellentesque eu aliquam est. Nulla facilisi. Vivamus tempus eu mi in suscipit.
Align columns last widget to the bottom
Class: col-align-last-el-bottom
Aligns last Widget in a column to the bottom
Example: Left column is tallest, so sets the height for all columns. Middle column last widget (Button) does not align to the bottom. Right Column has the class “col-align-last-el-bottom”, pushing the last Widget (Button) to the bottom
Content sets the tallest Column.
consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Last Widget not aligned to the bottom
Last Widget aligned to the bottom
Example 2: Left column is tallest, so sets the height for all columns. “col-align-last-el-bottom” class is added to the Section. So all columns align their last Widget (Button) to the bottom.
Content sets the tallest Column.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Last Widget aligned to the bottom
Last Widget aligned to the bottom
Widget Spacing Styles
By default Elementor adds a 20px margin to the bottom of each Widget in a Column, except for the last one. On top of that P tags add a bottom margin. Combined they give odd spacing between widgets
Add the following classes to any Column to change the spacing.
Class: wpg-widget-spacing-none : no spacing
Class: wpg-widget-spacing-small: 0.5rem spacing
Class: wpg-widget-spacing-medium: 1rem spacing
Default
Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Paragraph 2: Ut elit tellus, luctus nec ullamcorper mattis
No Spacing
Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Paragraph 2: Ut elit tellus, luctus nec ullamcorper mattis
Small Spacing
Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Paragraph 2: Ut elit tellus, luctus nec ullamcorper mattis
Medium Spacing
Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Paragraph 2: Ut elit tellus, luctus nec ullamcorper mattis
