Step by step guide

Configure the step by step guide

Select the customize theme option. Click on the dropdown menu at the top of the page to select the Home page template.

From the left side menu, select Step by step guide.

Customize the section by utilizing the settings on the right side of the theme editor, as described below:

General

Section visibility Select from the options to select the visibility of this section: -Always -Small (On selecting this, the section will be visible on mobile devices only.) -Large (On selecting this, the section will be visible on large devices only.) Color scheme Select any color scheme defined in the theme settings>Colors>Schemes. Background Choose the section background from below options: - Solid - Gradient Container width Choose the container width from below options: - Small - Standard - Wide - Edge - Fullwidth Corner style Choose the corners style from following options: - Sharp - Rounded Rounded: Corner radius Adjust the range bar to determine the radius to be applied in case of rounded corner style.

Section spacing

Choose from Choose spacing for: - Desktop - Mobile Desktop: Top spacing Adjust the range bar to add spacing at the top of the section for desktop view.

Desktop: Bottom spacing Adjust the range bar to add spacing at the bottom of the section for desktop view.

Mobile: Top spacing Adjust the range bar to add spacing at the top of the section for mobile view.

Mobile: Bottom spacing Adjust the range bar to add spacing at the bottom of the section for mobile view.

Desktop layout

Steps position Choose steps position from below options: - Outside - Inside Change steps on: Choose option to change the steps from below options: - Click - On scroll (Note: The scroll does not work, if the image size is smaller and this section is added above the footer section i.e. if there is less scrolling space.) Image height Choose the media height from the following options: - Custom height - Full screen Custom height Adjust the range bar to choose the height for desktop. Card radius Adjust the range bar to determine the card's radius. (Note: Radius is automatically optimized for mobile.)

Mobile layout

Custom height Adjust the range bar to choose the height for mobile.

Block settings

Media

Media type Choose media type from below options: - Image - Video

Image Select an image from the store library. Video Select a video from the store library. Heading

Add heading text. (Note: Enter ++ for a line break and wrap text in [ ] to apply the highlight settings.) Heading tag Specify heading code types from H1-H6, div, span or p tag for SEO and search engines for crawling purposes. Heading size Select the font size from the following options: - Heading XL - Heading L - Heading M - Heading S - Heading XS - Heading XXS Description

Add description text. Description font size Choose the font size from following options: - Extra Large - Large - Medium - Regular - Small - Extra small

Last updated