The Steps section shows a numbered list of short steps under a heading, such as a recipe or how your service works. Each step has its number in a circle, a short title and a line of text. To add one, click Add section in the editor and select Steps.
The Steps preset has a centered heading, a paragraph and four Step blocks in four columns. The numbers follow the order of the blocks, so moving a block renumbers the steps.
Layout
Alignment puts the heading, the text and the number circles on the left, in the center or on the right. With Rows and Cards, the steps' text always lines up on the left. Padding top, Padding bottom, Margin top and Margin bottom work as in other sections, and Section layout settings describes them.
Background
The section can sit on a color, a photo or a video. Section background settings covers these settings. With Image set, the number circles take the page's own background color, so they still show on a colored background.
Content
Setting
What it does
Style
How the steps are laid out. The choices are in the next table.
Columns
How many steps sit side by side, from 1 to 6. The default is 4. On a narrow screen, steps move to the next row instead of getting too narrow, so a phone shows fewer per row. Shows unless Style is Rows.
Image
A tall photo beside the heading and the steps. On screens narrower than 768 px, it sits above them.
Image position
Left or Right of the steps. Shows when Image has a photo.
Choice
What you see
Columns
The default. Steps side by side, each with its number circle above its title.
Connected
Like Columns, with a thin line joining the number circles. Each row keeps the number of steps set in Columns on screens 768 px and wider, so the line reads best when Columns equals the number of steps. On narrower screens, the steps run down the page with the line between the circles on the left.
Rows
One step per row, with the number circle on the left of its text and a thin line between the steps. It suits longer text.
Cards
Each step on a light panel with rounded corners, the number in the top left corner and the text at the bottom.
When Heading, Description and the blocks are all empty, the section shows nothing.
Motion
Dark moment, Rise on scroll and Chapter title work as in every section. Section motion settings describes them.
Step blocks
Each Step block has a Heading and a Text. Leave either one empty to hide it.
The Steps section shows a numbered list of short steps under a heading, such as a recipe or how your service works. Each step has its number in a circle, a short title and a line of text. To add one, click Add section in the editor and select Steps.
The Steps preset has a centered heading, a paragraph and four Step blocks in four columns. The numbers follow the order of the blocks, so moving a block renumbers the steps.
Layout
Alignment puts the heading, the text and the number circles on the left, in the center or on the right. With Rows and Cards, the steps' text always lines up on the left. Padding top, Padding bottom, Margin top and Margin bottom work as in other sections, and Section layout settings describes them.
Background
The section can sit on a color, a photo or a video. Section background settings covers these settings. With Image set, the number circles take the page's own background color, so they still show on a colored background.
Content
Setting
What it does
Style
How the steps are laid out. The choices are in the next table.
Columns
How many steps sit side by side, from 1 to 6. The default is 4. On a narrow screen, steps move to the next row instead of getting too narrow, so a phone shows fewer per row. Shows unless Style is Rows.
Image
A tall photo beside the heading and the steps. On screens narrower than 768 px, it sits above them.
Image position
Left or Right of the steps. Shows when Image has a photo.
Choice
What you see
Columns
The default. Steps side by side, each with its number circle above its title.
Connected
Like Columns, with a thin line joining the number circles. Each row keeps the number of steps set in Columns on screens 768 px and wider, so the line reads best when Columns equals the number of steps. On narrower screens, the steps run down the page with the line between the circles on the left.
Rows
One step per row, with the number circle on the left of its text and a thin line between the steps. It suits longer text.
Cards
Each step on a light panel with rounded corners, the number in the top left corner and the text at the bottom.
When Heading, Description and the blocks are all empty, the section shows nothing.
Motion
Dark moment, Rise on scroll and Chapter title work as in every section. Section motion settings describes them.
Step blocks
Each Step block has a Heading and a Text. Leave either one empty to hide it.