List Section power layouts
All of the styles on this page use the “List” section which can be accessed by clicking “Add Section” (where you hover between 2 sections) and selecting “List”
There are 3 types of List layouts:
Simple List
Carousel
Banner
Any section can be edited later to switch between the types. Each of the types have multiple settings that can be adjusted to customize.
Add border to Carousel List with card layout selected
For Carousel List and Simple List
Add border to Carousel List with card layout selected
Carousel List with Card Layout. Space below section title = 35
-
![]()
01
Inquire
-
![]()
02
Step 2
-
![]()
03
Step 3
Add border to Simple List with card layout selected
Simple List with Card Layout. Space below section title = 35
-
01/ Inquire
Go into more detail here about this step. Go into more detail here about this step. Go into more detail here about this step.
-
02
Step 2
-
03
Step 3
-
04
Step 4
-
05
Step 5
-
06
Step 6
Show title over image and reveal description and button on hover
For Simple List
space below section title = 38
Select Simple List by clicking edit content and selecting the “Design” tab
Under Design -> Style turn on card and then select the amount of padding you want. 0 padding would mean not card background color shows around the image.
Under the Design tab select “Size and Space” and set space below section title to 37 by using the slider for images with no border
Under the Design tab select “Size and Space” and set space below section title to 38 by using the slider for images with a border.
The color of the border is the color of the text for whatever color theme you are using
width of full - edge to edge
width of inset - will have space on either side
Reveal description and button on hover
Simple list with space below section title = 38
with no border around images
styled with inset width and space between elements
-
Make your to-do list
This is a much longer column. This is a much longer column.This is a much longer column. This is a much longer column. This is a much longer column. It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
Choose a date
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
Support
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Reveal description and button on hover
Simple list with space below section title = 38
styled with 0 space between elements and full width
-
Make your to-do list
This is a much longer column. This is a much longer column.This is a much longer column. This is a much longer column. This is a much longer column. It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
Choose a date
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
Support
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Reveal description and button on hover with border and space between columns
inset width
Simple list with space below section title = 38
-
Make your to-do list
This is a much longer column. This is a much longer column.This is a much longer column. This is a much longer column. This is a much longer column. It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
Choose a date
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
Support
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Add lines between list items
for Carousel List and Simple List
Select Carousel or List by clicking edit content and selecting the “Design” tab
Under the Design tab select “Size and Space” and set space below section title to 45 by using the slider
set the amount of spacing you would like between the columns and rows. Note your spacing between columns and go into the custom CSS panel and look for @listborderpadding and set it to the same value as your space between your columns.
Variables that are used here:
@linesize - the size of the line in pixels
@linecolor - the color of the line
@listborderpadding - the amount of space in between the items
Add lines between list items
Carousel list with space below section title = 45
-
![]()
Make your to-do list
-
![]()
Choose a date
-
![]()
Support
-
![]()
New List Item
-
![]()
New List Item
Add border lines in between list items
Simple List. Space below section title = 45
-
Dream it.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
Build it.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
Grow it.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
Sell it.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
Style it.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
Share it.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Split Carousel layout - image on right / text on left
space below section title = 52
Choose Carousel option
Leave Title turned on, but make sure it is blank in the Content area
Make it stand out.
-
![]()
"Call out from testimonial here"
Expand on the testimonial in this area
-
![]()
Maybe you want to launch a business
It all begins with an idea.
-
![]()
Maybe you want to turn a hobby into something more
It all begins with an idea.
-
![]()
Maybe you have a creative project to share with the world
It all begins with an idea.
Banner slideshow with full height text overlay
select banner slideshow under design tab
space below section title = 55
Add hover effect and make entire element clickable when button is turned on for the items.
For Simple List
space below section title = 58
For best results toggle on Card under the Design -> Styles panel
To add a border radius and border select any secondary color theme
Variables used:
The border color and size are the universal ones used in the whole website. You can find these variables under the Design -> Custom CSS panel. Look for:
@borderlinesize - the size of the border (ie 2px)
@bordercolor - the color of the border (ie @bright which uses the middle color in the color palette under Site Styles)
Add borders with a border radius and hover mode.
Simple List with Card layout - space below Section title set to 58
-
1
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
2
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
3
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Add borders with a border radius by using any secondary color theme
Simple List with Card layout - space below Section title set to 58
-
1
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
2
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
3
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Add borders with a border radius by selecting any secondary color theme. This section also has a background image with an image effect.
Simple List with Card layout. Space below section title = 58
-
![]()
Dream it.
It all begins with an idea. Maybe you want to launch a business.
-
![]()
Build it.
It all begins with an idea. Maybe you want to launch a business.
-
![]()
Grow it.
It all begins with an idea. Maybe you want to launch a business.
-
![]()
Sell it.
It all begins with an idea. Maybe you want to launch a business.
Add borders with a border radius and hover mode.
Carousel layout with card option. Space below section title = 58
-
![]()
Dream it.
It all begins with an idea. Maybe you want to launch a business.
-
![]()
Build it.
It all begins with an idea. Maybe you want to launch a business.
-
![]()
Grow it.
It all begins with an idea. Maybe you want to launch a business.
-
![]()
Sell it.
It all begins with an idea. Maybe you want to launch a business.
Colliding effect on Simple List
Show title, description and button on hover with a colliding animation effect
space below section title = 72
Colliding effect
Simple List with space below section title = 72
-
Make your to-do list
This is a much longer column. This is a much longer column.This is a much longer column. This is a much longer column. This is a much longer column. It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
Choose a date
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
-
Support
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.