Create Engaging Shopify Landing Pages with Fishfly App
Table of Contents:
- Introduction
- Creating a New Page
- Adding Elements to the Page
- Building Headings
- Adding a MailChimp Form
- Building a Three-Column Layout
- Adding Images
- Building Unique Selling Points
- Adding Dividers
- Building Button Elements
- Removing the Header and Footer
Introduction
In this article, we will explore the process of creating a landing page using the Fishfly app. We will go through the step-by-step process of adding elements, building headings, incorporating forms, and creating captivating content. By the end of this article, you will have a solid understanding of how to build an engaging landing page using Fishfly.
1. Creating a New Page
To begin, we need to create a new page within the Fishfly editor. Click on the "Create a New Page" button and wait for the page editor to load. Once loaded, select a suitable template and name your page, such as "My Landing Page with Fishfly."
2. Adding Elements to the Page
Next, let's start adding elements to our page. We will begin by adding a layout element section. This will provide a structure for placing our content. To add an image, which we will use as the logo, navigate to the "Styling" tab and select the logo image. Choose a suitable color, like the purple color used in Shopify landing pages. Adjust the styling in the general tab and set the background accordingly.
3. Building Headings
In order to create headings, we will use the heading element from the Fishfly editor dashboard. There are two predefined styles to choose from. In the general tab, input the desired heading style, such as Heading 1, and select a suitable color, like white. Copy the "Trusted by over 600,000 customers" text and input it in the general tab. Adjust the styling by selecting the white color and setting the desired font size.
4. Adding a MailChimp Form
To add a MailChimp form, drag and drop the form element below the headings. As we want to build a three-column layout, place the form in the central column. Adjust the text and button placeholder according to your requirements.
5. Building a Three-Column Layout
To build a three-column layout, add a section layout element and place it below the MailChimp form. Inside this section layout, add three columns. For each column, incorporate an icon, heading, and paragraph. Choose suitable predefined content for the section.
6. Adding Images
To add an image, select the image element from the left column of elements. Choose an appropriate image variation and place it in the desired location. You can adjust the alignment and styling of the image using the Fishfly editor.
7. Building Unique Selling Points
To make the landing page more appealing, add three columns within a section layout. Each column will contain an icon, a heading, and a paragraph. Select suitable content to showcase your unique selling points. Adjust the styling and alignment of the column elements as desired.
8. Adding Dividers
To separate sections, include dividers between different parts of the landing page. Duplicate the divider element and place it accordingly. Adjust the color and transparency of the dividers to match the overall design.
9. Building Button Elements
Incorporate button elements to guide user interaction on the landing page. Start with a new section layout and add a button element. Choose a button variation that aligns with the design of Shopify landing pages. Customize the text and styling of the button to match your brand. Align the button to the center of the section layout.
10. Removing the Header and Footer
To remove the header and footer from the landing page, go to the app's settings and select the "Hide Header and Footer" option. Ensure your page is published before making this change.
With these steps, you can create an engaging landing page using the Fishfly app. Experiment with different elements, styles, and content to make the page truly unique to your brand!
Highlights:
- Learn how to create a landing page using the Fishfly app
- Step-by-step guide for adding elements, building headings, and incorporating forms
- Make your landing page visually appealing with unique selling points and images
- Customize the design by adding dividers, buttons, and removing the header and footer
FAQs:
Q: Can I use my own images in the Fishfly app?
A: Yes, you can upload your own images or choose from the available variations within the app.
Q: Is the Fishfly app compatible with other website platforms?
A: Fishfly is specifically designed for creating landing pages and may have integration options available for some website platforms.
Q: Can I customize the colors and styling of the elements?
A: Yes, the Fishfly app provides options to customize the colors, fonts, and styling of the elements to match your brand.
Q: How can I preview and publish my landing page?
A: The Fishfly app allows you to preview your landing page before publishing. Once you are satisfied with the design, you can publish it to make it live on your website.
