[V6] Icon Element

What is the Icon element?

The Icon element is one of GemPages’ Base elements which is multi-purpose and flexible in functionalities. You can place the element anywhere on the page and even link it to scroll to an anchor link.

Add the Icon element to your page

Step 1: From the GemPages Dashboard, open your selected page and enter the Editor via the “Edit” button.

Step 2: From the left sidebar, drag & drop the Icon element from the left sidebar onto your preferred spot on the page.

The element’s configurations will be available on the left sidebar. We’ll go over these parameters in the next sections.

Configure the Settings tab

Icon

This section will display your currently selected icon, hit “Choose Icon…” to browse the icon library. After selecting an icon, hit “Save” to complete the action and exit the library.

Color

Change the color of the icon using the provided color palette or enter a hex/RGB color code.

Size

Adjust the icon size in pixels using the slider or the mini box.

Alignment

Align the icon in relation to its position in the section in 3 positions: Left, Centered, or Right.

Link

The Link section allows you to link the icon to another page. It could be your own pages, a URL to any other website, or even a section of the current page.

Pick link

Hit this button to send visitors to a destination page. The link picker window will appear for you to select the link to add. Two options at this point: Enter the link to the Custom URL field or choose from the tabs below.

Pages, Collections, Products, and Articles: internal links to other pages of your store.
Scroll to: this option allows you to leap to a specific section of the current page. For more information, see this article about anchor links.

Here’s an example of using the Scroll to feature in action:

Email: Visitors can send emails to your address with the subject and body pre-filled.
Phone: Shows your visitors your phone number and the option to call.

The Open Link In drop-down lets you choose between opening the linked URL in a new browser tab or staying on the current tab.

Unless you use the anchor link function to scroll down, it’s best to open the URL in a New Tab.

Extra Class

Coding is second nature to you and you wish to customize the Icon element even further? Feel free to set a class name in this field and refer to it later in the CSS file.

Configure the Design tab

Don’t forget to fine-tune the element’s look and feel using the Design tab before hitting “Save” and “Publish” to bring your icon to the live page!

Check out more elements here.