Magezon Page Builder Full Features
Discover all powerful features that help you quickly & easily build stunning pages
Drag & Drop Editor
Simply use drag & drop to move elements across the page. You can also drag and drop multiple elements on a page at once.
No need to switch back and forth between backend and frontend, you can build your page right on the frontend and see the changes in real-time.
The backend builder lives inside the Magento Dashboard, and it’s great for making quick and small changes while you’re inside the dashboard.
Add and edit the text in some elements, e.g. text block, heading, and button directly on the page and see the result instantly without opening the settings window.
Quickly access popular actions such as edit element, duplicate, copy/paste styles, and save to library with just one right-click.
- Every action you do, like edited, loaded, or deleted while building content, is saved into history with the time you did actions. So it’s easy for you to re-trace any action you want.
Switch content to 5 devices and tailor every section to make it look perfect on each device. Also, you can disable 1 or 2 devices if you don’t want to work with all of them.
Quickly preview your page on the frontend. The preview page will automatically update changes when you adjust anything in the backend editor, no need to save it. It is available for the backend builder only.
- With a simple mouse hover, you can see a toolbar action that shows the complete path of an element and some popular actions such as edit, delete, duplicate, etc.
It’s a product tour that guides users step-by-step on designing a page with the builder to help them understand how the extension works in detail.
Builder View Mode
Switch between different view modes to build your page, either interaction (hover, zoom in, zoom out) or responsive modes, then select the best one that suits your preference.
Builder Settings & Controls
Quickly access builder settings to customize your building experience, like customize a color theme, enable/disable builder interface animation, show/hide disabled elements at 50% opacity, etc.
Width & Height
Adjust the width and height of all elements. You can either drag width & height right on the page or modify them on the settings panel.
- Set full height for rows. The website builder will automatically determine the size of the user browser screen to alter it.
Make row layouts stretch out to the full width of the browser.
Padding & Margin
Modify the padding & margin for any element. Similar to adjusting width & height, you can use either the drag feature or settings window to modify them.
Drag to adjust the width, height, padding, and margin of elements, rows, or columns directly on the page without opening the settings panel.
- Zoom builder editor to full screen to focus on your working area only for easy management and viewing.
- Modify the gap size between columns from row settings. Choose between padding or margin for the gap type.
Equal Height Columns
- Set all columns in a row to have equal height, and position their content at the top, middle, or bottom.
Position content in the column to top, center, or bottom.
- Arrange any element in the front or back of other ones. Sections with higher values will sit atop sections with lower values.
- Delete a page layout with a single click. A pop-up will appear to confirm before deleting the entire layout.
- Click the hover icon to modify both elements content and design on hover. You can customize lots of things on hover, such as changing colors, effects, texts, width, height, and more.
Select your desired font from hundreds of Google fonts in every section that uses text.
Freely customize text size, letter spacing, line height and change fonts for all content that contains the text.
- Add inside or outset shadow for rows, columns, and elements with box-shadow options. No need to use the graphic design tool.
- Scroll effects occur when users are scrolling the mouse on a page. It supports six effect options: Vertical scroll, Horizontal scroll, Transparency, Blur, Rotate, and Scale.
- Create a stunning animation for the background of any element when users scroll through the page.
- Apply any animation style to rows, columns, and elements to attract visitors in exciting ways. Also, it’s able to customize animation type, speed, and direction.
- Move, scale, rotate or skew elements right on the page, like using graphic design tools without touching any line of code.
Stick elements to the top or bottom of the browser viewport when scrolling the page. Or you can set a sticky boundary for sticky elements, and they will no longer be sticky once out of the border.
- Freely move elements around the page through an intuitive visual interface. Choose element position’s type: Absolute, Fixed, or Relative.
- Add borders to any element using border options. You have complete control over customizing border size, color, and style.
Choose gradient colors for the background on any page. Both linear and radial gradients are supported.
- Add an image to the background and control its size and position.
- Create a slideshow and use it as a background of an element to make the page more lively.
Make your page stand out by adding video to the row and column’s background. It supports Youtube, Vimeo, and self-hosted videos.
Filters & Effects
- Enhance the appearance of any element with a full range of color filters & effects and blend modes.
Text Path Plugin
- Customize the text path to have an appealing design. You have full control over styling its color, shape, position, spacing, and direction.
Shape Divider Plugin
- Replace the original horizontal line between sections with an aesthetic separator. Freely customize your own dividers with various design options.
- Select your desired template from a wide range of stunning pre-designed templates.
- Export your templates or import them to any other site.
- Customize your own designs and save them as templates in the My Templates section for later use with one click.
- Build any layout for a page by adding rows and columns, then adding any content inside them.
- The Heading element allows you to create title headings with various styling options such as color, font size, font-weight, and even add a link to the heading.
- The text block uses the WYSIWYG editor that enables you to add and edit text, image, text background color, widget, etc.
The Button element helps you create and customize any eye-catching buttons as you imagine without the coding required.
- You can use the element to add single images from the Media Library or external links to make your site more stunning.
- The Slider element enables you to create animated sliders that work perfectly and are fully responsive.
- The Countdown element is great for adding countdowns to your page to indicate the time remaining before a special event occurs or ends.
The Toggle element lets you create collapsible text boxes so visitors can sift through the title instead of scrolling through a long page.
- Tabs element allows you to separate different content into responsive tabs, either horizontally or vertically.
- Several social elements let you embed social posts, images, icons, or comments on your website’s page.
- Add 9 default Magento 2 widgets to your website page or insert widgets for 3rd-party extensions.
- Quickly perform a specific action, e.g. edit an element, redo/undo, add a new section, open layer view, without opening a settings window with a range of helpful keyboard shortcuts.
Glance at the entire page structure in the Layers panel. You can explore your content inside the layers window and organize elements, rows, and columns within it.
- Quickly rename the admin label of any element in either layers panel or settings window of each element for easy content management.
- Quickly add another section such as columns and text blocks instead of opening the elements modal with just one click.
Go back and forth with any action when working with your content.
- Copy any element and paste it to other places on the page or to an entirely different page on your site.
- Copy the entire styling from a row, column, or element and paste it to another one with a click.
Duplicate any element with one click.
- Save tons of time by extending your desired style across the entire page or to a specific section, and you can change this style of multiple elements that use it at once.
Multiselect & Bulk Editing
- Select multiple elements, rows, or columns on a page at once and do a bulk edit of them simultaneously.
All element settings are searchable. You can type the option you’re looking for on the search bar of the setting window, and it will list you to it instantly.
- Settings can also be filtered. Applying these search filters: modified styles, responsive styles, and hover styles to find the most suited results.
Drag & Drop File Uploading
- You can directly upload multiple media files at once into your page using the drag & drop feature, and the builder will automatically transform them into elements.
- Magezon Page Builder will make your site responsive automatically on 5 devices.
Control the ordering of columns on mobile devices.
- Adjust any elements option as you want to make your page design look good on any screen.
Responsive Font Size
- Change the font size to work with each device.
View how the page looks on any breakpoint.
- You have full control over showing or hiding elements on any device.
Responsive Column Width
- Set different column layouts for each device by changing column width.
- Freely add custom CSS to rows, columns, and elements or the entire page.
Page Builder supports multiple languages and also offers RTL languages.
- You can flexibly customize your website to meet your expectations without depending on the provider’s offer.
- You can test different designs by A/B testing feature to have insight into each version and choose the best one.
Enter your code directly into your page using the Raw HTML element.
- Get everything you need to create your own addons for Page Builder.
- Restrict access to editor options to admin users and control which editor option is available for each admin user.
Transform any static element into a dynamic element that automatically updates itself when its connected content is edited. It includes website logo, customer information, featured image, etc.
- Save your desired element settings and reuse them on any page of your site.
- Choose the right fonts for your site, save them as global fonts and use them anywhere on your site for heading, text block, or any section that contains the text.
You’re able to upload your custom fonts from your computer to the Visual Page Builder.
- Determine primary colors for your site, save them, and apply them to any section on your site.
- Easily navigate visitors to a specific product page or category page, or connect with them via some apps.
Optimized for SEO
- Each line of code of all elements and layouts follows best SEO practices to help your site get a higher rank on Google SERP.
- The extension focuses more on speed and enhances it for better performance.
Magento Default Widgets
- You have 9 default Magento widgets in your list. Feel free to insert Magento’s contact form, newsletter form, or product list into the editor.
Compatibility with Magento Page Builder
Use either Magezon Builder or Magento Builder or 2 Builders together to configure CMS Page, CMS Block, Product & Category Descriptions.
Magezon Builder Extensions
- Magento 2 Visual Page Builder is fully compatible with all Magezon Builder extensions.
Other Magezon Extensions
Visual Page Builder is also fully compatible with other Magezon extensions named Lazy Load, Shop By Brand, and Blog.
- The extension works well with all Magento themes that respect the coding standard of Magento.
Support & Documentation
Support & Documentation
- Chat with us directly via the online support channel to quickly get help with either technical issues or pre-sale questions.
Besides Live Chat, you can contact us via Ticket or Email to get support at our working time.
- A comprehensive guide for each Magezon extension on how to use the extension step-by-step.
- Read our blog to get tips on E-commerce success and learn all about how to use Magezon extensions as well as Magento.
Watch our video tutorial series on our Magezon Youtube channel to know how to use our extensions in detail.