Create an Impactful Above the Fold Section | GemPages 101
Table of Contents:
- Introduction
- What is Above the Fold Section?
- Creating the Above the Fold Section
3.1 Adding the Product Details Section
3.2 Configuring the Product Images and Gallery
3.3 Crafting the Product Title
3.4 Incorporating Star Ratings
3.5 Displaying the Product's Benefits
3.6 Showing the Product Price
3.7 Adding Product Options
3.8 Including the Product Cart Button
3.9 Placing Payment Methods
3.10 Adding Reviews
- Conclusion
Introduction
Welcome to the GemPages 101 video tutorial series! In this series, we will guide you through the process of designing a killer landing page using GemPages version 7 editor. In the earlier videos, we have explored the improvements of version 7 over version 6 and mastered the use of common elements and settings. Now, it's time to put that knowledge to the test and create an impactful above the fold section for your landing page. So, keep watching to learn exactly how to create a landing page that captivates your audience.
What is Above the Fold Section?
The above the fold section is the first thing your visitors see when they open a webpage. It is where you showcase the most vital information about your products or services. This section not only needs to make a good impression but also provide a direct value proposition to attract and engage your customers. The above the fold section we will create includes the product details, images, star ratings, benefits, price, product options, payment methods, and reviews.
Creating the Above the Fold Section
Adding the Product Details Section
To start designing the above the fold section, we need to add the product details section. This section will contain all the essential elements that will catch your customers' attention. You can easily drag the product element from the left sidebar onto your page. GemPages version 7 offers three standard layouts for the product details section.
Configuring the Product Images and Gallery
Once the product details section is added, it's time to add images to showcase your product. The product images and gallery element allows you to display a high-quality featured image and additional images from different angles. You can configure the layout and choose between a listing or a slider format. Make sure the images are optimized for both desktop and mobile screens.
Crafting the Product Title
The product title is a crucial element in the above the fold section. It should be brief but intriguing, providing a summary of the product and serving as an effective keyword for search engines. GemPages allows you to make adjustments to the title and settings. Utilize the product link to index the title with the link for better SEO optimization.
Incorporating Star Ratings
Building trust with your audience is essential. Star ratings help establish credibility. While there are third-party review apps available, GemPages allows you to incorporate star ratings using built-in elements. Simply add a two-column row, drag the star ratings element, and style the content. Duplicate the star ratings for mobile screens and ensure a consistent display.
Displaying the Product's Benefits
An above the fold section should highlight the benefits of your product. GemPages offers an icon list element to showcase these benefits. You can easily navigate to the content list and select the icon list. Make adjustments by increasing the distance between the icon and text, ensuring a visually appealing presentation. Review the layout on different screen sizes for optimal display.
Showing the Product Price
The product price section is crucial to boost sales. GemPages' product price element includes the purchase price, comparison, and discount amounts. Configure the price by selecting the style, size, and font weight for text. Eliminate the spacing for the discount amount and ensure a seamless transition between different screen sizes. Optimize the display for desktop and mobile screens.
Adding Product Options
GemPages offers two options for product variations: product swatches and product variants. Depending on the product, you can choose the appropriate option. Configure settings such as option value text and option size to provide a seamless shopping experience for your customers. Ensure proper display on different screen sizes.
Including the Product Cart Button
Encourage customers to proceed to checkout faster by adding the product cart button. GemPages supports both the product cart button and the product dynamic checkout. Customize the label and styling of the cart button to suit your branding. The product cart button represents the "add to cart" or "buy it now" option, while the product dynamic checkout skips the cart and proceeds directly to the checkout method displayed on the button.
Placing Payment Methods
Customers need to feel secure during the purchasing process. Displaying the accepted payment methods helps build trust and confidence. Drag and drop a five-column layout and upload an image that includes the payment options you offer. Configure the layout settings to ensure a visually appealing presentation. Check how it looks on different screen sizes and optimize the layout and content for mobile screens.
Adding Reviews
Placing reviews within the above the fold section captures maximum attention from your customers. You can easily configure this by dragging a row, adding a text block, and editing the content. Change the color and adjust the spacing to enhance the visual appeal. Duplicate the star ratings to maintain consistency and establish credibility. Review the layout on different screen sizes, ensuring a mobile-friendly design.
Conclusion
Congratulations! You have successfully created an impressive above the fold section using GemPages version 7. The above the fold section is the first impression that your visitors have of your landing page, so it's essential to make it captivating and informative. By following the step-by-step guide provided in this article, you have learned how to add product details, images, star ratings, benefits, price, product options, payment methods, and reviews to your above the fold section. Remember to optimize your design for both desktop and mobile screens to ensure a seamless user experience for your customers. Keep exploring the GemPages 101 series for more fundamental tips and advice to build a store that sells.
Highlights:
- Designing a killer landing page using GemPages version 7
- Creating an impactful above the fold section
- Showcasing vital information about products or services
- Adding product details, images, star ratings, benefits, price, options, payment methods, and reviews
- Optimizing the design for desktop and mobile screens
- Establishing trust and building credibility with customers
FAQ:
Q: Can I customize the layout of the product details section in GemPages?
A: Yes, GemPages version 7 provides built-in support for three standard layouts of the product details section. You can choose the layout that best suits your needs and customize it accordingly.
Q: Can I display discounts and comparison prices for my products using GemPages?
A: Yes, GemPages' product price element includes options for displaying purchase price, comparison, and discount amounts. You can configure these settings to boost sales and attract customers.
Q: Are there any restrictions on the number of product options I can add in GemPages?
A: GemPages offers two options for product variations: product swatches and product variants. You can add as many options as needed to provide a seamless shopping experience for your customers.
Q: Can I incorporate customer reviews into the above the fold section using GemPages?
A: Yes, GemPages allows you to easily add customer reviews to the above the fold section. By dragging a row, adding a text block, and editing the content, you can display reviews and build trust with your audience.
Q: Is GemPages optimized for mobile screens?
A: Yes, GemPages ensures that your designs are mobile-friendly. You can customize the layout and content to ensure optimal display on different screen sizes, providing a seamless user experience.
