Z - Demo Layouts
- Containers Using Classes -
see WST CONTAINERS in section-column-styles.css
+ bg-color, padding, other helper classes
Left Image SmallRight Centered Text Large
Uses srcset BG image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo ratione.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipiscing velit ut labore dolore sit magnam.
Left Image SmallRight Text Large
Uses srcset BG image. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio, et tempus feugiat. Nullam varius turpis dui, eu faucibus eros iaculis quis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Left Image LargeRight Text Small
Uses srcset BG image. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipiscing velit ut labore dolore sit magnam.
Left Text LargeRight Image Small
Uses srcset BG image. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio, et tempus feugiat. Nullam varius turpis dui, eu faucibus eros iaculis quis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Left Text SmallRight Image Large
Uses srcset BG image. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
Left Half ImageRight Half Text
Uses Regular Image. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
Left Half TextRight Half Image
Uses Regular Image. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
Set Border Radius & Image ShadowExample
ADD CLASSES to IMAGE ELEMENT:
e.g. srcset-bg becomes:
srcset-bg img-radius-xl img-shadow
See section-column-styles for radius & shadow
Uses srcset BG image. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio, et tempus feugiat. Nullam varius turpis dui, eu faucibus eros iaculis quis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Left Text SmallRight Boxes Large
ADDITIONAL HELPER CLASSES:
See section-column-styles for a full list.
Background
.bg-color— accent color background.bg-primary— primary color background.bg-secondary— secondary color background.banner-section— full-width banner/hero-style section (constrains.content-wrapperwidth)
Padding Y (top + bottom)
.padding-y-xs— 2rem top/bottom.padding-y-sm— 4rem top/bottom (3rem at ≤1024px).padding-y-md— 6rem top/bottom (5rem at ≤1024px, 4rem on mobile).padding-y-lg— 8rem top/bottom (7rem at ≤1024px, 6rem on mobile).padding-y-xl— 10rem top/bottom (9rem at ≤1024px, 8rem on mobile)
Padding Top
.padding-top-xs— 2rem top.padding-top-sm— 4rem top (3rem at ≤1024px).padding-top-md— 6rem top (5rem at ≤1024px, 4rem mobile).padding-top-lg— 8rem top (7rem at ≤1024px, 6rem mobile).padding-top-xl— 10rem top (9rem at ≤1024px, 8rem mobile)
Padding Bottom
.padding-bottom-xs— 2rem bottom.padding-bottom-sm— 4rem bottom (3rem at ≤1024px).padding-bottom-md— 6rem bottom (5rem at ≤1024px, 4rem mobile).padding-bottom-lg— 8rem bottom (7rem at ≤1024px, 6rem mobile).padding-bottom-xl— 10rem bottom (9rem at ≤1024px, 8rem mobile)
Padding X (left + right)
.padding-x-xs— 2rem left/right.padding-x-sm— 4rem left/right (3rem at ≤1024px).padding-x-md— 6rem left/right.padding-x-lg— 8rem left/right.padding-x-xl— 10rem left/right
Margin Y (top + bottom)
.margin-y-xs— 2rem top/bottom.margin-y-sm— 4rem top/bottom.margin-y-md— 6rem top/bottom.margin-y-lg— 8rem top/bottom.margin-y-xl— 10rem top/bottom
Margin Top
.margin-top-xs— 2rem top.margin-top-sm— 4rem top.margin-top-md— 6rem top.margin-top-lg— 8rem top.margin-top-xl— 10rem top
Margin Bottom
.margin-bottom-xs— 2rem bottom.margin-bottom-sm— 4rem bottom.margin-bottom-md— 6rem bottom.margin-bottom-lg— 8rem bottom.margin-bottom-xl— 10rem bottom
Gap
.gap-xs— 2rem gap on inner container.gap-sm— 4rem gap (3rem at ≤1024px).gap-md— 6rem gap (5rem at ≤1024px, 4rem mobile).gap-lg— 8rem gap.gap-xl— 10rem gap
Zero Overrides
.no-padding-top— removes top padding.no-padding-bottom— removes bottom padding.no-padding-left— removes left padding.no-padding-right— removes right padding.no-margin-top— removes top margin.no-margin-bottom— removes bottom margin
Box Tall Image H3 Title
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
Box Tall Image H3 Title
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio, et tempus feugiat. Nullam varius turpis
Box Default Image H3 Title
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Split Full Width Row - Boxed Column w/BG Image / Full Width Column
Uses srcset BG image. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
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.
Split Full Width Row - Boxed Column / Full Width Column
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
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.
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.
Split Full Width Row - Full Width Column / Boxed Column w/BG Image
Uses srcset BG image. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
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.
Split Full Width Row - Full Width Column / Boxed Column
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Split Full Width Row - Boxed Column / Full Width Column
Uses srcset BG image. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Split Full Width Row - Boxed Column / Boxed Column
Uses srcset BG image. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
IMAGE WIDGET as srcset Background Image
SRCSET BG IMAGE
Copy Section to Your Page
OR
Copy / Paste this Image Into Your Section
OR
COPY ALL IMAGE SETTINGS + add CLASS srcset-bg to your image
IF YOU DON’T PUT THE IMAGE IN ANOTHER CONTAINER, The Image should be at the top of the container OR put content in a container with its own Z Index.
On Image’s Parent Container: set min height & set div padding to 0.
Add Default Elementor IMAGE Element
CONTENT TAB:
Image Resolution = FULL
STYLE TAB:
Max Width: 100%
Height: 100%
ADVANCED TAB:
Width: Full Width
Postion: Absolute
Class: srcset-bg
FOR FIXED / Parallax BG:
in section-column-styles.css
UNCOMMENT:
/* OPTIONAL Fixed / Parallax Background Image
FIXED IMAGE WIDGET as srcset Background Image
BG Wrapper class bg-pic-overlay for bg color w/image set to multiply
FIXED SRCSET BG IMAGE
Copy Section to Your Page
OR
Copy / Paste this Image Into Your Section
OR
COPY ALL IMAGE SETTINGS + add CLASS srcset-bg to your image
IF YOU DON’T PUT THE IMAGE IN ANOTHER CONTAINER, The Image should be at the top of the container OR put content in a container with its own Z Index.
On Image’s Parent Container: set min height & set div padding to 0.
Add Default Elementor IMAGE Element
CONTENT TAB:
Image Resolution = FULL
STYLE TAB:
Max Width: 100%
Height: 100%
ADVANCED TAB:
Width: Full Width
Postion: Absolute
Class: srcset-bg
FOR FIXED / Parallax BG:
in section-column-style.css
UNCOMMENT:
/* OPTIONAL Fixed / Parallax Background Image
BANNER SECTION Full Width
Banner Section with Responsive Max Widths in section-styles.css IMAGE WIDGET as srcset Background Image
Overlay Alt Section BANNER SECTION Full Width
FIXED IMAGE WIDGET as srcset Background Image
BG Wrapper class bg-overlay-alt for alternate overlay
Overlay Dark Section BANNER SECTION Full Width
FIXED IMAGE WIDGET as srcset Background Image
BG Wrapper class bg-overlay-dark for dark overlay
Overlay Light Section BANNER SECTION Full Width
FIXED IMAGE WIDGET as srcset Background Image
BG Wrapper class bg-overlay-light for light overlay
BANNER SECTION Boxed Width
FIXED IMAGE WIDGET as srcset Background Image
BG Wrapper class bg-pic-overlay for bg color w/image set to multiply
PIC OVERLAY ALT - BANNER SECTION Boxed Width
FIXED IMAGE WIDGET as srcset Background Image
BG Wrapper class bg-pic-overlay alt for bg color w/image set to multiply
Overlay Dark SectionSplit Section with Vertical Divider
Uses srcset BG image. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
professional duct cleaning supports healthier indoor air quality and HVAC efficiency. Our industrial cleaning services are designed to maintain equipment longevity and prevent costly downtime.