Your ecommerce web site ought to mean you can design and transfer content material rapidly with out writing code, all whereas remaining on-brand.
That flexibility allows you to delegate web site design and content material duties to nearly any staff member, serving to you sidestep developer delays or burnouts — so that you’ll ship initiatives sooner.
That is the answer drag-and-drop ecommerce web site builders present.
Only one factor, although. You might have distinctive enterprise wants.
So, your drag-and-drop builder ought to accommodate them. For instance, your no-code answer ought to be elastic, permitting numerous customizations, together with code embeds, when vital.
That is the place Magento 2 Web page Builder turns out to be useful.
This information helps you perceive the use instances and advantages of Magento 2 Web page Builder and exhibits you learn how to create a touchdown web page, storefront, product checklist, and content material web page.
Let’s dive in.
Advantages of utilizing Magento 2 Web page Builder
Enterprise customers love Magento 2 Web page Builder for a minimum of 5 causes.
- No coding expertise required: Magento 2 Web page Builder permits anybody to create top-class content material pages with out programming data.
- Consumer-friendly interface: The Magento 2 Web page Builder has a near-zero studying curve and intuitive interface design.
- Drag-and-drop and dwell preview: Drag and drop content material elements, layouts, and parts and preview them in real-time.
- Versatile content material administration: The Web page Builder extension helps all ecommerce web page design and content material creation wants.
- Helps developer customizations: Enterprise or superior customers can create customized options utilizing developer assist.
The perfect half? Getting began with Magento 2 Web page Builder is straightforward. Right here’s how.
Beginning with Magento 2 Web page Builder
Web page Builder is a Magento extension that empowers Adobe Commerce and Magento Open Supply customers to create design-rich content material pages utilizing pre-built controls.
These controls embrace intuitive drag-and-drop Web page Builders, dwell previews, wealthy media, type editors, and product catalogs.
Nonetheless, solely Magento Commerce customers can entry its enhanced options.
Let’s discover learn how to get began with this CMS web page builder.
Configure Magento 2 Web page Builder in 4 steps
Comply with these steps to arrange your Magento Web page Builder staging space in Adobe Commerce.
Step #1: Go to Shops > Settings > Configuration out of your Admin sidebar.
Step #2: Choose Content material Administration below basic.
Step #3: Set the Allow Web page Builder discipline to Sure in superior content material instruments.
Step #4: Save the configuration.
Setup your default layouts
Now, head to the Configuration space.
Beneath Basic, choose Net. Subsequent, develop the Default Layouts and select your product, class, and web page layouts.
Subsequent, save the configuration.
Now you’re able to get began and discover the numerous options Magento 2 Web page Builder has to supply.
Magento 2 Web page Builder options
Web page Builder has 5 options with a complete of over 20 sub-features.
Let’s discover what every element gives you.
Toolbox choices
You may management web page layouts, parts, and content material utilizing toolbox choices. For instance, these options allow you to transfer, add, cover, and take away elements out of your web page.
Hover within the Web page Builder’s content material containers to seek out these toolbox choices.
Take into account that these options are container particular. So the choices range from container to container. The picture beneath exhibits the toolbox choices for the Row format.
Layouts
Magento 2 Web page Builder gives you three layouts varieties:
Drag any of those content material varieties from the Web page Builder format to the stage in your panel. Then, click on the cog icon from the toolbox to entry settings and customise the format.
Components
Web page builder parts allow you to add written content material, pictures, calls to motion, and different content material functionalities to your pages.
Like anything, you’ll be able to drag-and-drop content material parts and customise them to your coronary heart’s content material.
Magento 2 Web page Builder has 5 parts. Let’s shed some mild on them.
- Textual content: This characteristic allows you to add textual content, pictures, hyperlinks, content material templates, and widgets to your content material.
- Headings: This characteristic allows you to add heading tags to ascertain topical move inside your content material for higher search engine optimization (SEO).
- Buttons: This characteristic allows you to add and customise your web page’s call-to-action or navigation buttons.
- Dividers: Dividers add visible breaks between content material sections.
- HTML Code: This characteristic means that you can embed JavaScript, HTML, and CSS code snippets to your web page.
Media
This drag-and-drop interface allows you to add wealthy media to your content material.
You may add these media varieties:
- Photos
- Video
- Banners
- Sliders
- Google Maps
Magento Web page Builder helps PNG, JPG, and GIF picture varieties, and you may hyperlink your picture to any content material, product, or class pages.
This similar thought applies to different media varieties — drag them to the stage after which use their toolbox choices so as to add the media you need your viewers to see.
Content material elements
Content material elements are helpful for including types, creating distinctive ecommerce experiences, and distributing content material throughout your web site.
Magento 2 Web page Builder has 4 content material varieties:
- CMS blocks
- Dynamic blocks
- Merchandise
- Product suggestions
Blocks are the essential page-building models of Magento 2 Web page Builder. You may embed blocks in blocks.
CMS blocks show static data like pictures and texts, whereas dynamic blocks show data out of your database utilizing widgets.
Product suggestion content material helps you serve really useful merchandise to consumers in your web page. However this characteristic is for Magento Commerce customers solely.
Now, let’s do some fast tutorials utilizing these options.
Magento 2 Web page Builder consumer guides
Earlier than constructing pages or creating content material in Web page Builder, enhance your admin session lifetime to keep away from session time-outs when you work.
Methods to create a web page
Provoke web page creation out of your Admin panel utilizing this path: Content material > Components > Pages.
Add a new web page from the higher proper nook of your display.
Set the Allow Web page slider to No to keep away from making dwell adjustments to your retailer. After which, give your web page a title.
Increase the design part, select a theme, or use the default Magento theme.
Save.
Subsequent, let’s add rows and columns to your web page.
Methods to add rows and columns to pages
Let’s begin with including rows.
Create a Row
Open the web page you want to edit within the Web page Builder stage.
Drag the Row format from the Format part to the web page. You may see a purple line between rows indicating the boundary. Add your new row there.
Customise this row utilizing its toolbox choices. Then, set the looks of the row.
Select a width look on your row.
After which save.
Create a Column
Divide that row into two equal components by dragging and dropping the column from the format choices into the Magento Web page Builder staging space.
Every column is a singular container with its toolbox choices. So, you’ve got full customization management of it.
Methods to add banners to a web page
Open the web page the place you wish to add a banner, then drag and drop a banner container within the Web page Builder backend.
Select a banner picture from the toolbox — add or gallery.
Select a banner look from the Toolbox Settings.
Scroll right down to the Background part to set the banner background picture.
Change and format the placeholder textual content within the WYSIWYG editor.
Return to settings so as to add a button colour, select fonts, after which go to the content material part so as to add a banner hyperlink.
So your banner frontend ought to find yourself wanting like this:
Wrap up your setup, save, and shut it.
Methods to add evaluation content material to a web page
Including evaluation content material is so simple as creating rows and columns and including new content material utilizing parts and media.
Let’s take a look at an instance.
Create a row and two columns. However drag the primary column’s proper border to the 4/12 place within the grid. This setting adjusts the second column to eight/12 mechanically.
Add your evaluation product picture to the primary column utilizing the picture element from the media part — see the picture beneath.
Then add your evaluation textual content to the opposite column utilizing Textual content from Components.
Add a five-star picture to the textual content field utilizing the native insert-image characteristic within the WYSIWYG editor.
After which add your evaluation textual content to the editor. You too can add hyperlinks to your evaluation textual content.
The ultimate output ought to seem like this.
Methods to add a product catalog to a web page
Open the web page the place you wish to add this catalog or create a devoted catalog web page within the Web page Builder editor.
Drag and drop the product element to the stage.
Set the circumstances and class within the product settings space.
Select the variety of merchandise to show and add a purchase button.
Configure the checkout space, write your product description, and add different web page parts to finish the catalog setup.
After which save.
Exit the CMS web page by clicking the white icon on the upper-right nook with two arrows pointing to one another.
After which, save and shut utilizing the dropdown menu on the admin web page.
Closing ideas: Launch your Magento 2 Web page Builder
Magento 2 Web page Builder is a versatile content material administration answer that may allow you to increase productiveness. So, no extra content material administration complications.
However a versatile CMS can solely take you to date. It’d assist in case you had an ecommerce internet hosting answer that is as much as snuff.
Enter Nexcess enterprise internet hosting. Nexcess handles your enterprise ecommerce internet hosting wants, together with Magento internet hosting. Strive it out at present.