Make money with Oziconnect referral program

E-commerce websites need to be able to design and move content quickly without writing codewhile maintaining the brand.

This flexibility allows you to delegate website design and content tasks to almost any team member, avoiding developer delays and burnout and delivering projects faster.

This is the solution that a drag-and-drop e-commerce website builder provides.

Just one thing.you have Company-specific needs.

Therefore, drag-and-drop builders must accommodate them. for example, No-code solution It should be flexible and allow for various customizations, including embedding code, if needed.

That’s where Magento 2 Page Builder comes in handy.

This guide will help you understand the use cases and benefits of Magento 2 Page Builder and show you how to create landing pages, storefronts, product listings, and content pages.

Let’s dive in.

Benefits of using Magento 2 Page Builder

There are at least five reasons why enterprise users love Magento 2 Page Builder.

  • No coding skills required: Magento 2 Page Builder allows anyone to create top-class content pages without any programming knowledge.
  • User friendly interface: Magento 2 Page Builder has an almost zero learning curve and an intuitive interface design.
  • Drag and drop and live preview: Drag and drop content components, layouts, and elements and preview them in real time.
  • Flexible content management: Page Builder extension supports all your eCommerce page design and content creation needs.
  • Supports developer customization: Enterprise or advanced users can create custom functionality Use developer help.

The best part? Getting started with Magento 2 Page Builder is easy. Here’s how:

Start with Magento 2 Page Builder

Page Builder is a Magento extension that allows Adobe Commerce and Magento open source users to create design-rich content pages using pre-built controls.

These controls include an intuitive drag-and-drop page builder, live preview, rich media, form editor, and product catalog.

However, only Magento Commerce users can access that extension.

Let’s see how to get started with this CMS page builder.

Configure Magento 2 Page Builder in 4 Steps

Follow these steps to set up a Magento Page Builder staging area in Adobe Commerce.

step 1: go to store > Settings > Configuration From the admin sidebar.

Step 2: select Content Management Under General.

Step 3: set Enable page builder from the field yes With advanced content tools.

Step 4: Save your settings.

Set default layout

Next, go to the Configuration area.

under generalselect web. next, default layout Select your product, category, and page layout.

Then save your settings.

Now you’re ready to get started and explore the many features that Magento 2 Page Builder has to offer.

Magento 2 page builder features

Page Builder has 5 features with a total of over 20 sub-features.

Let’s take a look at what each component offers.

Toolbox options

You can control page layout, elements, and content using toolbox options. For example, these features allow you to move, add, hide, and remove components from your page.

These toolbox options appear when you hover over the Page Builder content container.

Note that these features are container-specific. Therefore, options vary from container to container. The image below shows the toolbox options for row layout.

layout

Magento 2 Page Builder offers three layout types:

Drag one of these content types from the Page Builder layout to the panel’s stage. Then click the gear icon in the toolbox to access settings and customize the layout.

element

Page builder elements allow you to add written content, images, calls to action, and other content features to your pages.

Just like anything else, you can drag and drop content elements to customize it to your heart’s content.

Magento 2 Page Builder has five elements. Let’s shed some light on them.

  • sentence: This feature allows text, images, links, content templatecontent widgets, etc.
  • heading: This feature allows you to add heading tags to establish topical flow within your content and improve SEO (Search Engine Optimization).
  • button: This feature allows you to add and customize call-to-action or navigation buttons on your page.
  • divider: Divider lines add visual separation between content sections.
  • HTML code: This feature allows you to embed JavaScript, HTML, and CSS code snippets into your pages.

media

This drag-and-drop interface lets you add rich media to your content.

You can add the following media types:

  • image
  • video
  • banner
  • slider
  • google map

Magento Page Builder supports PNG, JPG, and GIF image types, allowing you to link images to any content, product, or category page.

This same idea applies to other media types as well. Drag media types onto the stage and use the toolbox options to add the media you want your audience to see.

content component

Content components are useful for adding forms, creating unique e-commerce experiences, and distributing content throughout your website.

Magento 2 Page Builder has four content types.

  • CMS block
  • dynamic block
  • product
  • Product recommendations

Blocks are the basic page building unit in Magento 2 Page Builder. You can embed blocks within blocks.

CMS block While displaying static information such as images and text, dynamic block Use widgets to display information from your database.

Helpful product recommendation content Provide recommended products To the buyers of your page. However, this feature is only for his Magento Commerce users.

Now let’s run a quick tutorial using these features.

Magento 2 Page Builder User Guide

Before you start building pages and creating content with Page Builder, Admin session lifetime To avoid session timeouts during work.

How to create a page

Start creating your page from the admin panel using the following path: Content > Elements > Pages.

addition new page From the top right corner of the screen.

set Activate the page from slider no This is to avoid making live changes to the store. Next, give your page a title.

Expand the design section and select a theme or use the default Magento theme.

keep.

Next, let’s add rows and columns to the page.

How to add rows and columns to a page

Let’s start by adding a row.

create a row

Open the page you want to edit in the page builder stage.

Drag the Rows layout from the Layouts section onto your page. A red border appears between the rows. Add a new line there.

Customize this line using toolbox options. Next, set the appearance of the row.

Select the appearance of the row width.

after that keep.

create columns

Drag and drop columns from the layout options into the Magento Page Builder staging area to split the row into two equal parts.

Each column is a unique container with toolbox options. Therefore, you have complete customization control.

How to add a banner to a page

Open the page where you want to add a banner and drag and drop the banner container onto the page builder backend.

Select a banner image from the toolbox – upload or gallery.

Choose the appearance of your banner from: Toolbox settings.

Scroll down and background Section to set the banner background image.

Change and format the placeholder text. WYSIWYG editor.

Go back to settings and add a button color, choose a font, and go to the content section to add a banner link.

So the banner frontend looks like this:

Finish setup, save and close.

How to add review content to a page

Adding review content is as easy as creating rows and columns and adding new content using elements and media.

Let’s look at an example.

Create one row and two columns. However, drag the right border of the first column to the 4/12 position of the grid. This setting automatically adjusts the second column to 8/12.

Add review product images to the first column using image components from media Section — See image below.

Then add the review text to the other columns using: sentence from element.

Add 5-star images to text boxes using the WYSIWYG editor’s native image insertion functionality.

Next, add your review text to the editor. You can also add links to your review text.

The final output will look like this:

How to add a product catalog to a page

Open the page to add this catalog or Dedicated catalog page In the page builder editor.

Drag and drop. product Send the component to the stage.

Set conditions and categories in the product setting area.

Select the number of products to display and add purchase buttons.

Complete your catalog setup by configuring the checkout area, writing product descriptions, and adding other page elements.

and save.

Exit the CMS page by clicking the white icon with two arrows pointing toward each other in the top right corner.

Then use the dropdown menu on the admin page to save and close.

Final thoughts: Launch Magento 2 Page Builder

Magento 2 Page Builder is a flexible content management solution that helps increase your productivity. So you no longer have to worry about content management.

But a flexible CMS can only go so far.It would be helpful if you had it ecommerce hosting solutions That is until you smell it.

Enter the required enterprise hosting. Nexcess addresses your enterprise e-commerce hosting needs, including: Magento hosting. Try it today.

Make money with Oziconnect referral program
Make money with Oziconnect referral program
Make money with Oziconnect referral program
Make money with Oziconnect referral program
84512

About Us

We are a leading IT agency in Lagos, Nigeria, providing IT consulting and custom software development services. We offer a wide range of IT solutions across software development, web and mobile application development, blockchain development services, digital marketing, and branding.

Contact Us

25B Lagos-Abekouta Expressway Lagos

info@ozitechgroup.com

Phone: (234) 907 155 5545

@2023 OzitechGroup – All Right Reserved.