Tuesday , May 21 2024
Home > Magento Tips & News > Magento 2 Tutorials > Content > How to Create a Landing Page in Magento 2 (Detailed Guide)

How to Create a Landing Page in Magento 2 (Detailed Guide)

create a magento 2 landing page using magento 2 page builder
How to create a landing page in Magento using Magento 2 Page Builder

Magento has a robust functionality called Page Builder. The Commerce Edition (Version 2.3.1) has featured this functionality since 2018.  Meanwhile, until August 2021, Page Builder has been available in Magento Open Source (Version 2.4.3). 

With Page Builder, Magento store owners can generally build simple pages with a user-friendly drag-and-drop editor, which is a perfect replacement for the traditional WYSIWYG editor. Users who have the slightest idea about codes can create their web pages on their own. Moreover, Page Builder helps users maximize their efficiency in designing their web pages.

Here are the desirable features Magento 2 Page Builder owns.

  • Design custom page using sets of advanced content tools
  • Set full-page layouts for CMS pages, products, and categories
  • Automatically update every change from the backend in the real-time
  • Easily change the position of content types using a user-friendly drag-and-drop editor

Try FREE Magezon Page Builder!

Easily create beautiful, engaging Magento websites in any style whenever you want without relying on developers or designers. Just by drag & drop.

I will walk you through step by step how to create a simple Magento 2 landing page using Page Builder, particularly a sales landing page. First and foremost, I want to show you the landing page I have built, along with the fundamentals of an ideal landing page.

magento 2 real landing page structures
Magento 2 landing page using Magento 2.4 Page Builder

My advice is you should first refer to A Beginner’s Guide to Website Landing Page to learn the basics of a landing page. Then, you can move ahead.

Configure before you start

First, make sure the Admin Session Lifetime is long enough so that you won’t be interrupted from creating a Magento 2 landing page by the session timing out.

  • On the Admin sidebar, go to Stores → Configuration.
  • In the left panel, scroll down to Advanced. Then, select Admin.
magento 2 page builder landing page admin session lifetime - magento create landing page
  • You will be landing on the page where to configure the Admin Session Timeout. By default, the number entered is 3153600, equivalent to one year.
magento 2 page builder landing page admin session lifetime security

Second, ensure that you have already:

  • Enable WYSIWYG Editor in the WYSIWYG Option configuration.
  • Enable Page Builder in the Advanced Content Tools configuration

To configure these two options above: 

magento 2 page builder landing page configure management

Create Magento 2 Landing Page Using Magento 2 Page Builder

1. Warm-up

Step 1: Log into your Magento admin. Next, you will be landing on the admin workspace.  

magento 2 landing page admin workspace

Step 2: From the admin sidebar, navigate to Content → Element → Pages

magento 2 landing page admin content tab

Step 3: To create a new page, click the Add New Page button.

magento 2 landing page admin add new page

Step 4: You will be redirected to the creation page. In this step, you need to:

  • The page is yet to be unfinished, so we have not published this Magento 2 landing page—Toggle Enable Page to No
  • Enter the name of the page. In this case, we enter “Page Builder landing page” in the Page Title field. 
  • After you click Save, the name of the creation page is named after the page title.
magento 2 create landing page  - page title

Step 5: Scroll down to the Design section and expand it. There are five standard layout options. Additionally, Page Builder offers full-width layouts for pages, products, and categories. By default, the layout is set to Page – Full Width which allows us to extend the entire width of the browser screen. In this case, I keep the Layout setting unchanged.

magento 2 create landing page layout page full width

Step 6: Select the theme for the current page if necessary. Besides, you can set a valid time for the chosen theme. Beyond this period, the page will appear with the initial theme. 

landing page magento 2 layout page new layout

Step 7: In the upper-right corner of the workspace, hit Save

Try FREE Magezon Page Builder!

Easily create beautiful, engaging Magento websites in any style whenever you want without relying on developers or designers. Just by drag & drop.

2. Get to the Point

Scroll down to the Content section, then expand it. You can see:

  • Content Heading: By default, its format is a heading level 1 (H1), depending on the theme. This is how it looks on the front:
page builder landing page content heading
  • Page Builder preview with an empty row

To start using Magento 2 Page Builder, you can click on Edit with Page Builder like below. Or, click on the Page Builder preview space, surrounded by the light blue background.

magento 2 landing page edit with page builder

We are landing on the Magento Page Builder workspace. There are two main sections to work with. 

magento 2 create landing page - elements

The left panel includes content tools that you will use while creating the page.

  • Layout (Row, Column, Tabs)
  • Elements (Text, Heading, Buttons, Divider, HTML code)
  • Media (Image, Video, Banner, Slider, Map)
  • Content (Block, Product) 

The right empty area is where you perform actions.

Next, I will instruct you on each part as below. 

page builder landing page step
Magento 2 Page Builder Tutorial: How to create a landing page in Magento

Part 1 

magento 2 real landing page part 1
Magento 2 Page Builder Tutorial: How to create a landing page in Magento

Step 1: Drag the Row content type from the left panel and drop it to the right workspace until the red guideline appears. Note that you can use Column or Tabs content type instead of Row.

page builder landing page part 1 drag row

Step 2: To make the toolbox appear, hover over the row. Then, select the row setting (Gear icon). 

page builder landing page part 1 row toolbox

Step 3: A popup containing all setting options for a row appears. 

page builder landing page part 1 edit row popup

Step 4: I want this row and its content to extend to the entire width of the browser window, so under the Appearance, I choose Full-Bleed

Magento landing page - part 1 - fulll breed row

Click Save to save the setting. 

Step 5: I will add the Banner content type to the row. In the left panel, expand Media. Then, drag the Banner and drop it to the right workspace. 

magento 2 real landing page part 1 banner

Step 6: Hover the Banner container to show its toolbox.

magento 2 real landing page part 1 banner toolbox

Step 7: Click the Setting icon, and we will be redirected to the popup of the banner’s settings. 

magento 2 real landing page part 1 banner popup 1

Step 8: Under Appearance, choose Collage Center. This option aligns the content to the middle of the banner. The content here includes Headline, Subheadline, and a CTA button.

magento 2 real landing page part 1 banner collage center

Step 9: By default, the Minimum Height is set to 300px. I will change it to 1200px so that the row can show the whole hero image prepared in advance.

magento 2 landing page - minimum height
  • When the minimum height is set to 300px:
magento 2 real landing page part 1 banner minimum height set 300
  • When the minimum height is set to 1200px:
magento 2 real landing page part 1 banner minimum height set 1200px
Magento create landing page using Magento 2 Page Builder
magento 2 real landing page part 1 banner hero image

Step 10: Scroll down to the Content section. At the Message Text, enter the following text with two lines:

Create Landing Pages With Page Builder

Build your beautiful website effortlessly with the help of an intuitive drag-and-drop editor. No coding required.”

Select the first line of text:

  • Choose Heading 2 under Formats
  • Increase the font size to 36px
  • Make the text bold
  • Change the text color to White

Select the second line of text:

  • Choose Paragraph under Formats
  • Set the font size to 16px
  • Set the line height to 28px
  • Change the text color to White
magento 2 real landing page part 1 banner text
magento 2 real landing page part 1 banner text

Step 11: Continue with the Content section. Now we will customize some settings for the button.

magento 2 real landing page part 1 banner button
Magento 2 real landing page part 1 banner button
  • In the Link field, choose Page. Then select the page to which users will be directed when clicking the button. Choose the page named “Page Builder Landing Page” in this case.

Below the field is a checkbox that enables the page to open in a new tab if you tick it. We suggest you tick this checkbox to enhance the user experience on your page.

magento 2 real landing page part 1 banner button link
  • In the Show Button field, choose Always to let the button display on the banner.
  • In the Button Text field, enter “Get Started”. Keep the old setting of Button Type.
magento 2 real landing page part 1 banner button button text
magento 2 real landing page part 1 banner button text

Step 12: Scroll down to the Advanced section and expand it. In the Margin and Padding field, set the top padding to 30px to create a “breathing room” between the top of the banner and the content inside it. 

magento 2 real landing page part 1 banner button content padding
content padding

On the front, it looks like this:

magento 2 real landing page part 1 banner button content padding  on the frontend

After finishing, click Save in the right corner. Now, let’s check how it looks on the front end. 

magento 2 real landing page part 1 banner button content padding 2 1
Magento create a landing page using Magento 2 Page Builder

It looks pretty good, right? It may be better if Page Builder enables changing the button color. If you know some CSS, you can customize its button how you want. Read the blog about Magento Page Builder HTML Codes to know how.

Part 2 

drag and drop page builder open source & commerce - part 2
Magento 2 Page Builder Tutorial: How to create a landing page in Magento

Step 1: Add a row right below. 

Step 2: Drag the Text content type and drop it in the row til the red guideline appears. 

Step 3: The editor toolbar appears above the text box. You can enter and format directly from the stage as in the image below (Inline editing). Or, choose Settings in the banner toolbox as chose I guided in the last part. 

I choose the former way. Follow the steps below:

  • Under Formats, select Heading 2
  • Center the text with center alignment
magento 2 real landing page part 2 title

Step 4: Add Divider right below the text. Click its setting icon to configure some settings of Divider. Here are the following settings we implemented:

  • Set Line Color to #535353
  • Increase Line Thickness to 2px
  • Decrease Line Width to 10%
magento 2 real landing page part 2 divider line
  • Under Advanced, align the line to the middle. And set the bottom margin to 30px.
magento 2 real landing page part 2 divider advanced
  • After completing, click Save.

Try FREE Magezon Page Builder!

Easily create beautiful, engaging Magento websites in any style whenever you want without relying on developers or designers. Just by drag & drop.

Step 5: We will create three columns in a separate row. Drag the Row and drop it right below the divider. Then, add a Column placeholder to the row. 

Note that the grid of a row comprises 12 equal sections by default. So, if you want three equal columns, each column has four equal sections. 

To help you understand better, I will outline the main steps. First, I add the content to the first column and customize it until it looks best. Next, to save time designing, I duplicate this column into 2 copies and then adjust it to having three equal columns. Last, I change the content inside of each duplicate column.

Add Text element to the column:

add text element
  • Insert the image by clicking the image icon in the text editor. 
Insert the image in the text editor
  • Add the lines of text and format them as below:

“Saves Time & Money” (Font size: 18px, Bold).

“No more wasting money and time on hiring developers. No need to write code. Simply use a visual drag and drop editor to shape your site.” (Font size: 14px, line height: 28px)”

Add text in the text editor
  • Align the entire content to the center. 
Center text in the text editor
  • It’s time to duplicate the column to two more and later adjust their width in equal measure.
Duplicate the columns with content inside
  • Next, you only need to modify the content inside each duplicate column:
modify the content inside

Part 3

drag drop website builder open source & commerce - what people say
Magento 2 Page Builder Tutorial: How to create a landing page in Magento

Step 1: Add Row

  • Under Appearance, we choose Full Width which enables the row/the row’s background color /the row’s background image to take up the entire width of the browser window while its content inside is limited in a container. 
magento 2 real landing page part 3 what people say appearance
  • Under Background, set Background Color to #f0f1f2.
magento 2 real landing page part 3 what people say appearance background color
  • Under Advanced, set the top margin to 100px to create a space between this row and above. 
magento 2 real landing page part 3 what people say appearance advanced margins and padding

Step 2: Add a Column to the row. 

magento 2 real landing page part 3 what people say appearance 2 columns
  • For the first column, add an Image from Media. Then, upload the image by clicking the Upload Image button.
magento 2 real landing page part 3 what people say appearance 2 add image
magento 2 real landing page part 3 what people say appearance 2 add image finished
  • For the second column, add a Text element. 

Add some pieces of content with the formats below:

  • “Awesome Page Builder” (Font Size – 18px, Bold)
  • Image Five-Rating Star (Upload the image + add “5-star rating” as the image description + adjust the image height to 10px)
magento 2 real landing page part 3 what people say appearance 2 add 5 rating star
  • “I searched many times about page builders and bought from other companies, but unfortunately, bad support and errors in the extension caused me to double-check the extension and now everything is OK.” (Font Size – 14px, Line height – 28px)
  • “Janice Nguyen, CEO of Beauty 10/26/20” (Font size – 14px, Line height – 28px, Italic) 

Do the same with the following text block. Here is what the backend result should be:

magento 2 real landing page part 3 what people say appearance 2 result in the backend whole

Now I want to increase the height of these two columns to make them look spacious. 

Head back to their settings. Set Minimum Height to 650px for both columns. Also, to center the child blocks of this container vertically, set Vertical Alignment to Center

magento 2 real landing page part 3 what people say appearance 2 adjust minimum height

And the final result in the backend:

magento 2 real landing page part 3 what people say in the backend

Part 4

magento 2 real landing page part 4-drag and drop site builder open source & commerce
Magento 2 Page Builder Tutorial: How to create a landing page in Magento

Step 1: You can add the row and its content from scratch. I will duplicate the first row in Part 2, drag and drop it right below, and change the text. Here is the result.

add the row and its content

Step 2: Continue to duplicate row 2 of Part 2 (Three columns in a row). Then, drag and drop it right below the title.

duplicate row 2 of Part 2

Step 3: Modify the content inside each column.

  • Upload the image 
  • Add and format the text inside: 
  • Title: Font size: 18px, Bold
  • Paragraph: Font size – 14px, Line height – 14px
  • Align the entire content to the center

Do the same with the other two columns.

Step 4: Set 20px to the right margin of the first column. Also, enter 20px in the left margin of the third column. As a result, there are more spaces between these three columns.

Now that we’ve created a landing page with Magento 2 Page Builder. Check the page once again to make sure it looks best. 

Magento 2 Page Builder Tutorial: How to create landing page in Magento
Magento 2 Page Builder Tutorial: How to create a landing page in Magento

It can’t be denied that Magento Page Builder is a big innovation for merchants who are running their stores in the Magento Open Source. However, to be honest, merchants could only build very simple Magento 2 landing pages using basic options such as Text, Images, Video, Slider, Links, etc. So, how can they create a fully-functional website with eye-catching effects? There are several answers to this question. For example, they can learn CSS to customize the page or ask for help from an external Magento old hand. However, these methods cost online merchants quite a lot of time and effort to complete a single page. 

If you want much more than a simple page without spending too much time building pages or asking for others’ help, you can consider Magento 2 Page Builder from Magezon. This Page Builder empowers you to create web pages in a much easier and more effective way using its drag-and-drop editor. As a result, even an average Jane or Joe who has little experience with coding can have all control over how their sites work and look. Besides, this real game-changer saves enormous time in building an eye-catching Magento 2 landing page and helps merchants enjoy the whole creation process.

GREAT NEWS:
To meet the increasing demand for a superior Page Builder, we have been developing a completely new version of Page Builders. Not simply providing enhancements or bug fixes, our team has rebuilt Page Builder using a new language – React Javascript. In this new version, Page Builder will cover many advanced features relating to Builder, Design Options, and Workflow, aiming at helping merchants maximize efficiency in creating their Magento 2 landing pages in particular and their websites in general. Follow the Page Builder Sneak Peek to keep yourself updated with the latest information about this product.

In 2022, the new version of Magezon Page Builder is expected to be released, promising to take your website and your sales to the next level. So be patient and wait for the superior product. 

It’s Time to Create Your Own

Hopefully, this article in Magento 2 Page Builder tutorial series helps you create an eye-catching Magento 2 landing page using Magento 2 Page Builder. Once you’ve finished your page, don’t forget to share it with us. We’re looking forward to your design. Also, if you have any difficulty creating your page, feel free to reach us.

Try FREE Magezon Page Builder!

Easily create beautiful, engaging Magento websites in any style whenever you want without relying on developers or designers. Just by drag & drop.

About Nga Dong

Nga Dong
A content writer and marketer in Magezon

Check Also

How to Create a Halloween Landing Page in Magento

It’s Halloween today. We’re gonna show you how to create a Halloween landing page using …

Leave a Reply