The Step Flow widget by Atomic Addons shows one step of a process, such as “Sign up”, “Choose a plan” or “Get started”: an icon or image with a badge like “Step 01”, a title, a short description, an optional Read More button and an arrow pointing to the next step. Put one widget in each column of a row to lay out the whole process. This guide covers adding the widget and its settings.
Enable the Step Flow Widget
Step Flow is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Step Flow. You can also open the Content category.
- 4
Turn the Step Flow widget on.
- 5
Click Save Settings.
Add the Step Flow Widget
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Step Flow. The widget sits in the Atomic Addons category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
For a process of three steps, add a section with three columns, set up the first Step Flow widget, then duplicate it (right-click → Duplicate) into the other columns and change the text, the icon and the badge. Turn the arrow off on the last step.
Step Flow
Content → Step Flow holds the step itself:
- 1
Icon Type: Icon (the default) or Image.
- 2
Icon: With Icon: the icon above the title, a signpost by default. Pick any icon or upload an SVG.
- 3
Image Icon: With Image: the picture above the title. Image Resolution picks its size, Full by default.
- 4
Title: The step's heading, “Step Flow Heading” by default.
- 5
Title Link: Turns the title into a link. Title Link URL sets where it leads.
- 6
Description: The text under the title. Simple HTML such as
<strong>and line breaks is kept. - 7
Title HTML Tag: The title's markup: H1 to H6, div, span or p. H3 by default.
- 8
Alignment: Left, center (the default look), right or justified, per screen size.
- 9
Title Separator: Adds a short line between the title and the description.
- 10
Read More: Adds a button under the description, set up in the Read More section.
- 11
Badge (Step): Shows the step label on the icon, set up in the Badge (Step) section. On by default.
- 12
Show Direction: Shows an arrow at the right edge of the step, pointing to the next one. On by default.
- 13
Direction Hide On: With the arrow on: hides it on Desktop, Tablet or Mobile. Pick any of them, for example Mobile, where the columns stack and the arrow would point sideways.
- 14
Global Link: Makes the whole step one link. Global Link URL sets where it leads. As the panel warns, the link covers the step, so the title link and the Read More button no longer work while it is on.
Read More
With Read More on, Content → Read More sets up the button:
- 1
Text: The button label, “Read More” by default.
- 2
Link to: Where the button leads,
#by default. The cog icon opens Elementor's link options. - 3
Icon: An optional icon in the button.
- 4
Icon Position: With an icon: Left or Right (the default) of the label.
- 5
Icon Spacing: With an icon and a label: the space between them, 8px by default.
- 6
Show on Hover: Hides the button until visitors point at the step, then fades it in. Horizontal Offset (−50px by default on desktop, 0 on tablets and phones) and Vertical Offset (0) move it, −200px to 200px.
- 7
Button ID: An optional HTML id for the button, without the
#, for example to track clicks. Use letters, numbers and underscores, and make it unique on the page.
Badge (Step)
With Badge (Step) on, Content → Badge (Step) sets up the label:
- 1
Badge Text: The label, “Step 01” by default. Leave it empty for no badge.
- 2
Position: Where it sits on the step: Top Center by default, or any corner, edge center or the center.
- 3
Offset: Click the pencil and choose Custom to fine-tune the badge: Horizontal Offset and Vertical Offset move it up to 300px either way, and Rotate tilts it, −360° to 360°. Each can differ per screen size.
Style the Step Flow
Everything below is on the Style tab. Sections that belong to a part you turned off are hidden.
- Icon/Image — the icon's color, background, size, padding, border, radius and rotation, or the image's width and effects, with a Hover state and hover effects. Offset moves the icon from its place.
- Title and Description — spacing, color and typography, with a Hover state that applies while visitors point at the step.
- Title Separator — the line's alignment, style, color, height, width and spacing.
- Read More — the button's colors, background, border, radius, padding and shadow, with a Hover state, a hover animation and an Attention switch that makes the button pulse.
- Direction — the arrow's offsets, rotation, color and size.
- Badge (Step) — text color, background, border radius, padding and typography.
- Additional — Content Inner Padding, the space around the title, description and button.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.