A landing page should encourage users to take (purchase) action and/or generate leads for your company. We show you what you need to pay attention to so that nothing stands in the way of the success of your landing page.
The Goal of a Landing Page
Visitors usually land on your landing pages through a Google search, social media or other ads. The goal should be to pick up the visitors and, in the best case, to achieve a conversion, such as the purchase of a product or the conclusion of a contract. The focus is therefore on valuable information and call-to-actions.
The Structure
An uncomplicated structure of your landing page is much more important than the design - studies confirm this. When building a landing page, make sure that the target group can find their way around quickly and easily.
In JUNE, always use a section first and fill it with containers or grids.
You can also drag content components directly into a section, but a container or grid gives you more customization options in terms of spacing, alignment, format, backgrounds, effects, borders, and more.
The Structure of a Website
1. Navigation / Header
The navigation usually shows the company logo, the menu and, if applicable, further information and icons (shopping cart, search, etc.) or call-to-action buttons (contact, inquiry, purchase). The focus should be on clarity.
To create a header, follow the steps below:
In JUNE, you choose the Navigation Components for this part of your website and fill them with life.
Navigate to the Landing Page Editor, go to Components via the left sidebar and add the Navigation Components to the top of your website. Fill the section with the content you want your header to show, using the other navigation components Link and Dropdown:
Open the Layers in the right sidebar and give the navigation section a meaningful name before you continue. This will help you later with the clarity. Double click on the name of the section.
Now click on the three dots of the section and select Create Reference.
If you now change the navigation section in one place of your website, it will be changed on every (sub)page where it is installed.
2. Landing Page Header (Hero)
The header describes the upper part of your website, which leaves the first impression on your users. Here you should present a meaningful H1 headline, a call-to-action and a beautiful and appropriate imagery. You create this section just like any other content section. Many website providers set the format of the hero to 75% or 100%, so that users initially only see the hero when they visit your website.
3. Content
After the header area, all options are open to you. What do you want to communicate? What is your goal? What will go down well with your target group? You should deal with these questions in any case and create a suitable layout accordingly and fill it with relevant content.
Use all available Content Components to fill your website with your desired content. You can view the overview of the components via the left sidebar > Components.
These elements are crucial for the perfect landing page content:
Build contemporary and thematically appropriate design
Choose a clear structure
Choose convincing headlines
Use images, videos and illustrations
Focus on unique selling points
Highlight positive customer testimonials
Play out meaningful and short content
Use eye-catching call-to-action buttons to drive conversions
4. Forms
Forms on landing pages are used to allow your website visitors to submit their information to you - such as contact details, email addresses, feedback, survey responses, or even purchases. Forms are an essential element of landing pages and play a crucial role in lead generation, customer acquisition, and user interaction.
Why you should use forms:
Lead Generation: Forms collect visitor information, such as their names, email addresses, phone numbers, etc., and convert anonymous users into potential leads.
Conversion Opportunities: Forms provide clear CTAs for actions such as subscriptions, quote requests, downloading content, or purchasing products.
Data Collection & Market Research: Forms collect specific data about the target audience for insights, research, personalization, and improving the user experience.
Communication & Customer Support: Establish direct contact for inquiries, support, and feedback to improve customer engagement.
Personalization: By collecting specific information through forms, you can customize your marketing efforts and communications based on individual user preferences.
Data Organization & Automation: All data entered by your users can be automatically stored, organized and segmented for future reference in JUNE CRM (Customer Relationship Management). This automation streamlines data management and facilitates lead nurturing and follow-up processes.
Measurable Metrics & Optimization: Forms provide measurable metrics to analyze landing page performance, identify areas for improvement, and optimize usage.
Forms in JUNE:
A form always consists of a Form Container, which determines where the data is stored and how the form should generally look and behave.
The various fields that are to be queried and saved in the form are then added to the Form Container. These fields can be set in a variety of ways, from simple Text Fields that can be validated directly if required (e.g. an email address), to Checkboxes, Dropdowns in different variations and File Uploads.
To complete the form and allow the information to be submitted, a Submit Button must always be added at the end.
To learn even more about the steps you need to take to ensure that the data you want to collect via a form ends up in the right list, follow this article:
Build forms ***coming soon***
Form example for bookings:
Form example for a raffle:
5. Slideshows
Slideshows are a space-saving way to incorporate multiple graphics into your landing page as an image slideshow.
Advantages of slideshows:
Visual Impact: Captivating and interactive display of multiple images.
Storytelling: Convey messages or narratives through sequential images.
Optimizing Space: Present multiple images in a small space.
Highlighting Variations: Show different versions or angles of a product.
Usage guidelines for website editors:
Select relevant and high-quality images.
Optimize image sizes for performance.
Match transitions to branding.
Provide user:inside control over navigation and interaction.
Ensure images are responsive on all devices.
Add alt text for accessibility.
Update content regularly to keep it fresh.
Use slideshows in JUNE:
Go to your Landing Page Editor.
Create a Section und add a Slideshow Container.
Now drag the Slideshow Item component into the Slideshow Container. Use as many Slideshow Items as you want to add images.
As a last step you have to drag an Image Component into the respective Slideshow Item as shown in the example below.
6. Interactive Elements (Tabs, Modals)
Tabs and modals are the two most common interactive components used on websites to improve usability and organize content effectively. Below is a description of the two components:
Tabs:
Tabs are navigation elements that divide the content into separate sections that users can switch between without loading new pages. Each tab can stand for a specific category or topic and clicking on it will display the corresponding content while hiding the others.
Advantages of tabs:
Content organization: Tabs help categorize and organize information, especially when there are multiple sections or topics on a single page. This also enhances the user experience.
Space saving: Save space by grouping content into compact sections so that users can focus on the information that is relevant to them.
Use tabs in JUNE:
Go to your Landing Page Editor.
Create a Section and add the Tab Container.
Now drag the Tab Item component into the Tab Container. Use as many tab items as you want.
The last step is to drag the desired content components into a container in the respective Tab Item, as shown in the example below.
Modals (Intent Modal):
Modals, also known as intent modals or pop-ups, are temporary windows that overlay the main content of a web page to display additional information or prompt user interaction. They usually appear in the middle of the screen and obscure or blur the background content to draw attention to the modal's content or action.
Advantages of modals:
Targeted Attention: Modals attract the user's attention by overlaying the main content and highlighting specific information or calls to action.
Contextual Information: Modals provide additional details or explanations without leaving the current page, improving user comprehension.
User Actions: Modals can prompt users to take specific actions, such as filling out a form, confirming a decision, or viewing multimedia content such as videos or images.
Opt-in/opt-out Interactions: Commonly used for consent forms, cookie notifications, or newsletter subscriptions, modals allow users to easily control their preferences without leaving the current web page.
User Flow Interruption: while modals can be effective, they should be used in a balanced way so as not to interrupt the user's flow or become intrusive to ensure a positive user experience.
Use modals in JUNE:
Go to your Landing Page Editor.
Create an Intent Modal and click on "Open Modal (for editing)" in the settings shown on the left-hand side, to view the modal and visually edit it.
Add a Container or e.g. a Grid to the Intent Modal. Fill the component with other components as you like.
Modal example for a newsletter sign-up:
7. Footer
A footer is a section at the bottom of a website that usually contains information about the website such as a comprehensive menu, link to masthead & privacy, copyright notice, and contact information. It is used to navigate the website and find additional resources. The footer is usually the same on all pages of the website and can be accessed by scrolling to the bottom of the page.
To create a footer, follow these steps:
Create a Section at the bottom of your website in the landing page editor. Fill the section with the content you want your footer to display.
Open the Layers in the right sidebar and navigate to the section you want to use as a footer.
Give the section a meaningful name before you continue. This will help you later with the clarity. Double click on the name of the section.
Now click on the three dots of the section and choose Create Reference.
If you change the section in one place, it will be changed on every (sub)page where it is installed.
To use the footer on a (sub)page, follow the steps below:
Navigate to your Favorites > References (top menu bar) in the left sidebar.
Select the footer section you created as reference and drag it to the end of your (sub)page.