Welcome to this exciting tutorial where we’re going to walk you through the process of creating a stunning and professional landing page from scratch. The best part? You won’t need to write a single line of code. It’s going to be a breeze to follow along, and by the end of this tutorial, you’ll have the skills to design, build, and publish landing pages for your own business or clients, just like the one you see right here.
The Power of Landing Pages
A landing page is a critical component of any website. It’s the first place your visitors arrive, often through channels like a Facebook ad or a Google search. The real magic of a landing page lies in its ability to convert those visitors into valuable leads by encouraging them to take specific actions. So, let’s dive right in and break down our design step-by-step.
The Hero Section: Captivating Your Audience
On entry, visitors will first encounter what we call the hero section. Here, our goal is to grab their attention right away. Take a look at the captivating background image showcasing a selection of fresh roses and the title “Say it with flowers,” which beautifully illustrates one of the benefits and reasons why someone might send flowers, and, of course, there’s a clear call-to-action button inviting you to scroll down to the next section to find out more. Just click this button to learn more.
Building Trust and Connection
As we scroll down, visitors will learn more about the company and what makes them different from their competitors. This helps establish trust and allows potential customers to get to know the business better before making their first purchase.
At the bottom of this section, you’ll notice another clear call-to-action button. This one takes them to a specially prepared section where they can explore the variety of flowers available.
Exploring the Flower Selection
In this section, visitors will find the flowers the shop has on offer. We’ve included clean and clear images of each arrangement, along with their names and prices.
The call-to-action button has now become a link to give them a call. If the visitor is on a mobile device, clicking this link will automatically call the flower shop directly. This section makes it easy for potential customers to inquire and place orders with just a simple tap.
Connecting with the Flower Shop
Finally, we wrap it up with a contact section. Here, you’ll find the address, phone number, a map showing the shop’s location, and social icons. This makes it incredibly easy for visitors to connect with the flower shop and learn more about their offerings.
Now that you know what we’re going to create, you’re ready to get started. Just click on the next tutorial to begin your journey into the world of creating beautiful and effective landing pages. In our upcoming chapters, we’ll walk you through each step of the process, helping you design landing pages that captivate, inform, and convert visitors into customers. Stay tuned for the next installment!
In this comprehensive tutorial, we’ll show you how to craft a captivating landing page using Elementor, one of the world’s favorite WordPress page builders. The best part? We’ll be leveraging the power of hyWebber’s seamless integration with Elementor, allowing you to design your very own landing page with ease, all without incurring any expenses.
If you don’t already have a hyWebber account, don’t worry. You can sign up for a free trial and follow along with this tutorial. To get started, simply visit https://hywebber.com/hylandingpage or click on the link above. It takes just a few minutes for our team to activate and create your own hyWebber instance. While we wait for your account to be created, let’s dive into the fascinating world of landing page creation.
Getting Started with hyWebber and Elementor
In this lesson, we’ll explore how to work with hyWebber to create your first landing page. Here are the essential steps:
Log in and Create a New Page: From your hyWebber dashboard, navigate to “Web Pages” and click on “Add New.” Give your page a name, and then click “Edit with Elementor” to start crafting your page.
Meet the Elementor Interface: As you enter the world of Elementor, you’ll notice the user-friendly interface that makes building pages a breeze. Here’s a quick orientation:
Editing Area: On the right side, you’ll find the editing area where you can add and edit elements that make up your page’s layout.
Elementor Panel: On the left side, you’ll discover the Elementor panel, which houses creative tools called widgets. You’ll use these widgets to add elements like headings, text, and images.
Bottom Panel: The bottom panel contains key features such as “Page Settings” to give your page a title, change its status from Draft to Published, and select a layout, which can be beneficial when using global headers and footers across your website. For this landing page, we’ll choose “Default.”
Navigator: This tool helps you maintain a clear view of your page’s structure. It will come to life as you start adding content.
History: Keep track of all changes made, so you can easily backtrack if needed.
Responsive Menu View: Switch between device screen sizes to see how your design adapts to different devices.
Preview Button: Get a real-time preview of your design in a new tab.
Publish Button: When you’re ready to share your creation with the world, hit this button. If you’re not quite ready for the public eye, choose “save as draft” instead.
Building Your Landing Page from Scratch
Now, let’s dive into the heart of the matter – creating your landing page. There are two ways to go about this:
Using Templates and Blocks: You can leverage Elementor’s library to choose from pre-built blocks, pages, and saved templates. For instance, you might find a Flower Shop template in your “My Templates” section. Additionally, you can explore free web kits or blocks from Envato Elements to jumpstart your design.
Creating from Scratch: In this tutorial, we’ll take you through the process of creating your landing page from scratch. Understanding this method equips you with the tools and knowledge to tailor your website to your specific business needs. Keep in mind that you can also combine free elements from libraries with your custom design.
So, are you ready to unleash your creativity and build a stunning landing page from scratch? Let’s begin! Stay tuned for the next steps as we guide you through the process of crafting a visually engaging and effective landing page that captures your audience’s attention and drives conversions.
In this section of our tutorial, we’ll guide you through the process of creating the hero section for your landing page. The hero section is a crucial element of any landing page, designed to capture your visitors’ attention and prompt them to take action. To create this engaging section, we’ll use Elementor, a user-friendly page builder that doesn’t require any coding skills. Let’s get started!
Creating the Hero Section Container
First, we need to set up a container with two sections: one for text and a call-to-action button and the other left empty to allow the background image of flowers to shine through. Follow these steps:
Return to your Elementor page.
Click on the plus icon to add a container, but make sure to select the one with two sections.
Sizing Your Hero Section
Now, let’s configure the size of your hero section to ensure it occupies at least 80% of the above-the-fold screen, leaving the remaining 20% for additional company information. Here’s what you should do:
In the left panel, adjust the container settings as follows:
Styling Your Hero Section
Now that we’ve addressed the layout, it’s time to style your container. Here’s how to add a background image to your hero section:
Click on the “Style” tab.
Under the background options, choose the classic background type.
Click on the blank image section to upload your image. You can either select an image from your media library or upload a new one.
After adding your image, adjust its position if necessary, and set “Repeat” to “No-repeat.” Choose “Display size” as “Cover” to ensure it fills the container with your chosen image.
Adding Text and a Call-to-Action Button
Now, let’s add your page heading and a call-to-action button to the hero section. Follow these steps:
To access Elementor’s widgets, click on the 9 small squares icon at the top of the editing panel.
We’ll use three widgets: Text Editor, Heading, and Button. First, drag the Text Editor widget into the hero section. Replace the placeholder text with your own.
Make your text more visible by clicking on the “Style” tab:
To center the text vertically in the left section of the container, click the small grey box in the top left and set “Justify content” to “Center.”
Now, let’s add your page header. Drag the Heading widget below the text box. Customize the header text, alignment, and style as desired.
Finally, add the text under the header using another Text Editor widget. Customize it and adjust the padding to ensure it doesn’t stick to the edges.
The final piece of the puzzle is the call-to-action button. Drag in the Button widget and customize its text, alignment, size, and style.
You can even add a hover animation and round the button’s corners for a polished look.
Congratulations! You’ve successfully created your hero section! In the next video, we’ll continue building your landing page by adding the shop’s additional information banner and overlaying it at the edge of the hero section.
In our previous video tutorial, we made significant progress by designing the hero section, which now occupies 80% of the above-the-fold screen, leaving the lower 20% blank. This layout, as we’ll see when we preview the page, serves its purpose well.
Now, let’s return to Elementor and add the banner that gracefully overlaps the lower portion of the hero section. This banner will offer visitors additional insights into the business.
Designing the Floating Banner
Begin by clicking on the plus icon located just below the hero container. Opt for the “Direction Row” container as the elements we’re adding will be displayed horizontally. If you ever require a vertical layout, you’d choose the “Direction Column” container.
Ensure that the container layout is well-suited for our design. In the Layout tab of the edit panel, make the following adjustments:
Set the width to 1100 pixels.
Adjust the minimum height to 100 pixels.
To achieve the desired floating effect along the border of the hero section, insert a child container within this section. The parent container remains transparent, while the child container receives a white background.
Open the widget panel by clicking on the nine small squares in the top right of the editing section. Drag a Container widget into the parent container.
In the Layout tab of the edit panel for the child container, apply the following changes:
Adding Information Sections
We’re now ready to add three sections that will display additional information. Open the widget panel once more and find the Icon Box widget. You can locate it under the General section, or you can simply type “icon” in the search field to find it.
Drag this widget into the new container and then proceed to edit and style it as needed.
Inside the Icon Box’s edit panel, navigate to the Content tab. Hover over the Icon within the widget, and click on the icon library section to open it up. Search for “calendar,” select the icon, and press “Insert.”
Now, add your desired text to the title section. For instance, we’ve used “Available on weekends and bank holidays,” but feel free to tailor it to your specific needs.
In the description text field, you can delete the placeholder Lorem ipsum text since it won’t be used. We’re primarily focusing on the widget’s title.
Next, let’s style the Icon Box widget to make it visually appealing. Under the Box dropdown:
Change the icon position to “left.”
Set the vertical alignment to “top.”
Align the widget to the left.
Under Content:
Creating Consistency
To make the process more efficient, duplicate this widget twice to keep the same style and only change the icon and title for each.
To duplicate a widget, hover inside the widget on the screen to reveal the pencil icon in the top right corner. Right-click on the pencil icon and select “duplicate.” Repeat this step one more time.
You’ll now have three Icon Box widgets, aligned side by side, and they all maintain the style applied to the first one. Now, we can individually change the icons and titles for each widget.
Click on the middle Icon Box widget and access the editing panel. Open the Icon Library and search for an icon of your choice. In this instance, we’re looking for a hand icon.
Lastly, do the same for the last Icon Box widget. Select an icon and customize the title. You now have three distinct icon boxes within this container.
Fine-Tuning the Banner
Our next step is to shift the parent container upward by 50 pixels so that it partially overlaps the hero section. Click on the dots at the top of the parent container to access the editing panel. In the Advanced tab, delink the margins and padding, and set the top margin value to -50 pixels.
You’ll notice that the child container has shifted up by 50 pixels. Now, let’s alter the background color of the child container.
Hover over the top left of the child container, revealing the small gray square handle. Click on the handle to open the editing panel. In the Style tab, under Background type, select the classic background type and adjust the color to white.
Providing Space and Polishing
Ensure you’ve selected the child container and navigate to the Advanced tab. Delink the margins and padding to reset values to zero. Adjust the top padding to 30 pixels and the bottom padding to 40 pixels.
Now, set the right and left margin values to 50 pixels each to give some breathing room around the icon boxes.
Lastly, to round the corners of the child container, within the Style tab, scroll down to the Border dropdown. Unlink all values and adjust the top and right values to 70 pixels.
A Beautiful Information Banner
Congratulations! You’ve successfully created the information banner. To see how your design looks, click the “Preview” button, and it will open in a new tab. Let’s take a look.
In our next tutorial, we’ll delve into the next step, creating the section that follows right beneath the hero section we’ve just built.
In this tutorial, we’re going to create the ‘Learn More’ section positioned just below the hero section. When a visitor clicks on the “Learn More” button, they’ll be seamlessly directed to this section. Let’s dive right in and return to your Elementor page.
Setting Up the Heading Section
We’ll start by establishing a dedicated section for the heading. Following that, we’ll incorporate another section beneath it, housing text on the left and an image on the right-hand side. To begin, let’s introduce a new container and opt for the “Direction Column” layout.
Inside the container editing panel, navigate to the Layout tab, and set the Content Width to “Boxed” with a width of 1200 pixels. Now, move to the Style tab. Within the background options, select the classic Background Type icon, and choose a background color. It’s crucial to jot down the HEX code for this color, as we’ll be using it to visually connect both sections. The HEX color we’re using here is #FDF7F7.
Creating Space and Styling
Next, we’ll create some spacing between the hero section and this new container. In the container editing panel, head over to the Advanced tab, and unlink the margins and padding to reset all values to zero. Provide a top margin of 80 pixels. You’ll notice that the container has shifted down by 80 pixels. Now, add 70 pixels to the top padding. This adds an extra 70 pixels within the container, creating a 70-pixel space from the top for any content placed inside.
We’re all set to introduce the title for this section. To begin, access the widgets panel by clicking on the nine dots icon in the upper right corner of the editing panel. Within the Basic dropdown section, simply drag and drop the Heading widget into your container.
Title Styling
Now, head to the Content tab within the Heading editing panel to add the text for our header. For this section, let’s go with, “Let Flowers Express Your Sentiments.” Scrolling further down in the editing panel, you’ll find the Alignment option. Set the alignment to center for a polished look.
With the text placement perfected, let’s fine-tune the font settings. Navigate to the Style tab and modify the Text Color to black. For Typography, click on the pencil icon and select the Montserrat font family. Set the font size to 40 pixels, the Weight to 400 (Normal), and the Line-Height to 38 pixels.
Adding a Side-by-Side Container
Now, let’s proceed to create the adjacent container for this section. To do this, we’ll add a new “Direction Row” container. We’ve opted for the “Direction Row” layout because we intend to place two child containers side by side. If we wanted these child containers to be stacked on top of each other, we’d choose the “Direction Column” container.
Styling and Background Consistency
Let’s incorporate the “Direction Row” container. In the editing panel, navigate to the Layout tab and set the Content Width to 1200 to maintain consistency with the width used in other containers. Now, let’s ensure the background color matches the one used in the container above. In the Style tab, modify the background color to #FDF7F7. If you’ve utilized a different color, input the corresponding HEX color code here.
Adding Text and Image Containers
Our next step involves adding two child containers: one for the text and the other for an image. Head over to the Widget panel and drag a container element onto the canvas.
Click inside the newly added child container to expose the small grey editing handle in the top left corner. Right-click on this handle and select “Duplicate.” This action duplicates the child container.
Excellent! We’re making great progress.
Text and Subheading
Let’s now include a subheader and the main text for this section. In the Widget panel, select the Header widget and place it within the left-hand child container. Under the Content tab in the editing panel, insert your subheading. We’re using, “Supplying the best quality flowers locally” as an example, but you can use any text you prefer.
Text Styling
To refine the font settings, move to the Style tab. Here are the adjustments:
Now, let’s add the main text below the subheading. Return to the Widgets panel and bring in the Text Editor widget. Enter your text within the Layout tab of the editing panel.
More Text Styling
To modify the text style, navigate to the Style tab, and apply the following settings:
These adjustments will give your subheader and text a clean look.
Adding a Call-to-Action Button
We can now add a call-to-action button to this section without starting from scratch. All we need to do is duplicate the button from the hero section and adjust the styling slightly. Scroll back up to the hero section and click on the button. This action will bring up the editing pencil in the top right corner of the button area. Now, right-click on the pencil icon and select ‘Copy.’
Return to the section we were just working on by scrolling back down, and right-click at the bottom of the Text Editor widget section. Choose ‘Paste,’ which will insert a copy of the button we just copied. Now, let’s make some minor adjustments to this button.
Call-to-Action Button Styling
Access the button’s editing panel in the Content tab, and change the text to “See Selection.” Additionally, adjust the Size to ‘Medium.’ To remove the padding that we applied to the hero button earlier, navigate to the Advanced tab, and set all margin and padding values to zero.
These steps will efficiently add a call-to-action button to your section while maintaining consistency with your design.
Incorporating an Image
We’re now all set to incorporate an image into the right-hand child container. Head to the Widget panel and bring in the Image widget. Inside the Content tab of the editing panel, select an image. If you wish to use your own image, simply click ‘Upload files’ and upload your chosen file. Let’s continue and use this image here.
Image Styling
To give the image a more interesting shape, let’s round the bottom-left and top-right corners to create a pleasing effect. Click on the Style tab, then scroll down to ‘Border Radius.’ Delink all values to set them to zero. Now change the right and left values to 60 pixels.
Final Touch: Padding and Margins
To complete this section, let’s provide padding and margins around this container to give it some breathing space. Go to the top of the parent container and click on the small dots in the middle of the editing handle. This will open the editing panel for the container. Within the Advanced tab of the editing panel, set all margin and padding values to zero. Then set the bottom margin to 70 pixels, the top padding to 50 pixels, and the bottom padding to 80 pixels.
Looking Good!
We’ve now added space around the parent container, creating a visually pleasing layout.
In the final segment of this video tutorial, we’ll incorporate a text box with a statement from the company to provide some context.
Styling the Text Statement
Let’s begin by adding a ‘Direction Column’ container. In the editing panel’s Layout tab, adjust the width to 1200 pixels. Now, head over to the Advanced tab, and unlink all margin and padding values, resetting them to zero, and add 80 pixels to the bottom margin.
Company Statement
Now, in the Widget panel, add a Text Editor widget. Within the Content tab of the editing panel, let’s insert our company statement. To give the text a polished look, navigate to the Style tab and implement the following font settings:
Consistent Spacing
To maintain consistent spacing around the statement, let’s apply some padding to the Text Editor widget. Access the Advanced tab, and reset all margin and padding values to zero. Then set all padding values apart from the top padding to 5%.
Wrapping Up
We hope you found creating the ‘Learn More’ section for this landing page enjoyable. In our next tutorial, we’ll delve into the next step, creating the flower selection section.
Welcome back to our journey of creating a captivating landing page using Elementor. If you’ve been following along, you’ve already mastered the Hero and Learn More sections, and you should be feeling quite comfortable navigating the Elementor interface. Now, we’re ready to dive into the creation of the Flower section.
Designing the Flower Section
In this section, our goal is to take up 100% of the visitor’s above-the-fold screen. Here’s how to get started:
Jump back into Elementor, and just below the Learn More section, add a new ‘Direction Row’ container. In the editing panel, set the width to 1200 pixels and adjust the Min-Height to 100 vh. This ensures that the section occupies the entire above-the-fold screen. Also, set the alignment to center.
Next, we’re going to add a background image to the container. To do this, head over to the Style tab and select the classic background type.
Make sure to adjust the position to ‘Center Center’ and set the Attachment to ‘Fixed.’ This choice anchors the image in place, creating a visually engaging effect. Keep in mind that this effect works only on desktop devices.
Set ‘Repeat’ to ‘No-repeat’ and ‘Display Size’ to ‘Cover.’ Additionally, let’s use the same HEX color as we did in the Learn More section, which was #FDF7F7, and set the opacity to 0.75. These adjustments will give your section an eye-catching and appealing background.
Adding the Section Text
Now, it’s time to add text above the selection of flowers:
Open the widget panel and drag in the Text Editor widget. In the Content tab of the editing panel, add your desired text. For instance, we’ll use ‘Exquisite selection,’ but you’re free to customize it as needed.
To style the text, navigate to the Style tab. Set the alignment to center. Now, let’s work on the typography:
Adding the Header
The header in this section is crucial. Here’s how to create it:
Open the widget panel and add a Header widget. In the editing panel, insert your header text. We’ll use ‘Our Flowers’ and set the alignment to center.
Now, let’s style the header:
Introducing More Text
Before moving on to the flower selections, let’s add one more text widget:
In the Widget panel, drag in another Text Editor widget.
Add your text and make sure the alignment is set to center.
In the Style tab, you can customize the typography:
Creating the Flower Selections
To ensure the images of the flower selection are displayed side by side, not stacked on top of each other, you’ll need to incorporate a container with a ‘Row-horizontal’ direction. Here’s how to do it:
Open the widget panel and add a Container.
In the layout tab of the editing panel, set the direction to ‘Row-horizontal.’
Now, open the widget panel again and search for the Image Box widget. Drag this widget into the container you’ve just inserted.
To style the Image Box widget, head to the editing panel, and under the Image section, add the image you prefer. We’ll choose an image of red roses in a vase.
Add a title for the flower selection and a description with the price. We’ll use ‘From $30’ for the description.
In the Style tab, make the following adjustments for the Image Box widget:
You can also add a hover animation for an interactive effect. We’ll select ‘Shrink.’
Styling the Text in the Image Boxes
Now, let’s style the text in the Image Boxes:
In the Content drop-down section for the Image Box widget:
For the description (price in our case):
Duplicate for Variety
Now that we’ve styled one of the Image Boxes, you can duplicate it three more times and change the image and text for each one. Here’s how:
Click inside the Image Box widget to reveal the edit pencil icon in the top right. Right-click on the pencil icon and press ‘Duplicate.’
Repeat this process two more times. Now you’ll have four identical Image Boxes.
For each widget, select the widget to open the editing panel and change the image and text as desired.
Adding the Final Sections
Now it’s time to add the last two sections – a text widget and a call button:
Open the widget panel and drag in a Text Editor widget under the container with the image boxes.
Add in the text to encourage visitors to give the flower shop a call.
In the Styling tab, set the alignment to center, use the Montserrat font family, and set the font size to 18 pixels.
To add the call button, we are going to copy the button we created in the hero section. Scroll up to the hero section, right-click on the button, and copy. Come back to the flower section and paste the button under the text we just added.
Change the text in the button to ‘Give us a call.’ In the Link field, add the word ‘tel’ followed by a colon sign, then the telephone number. When clicked on a mobile device, it will call the number inserted in the Link field.
Preview Your Work
Congratulations on your progress! Save your work and hit the ‘Preview’ button to see what you’ve built so far. We’ve covered significant ground in building our landing page. To recap:
In our upcoming tutorial, we’ll focus on building the “Contact Us” section. This section will include a map pinpointing the flower shop’s location and convenient links to their social media platforms, providing an interactive and informative touchpoint for visitors. Stay tuned for the next exciting installment in your landing page creation journey!
Welcome to the concluding chapter of our comprehensive landing page tutorial. We’ve come a long way, and we’re excited to walk you through the final steps in creating an impressive and effective landing page. In this tutorial, we’ll tackle the ‘Contact Us’ section – a crucial component of any landing page. This section will contain essential information, including the company’s phone number, address, a location map, and links to its social media profiles. Without further ado, let’s return to our Elementor page and bring this important segment to life.
Creating the ‘Contact Us’ Section
Adding a New Container: To get started, add a new ‘Direction Column’ container. In the container’s editing panel under the Layout tab, make the width 900 pixels to maintain a more focused content area. Set the Min Height to 100 vh to ensure it takes up 100% of the screen above the fold. For center alignment, choose ‘Center’ under Justify Content, and for centered items, click on the second ‘Center’ icon.
Introducing the Header: Within this container, let’s begin by adding the header. Open the widget panel and drag in the Header widget. Add the text for the header in the editing panel. For this example, we’re using ‘Contact or Visit Us.’ Style the header by going to the Style tab and making the following changes:
Telephone Number: Below the header, let’s add the telephone number. Open the widget panel again and drag in the Text Editor widget. In the editing panel, add the telephone number. To style it, navigate to the Style tab and make these adjustments:
Address: To include the address, you can duplicate the Text Editor widget with the telephone number. Right-click on the editing pencil icon in the top corner of the Text Editor and press ‘Duplicate.’ Then, add the address and go to the Style tab to make the following changes:
If you feel the space between the telephone number and the address looks too big, you can adjust it. Click on the Text Editor widget and go to the Advanced tab in the editing panel. Delink all margins and padding values to set all values to zero, and change the bottom margin value to -30 pixels to close the spacing.
Adding the Map: It’s time to include a map of the fictitious flower shop’s address. Open the widget panel, look for the Google Maps widget, and drag it below the address. In the editing panel, add the address of the shop’s location and change the Zoom value to 20. To give it a unique look, round the corners of the map just like we did with the image in the ‘Learn More’ section above. Keep the Google Map widget selected, go to the Advanced tab, and scroll to the Border dropdown section. Make the following changes:
To add a shadow effect to the map, click on the Box Shadow pencil icon under Border Radius.
Social Media Icons: The final elements for this container are the social media icons. Open the widget panel and search for ‘Social.’ Drag in the ‘Social Icons’ widget. This widget comes pre-populated with three social media icons: Facebook, Twitter, and YouTube. To add more, click on the ‘Add Item’ button, then the ‘Icon Library’ link, and search for the icon of your choice. For our tutorial, we’re looking for Instagram.
Within each icon panel, you can add the URL to your social media page in the Link field. This allows visitors to click on an icon and be taken to your social media page. You have three different shapes you can apply to an icon: Rounded, Squared, and Circle. Let’s go with Circle. To customize the icon colors, go to the Style tab and make these changes:
Adding Spacing: To create space between the map and social media icons, go to the Advanced tab and set all margin and padding values to zero. Then, change the top margin to 50 pixels.
Final Steps and Links Integration
We’ve successfully built all the sections for our landing page, and the finishing touch is to integrate links into our call-to-action buttons. Here’s how to do it:
To link the hero call-to-action button to the ‘Learn More’ section, select the first container in the ‘Learn More’ section. In the Advanced tab within the editing panel, input ‘learnmore’ in the ‘CSS ID’ field.
Next, click on the hero call-to-action button and in the Link field, add ‘learnmore’ precisely as you applied it to the CSS ID in the ‘Learn More’ section.
Similarly, for the button in the ‘Learn More’ section, apply the process in the opposite direction. Click on the button and add ‘ourflowers’ in the Link field, ensuring that it matches the CSS ID you set in.