Text with icons

Configure text with icon

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

From the left side menu, select Text with icon.

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

Section visibility

Select from the options to select the visibility of this section: -Always -Small devices only(On selecting this, the section will be visible on mobile devices only.) -Large devices only

Color scheme

Select any color scheme defined in the theme settings>Colors>Schemes.

Section background

Choose the background color from solid or gradient. These colors can be managed in the assigned color scheme.

Content

Heading

Add heading text. (Note: Wrap your text between [ ] to add the markers font.) Markers font Choose the marker's font from the following options: - Accent - Body - Heading (Note: These fonts can be changed in theme settings>typography.) Marker text style Select the marker highlight style from the following options: - None - Text color - Outline text - Fill outline - Text background color Heading size Select the heading size from the following options: - XX- large - X- large - Large - Medium - Small - X-small Heading tag Specify heading code types from H1-H6, div, span or p tag for SEO and search engines for crawling purposes. Description

Add description text. Description text size Select the description text size from the following options: - X- large - Large - Medium - Small - X-small Content alignment Choose the content alignment from the following options: - Left - Center - Right

Column settings

Description style Select the description style from the following options: - Fixed - On hover Desktop column count Adjust the range bar to determine the columns count in between 1 and 4, for the desktop view.

Mobile column count Adjust the range bar to determine the columns count from 1 and 2, for the mobile view. Enable swipe on mobile Select this checkbox to enable swipe of blocks on the mobile view. Column style Choose the column style from the following options: - Border only - Border with shadow - Background only - Animated background - Background with border - Background with shadow - All of the above - None Icon style Choose the icon style from the following options: - Border only - Border with shadow - Background only - Background with border - Background with shadow - All of the above - None Icon size Choose the icon size from the following options: - Small - Medium - Large Icon position Choose the icon position from the following options: - Left - Top Spacing between icon and text Choose the spacing between icon and text from the following options: - Small - Medium - Large Column content alignment Choose the content alignment from the following options: - Left - Center - Right

Section spacing

Desktop top space

Adjust the range bar to add spacing at the top of the section for desktop view.

Desktop bottom space

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

Mobile top space

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

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

Block settings

Icon

Choose any icon from the given list of icons.

Custom icon

Select any image for the icon, from the store library.

Content

Heading

Add heading text. Heading size Select the heading size from the following options: - Large - Medium - Small - X-small Heading tag Specify heading code types from H1-H6, div, span or p tag for SEO and search engines for crawling purposes. Description

Add description text.

Colors

Heading Select any color for the heading. Description Select any color for the heading.

Icon Select any color for the icon. Icon background Select any color for the icon's background. Column background Select any color for the column's background.

Last updated