Enhance Your Landing Page with Stunning Icons in PageFly

Table of Contents

1. Introduction
2. What is the Icon Element?
3. Adding Icons to Your Landing Page
   1. Using the Icon Element as Buttons
   2. Using the Icon Element with Text and Headings
   3. Using the Icon Element with the Divider Element
4. Finding and Adding Icons
   1. Searching for Icons in PageFly
   2. Uploading Custom Icons as Images
5. Editing the Icon
   1. Changing the Size
   2. Adding Click Actions and Links
6. Styling the Icon
   1. Changing the Global Style
   2. Modifying the Content Color
   3. Adjusting the Background Color and Border Radius
7. Setting Up Icons with the Content List Element
   1. Aligning Icons Horizontally
   2. Changing Icon Colors
8. Setting Up Icons with the List Element
   1. Adding and Editing Icons in the List Element
   2. Changing Icon Colors in the List Element
9. Publishing and Previewing the Page
10. Conclusion

Introduction

Welcome back to the PageFly video tutorial series! In today's video, we will explore the use of the Icon Element in PageFly. Icons are a great way to enhance your landing page and increase conversion rates. In this tutorial, we will cover the various ways you can use the Icon Element, how to find and add icons, how to edit and style them, and how to integrate them with other elements on your page. Let's dive in!

What is the Icon Element?

The Icon Element is a powerful tool that allows you to add icons to your landing page. These icons can be used as buttons, in combination with text and headings, or alongside the Divider Element. Icons help to visually enhance your page, create a clear call to action, and improve the overall user experience. With PageFly, you have access to a wide variety of icons, making it easy to find the perfect match for your brand and design.

Adding Icons to Your Landing Page

Using the Icon Element as Buttons

One popular use of the Icon Element is as buttons. By adding an icon and linking it to a specific page or action, you can create interactive elements that encourage users to take specific actions. To add an icon button, simply drag and drop the Icon Element onto your page. In the General tab, you can select the icon you want to use from a vast library of options. You can also customize the size of the icon, change the click action to link to another page, and choose whether to open the link in a new tab or not.

Using the Icon Element with Text and Headings

Another way to utilize the Icon Element is by combining it with text and headings. This can help to draw attention to important information or create eye-catching design elements. To add an icon with text or headings, drag and drop the Icon Element onto your page. In the General tab, choose the desired icon and customize the size. Then, you can simply add your text or heading next to the icon. This allows you to create visually appealing sections that grab the reader's attention.

Using the Icon Element with the Divider Element

The Icon Element can also be paired with the Divider Element to create unique and visually striking designs. By adding an icon before or after a divider, you can create a clear separation between sections while adding an extra touch of style. To use the Icon Element with the Divider Element, drag and drop both elements onto your page. Customize the icon and divider settings to your liking. This combination can be particularly effective in showcasing different sections of your landing page and guiding the user's attention.

Finding and Adding Icons

Searching for Icons in PageFly

In PageFly, you have access to a vast library of icons to choose from. To find icons for your landing page, simply click on the "Add Element" button in the editor page. You can then search for the Icon Element under the basic category or use the search bar to find it easily. Once you've added the Icon Element to your page, you can select the desired icon from the library, which includes nearly 2,000 options. If the specific icon you want is not available in PageFly, you can also upload your own icon as an image using the Image Element.

Uploading Custom Icons as Images

If you have a custom icon that is not available in the PageFly library, you can easily upload it as an image using the Image Element. Simply drag and drop the Image Element onto your page and upload your custom icon. This gives you the flexibility to use any icon that aligns with your brand and design choices. By combining the Image Element and the Icon Element, you can seamlessly integrate your own icons into your landing page design.

Editing the Icon

Changing the Size

In the General tab of the Icon Element, you can easily change the size of the icon. You can either drag the size bar vertically to adjust the size manually or enter a specific number in the size box. This allows you to customize the size of the icon to fit your design needs. Whether you want a large, attention-grabbing icon or a small, subtle icon, you have complete control over the size with PageFly.

Adding Click Actions and Links

One of the key features of the Icon Element is the ability to add click actions and links. By linking the icon to another page or action, you can create interactive elements that direct users to specific destinations. In the General tab, you can use the click action function to link the icon to another page. Simply paste the desired link in the designated box and choose whether to open the link in a new tab or not. This feature is particularly useful for creating call-to-action buttons and guiding users to take desired actions.

Styling the Icon

Changing the Global Style

PageFly offers six different global styles for icons, allowing you to easily change the overall look and feel of the icons on your landing page. To modify the global style, go to the PageFly dashboard and click on "Extra Functions." From there, click on "Manage" and select "Icon." Here, you can customize the settings and edit the name of the global style. Make sure to publish the settings to apply the changes to your icons. Back in the editor page, you can further customize the content color and background color of the icon.

Modifying the Content Color

In the styling tab of the Icon Element, you can change the content color of the icon. The content color refers to the color of the icon itself. By choosing a different content color, you can ensure that the icon stands out and complements the overall design of your landing page. If you want to have more color options, you can also click on the "Edit Property Global Style" button to access additional color choices.

Adjusting the Background Color and Border Radius

By modifying the background color of the icon, you can create a more visually appealing element. In the styling tab, you can choose the background color that best fits your design. Additionally, you can use the border radius feature to curve the four angles of the background behind the icon. This adds a touch of elegance and uniqueness to the icon. By experimenting with different background colors and border radius options, you can find the perfect combination for your landing page.

Setting Up Icons with the Content List Element

The Content List Element offers a great way to display icons in a horizontal direction. This is particularly useful when you want to showcase a list of features, services, or products. To set up icons with the Content List Element, drag and drop the element onto your page. Then, replace the default star icons with the icons of your choice, using the steps mentioned earlier. You can also change the heading and paragraph text to provide more context and information. Additionally, you have the ability to align the icons horizontally and change their colors to match your design preferences.

Setting Up Icons with the List Element

The List Element allows you to create vertical lists of icons and text, providing a clear and organized layout for your landing page. To set up icons with the List Element, simply drag and drop the element onto your page. From there, you can customize the icons and texts to your liking by following the same steps mentioned earlier. The List Element also offers the option to duplicate icons, allowing you to add more icons and create a comprehensive list. By changing the colors of each icon, you can create a visually pleasing and informative section on your landing page.

Publishing and Previewing the Page

Once you have finished adding and styling the icons on your landing page, it's time to publish and preview the page. By clicking on the "Publish and Save" button, you can ensure that all the changes and settings are saved. This allows you to see exactly how the icons appear in the live view and make any final adjustments if needed. By previewing the page, you can experience the user's perspective and ensure that the icons enhance the overall design and user experience.

Conclusion

Icons are powerful elements that can greatly enhance the design and functionality of your landing page. With the Icon Element in PageFly, you have endless possibilities to add icons as buttons, in combination with text and headings, or alongside dividers. By following the steps outlined in this tutorial, you can easily find and add icons, customize their size and appearance, and integrate them seamlessly into your landing page. Icons not only improve the visual appeal of your page but also provide clear calls to action, guide user attention, and increase conversion rates. So start experimenting with icons in PageFly and take your landing page design to the next level!

Highlights

• The Icon Element allows you to add icons to your landing page and enhance its visual appeal.
• You can use the Icon Element as buttons, in combination with text and headings, or alongside dividers.
• PageFly offers a vast library of icons to choose from, with the option to upload custom icons as images.
• Icons can be easily customized in terms of size, click actions, and links.
• The styling of icons can be modified globally or individually, allowing for creative design choices.
• The Content List Element and List Element provide different ways to showcase icons in horizontal and vertical layouts.
• Publishing and previewing the page allows you to see how the icons appear to users and make any necessary adjustments.

FAQs

Q: Can I use my own custom icons with PageFly? A: Yes, you can upload your own custom icons as images using the Image Element in PageFly.

Q: Can I change the size of the icons? A: Yes, you can easily change the size of the icons by dragging the size bar vertically or entering a specific number in the size box.

Q: Can I link the icons to other pages or actions? A: Absolutely! The Icon Element allows you to add click actions and links, directing users to specific destinations.

Q: Can I change the style and color of the icons? A: Yes, you can modify the global style and customize the content and background colors of the icons to match your design preferences.

Q: Can I showcase a list of icons and their descriptions on my landing page? A: Certainly! PageFly offers the Content List Element and List Element, which allow you to create both horizontal and vertical lists of icons and accompanying text.

Q: How can I preview my landing page with the icons I've added? A: Simply click on the "Publish and Save" button to save your changes, then preview the page to see how the icons appear to users.

Q: Can icons help improve my conversion rate? A: Yes, icons can be effective in increasing conversion rates by providing clear calls to action, guiding user attention, and enhancing the overall user experience.