Magezon Page Builder Full Features
Discover all powerful features that help you quickly & easily build stunning pages
Builder Interface
Builder Interface
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.
Frontend Builder
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.
Backend Builder
The backend builder lives inside the Magento Dashboard, and it’s great for making quick and small changes while you’re inside the dashboard.
Inline Editing
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.
Right-Click Controls
Quickly access popular actions such as edit element, duplicate, copy/paste styles, and save to library with just one right-click.
History
- 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.
Responsive Editing
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.
Preview Changes
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.
Element Path
- 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.
Builder Walkthrough
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.
Layout
Layout
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.
Full Height
- Set full height for rows. The website builder will automatically determine the size of the user browser screen to alter it.
Full Width
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.
Draggable Sizing
Drag to adjust the width, height, padding, and margin of elements, rows, or columns directly on the page without opening the settings panel.
Full Screen
- Zoom builder editor to full screen to focus on your working area only for easy management and viewing.
Column Gap
- 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.
Content Position
Position content in the column to top, center, or bottom.
Z-Index
- Arrange any element in the front or back of other ones. Sections with higher values will sit atop sections with lower values.
Clear Layout
- Delete a page layout with a single click. A pop-up will appear to confirm before deleting the entire layout.
Design Options
Design Options
Hover State
- 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.
Google Fonts
Select your desired font from hundreds of Google fonts in every section that uses text.
Text Styling
Freely customize text size, letter spacing, line height and change fonts for all content that contains the text.
Box Shadow
- Add inside or outset shadow for rows, columns, and elements with box-shadow options. No need to use the graphic design tool.
Scroll Effects
- 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.
Parallax Effect
- Create a stunning animation for the background of any element when users scroll through the page.
Animations
- 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.
Transform
- Move, scale, rotate or skew elements right on the page, like using graphic design tools without touching any line of code.
Sticky Options
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.
Position Options
- Freely move elements around the page through an intuitive visual interface. Choose element position’s type: Absolute, Fixed, or Relative.
Border Options
- Add borders to any element using border options. You have complete control over customizing border size, color, and style.
Gradient Background
Choose gradient colors for the background on any page. Both linear and radial gradients are supported.
Image Background
- Add an image to the background and control its size and position.
Slideshow Background
- Create a slideshow and use it as a background of an element to make the page more lively.
Video Background
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.
Templates
Templates
Pre-designed Templates
- Select your desired template from a wide range of stunning pre-designed templates.
Import/Export Templates
- Export your templates or import them to any other site.
My Templates
- Customize your own designs and save them as templates in the My Templates section for later use with one click.
50+ Elements
50 Elements
Row
- Build any layout for a page by adding rows and columns, then adding any content inside them.
Heading
- 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.
Text Block
- The text block uses the WYSIWYG editor that enables you to add and edit text, image, text background color, widget, etc.
Button
The Button element helps you create and customize any eye-catching buttons as you imagine without the coding required.
Single Image
- You can use the element to add single images from the Media Library or external links to make your site more stunning.
Slider
- The Slider element enables you to create animated sliders that work perfectly and are fully responsive.
Countdown
- The Countdown element is great for adding countdowns to your page to indicate the time remaining before a special event occurs or ends.
Toggle
The Toggle element lets you create collapsible text boxes so visitors can sift through the title instead of scrolling through a long page.
Tabs
- Tabs element allows you to separate different content into responsive tabs, either horizontally or vertically.
Social Media
- Several social elements let you embed social posts, images, icons, or comments on your website’s page.
Magento Widget
- Add 9 default Magento 2 widgets to your website page or insert widgets for 3rd-party extensions.
Efficient Workflow
Efficient Workflow
Keyboard Shortcuts
- 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.
Layers
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.
Rename Elements
- Quickly rename the admin label of any element in either layers panel or settings window of each element for easy content management.
Helper
- Quickly add another section such as columns and text blocks instead of opening the elements modal with just one click.
Redo/Undo
Go back and forth with any action when working with your content.
Copy/Paste
- Copy any element and paste it to other places on the page or to an entirely different page on your site.
Copy/Paste Styles
- Copy the entire styling from a row, column, or element and paste it to another one with a click.
Duplicate
Duplicate any element with one click.
Extendable Styles
- 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.
Searchable Settings
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.
Filterable Settings
- 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.
Responsiveness
Responsiveness
100% Responsive
- Magezon Page Builder will make your site responsive automatically on 5 devices.
Reverse Columns
Control the ordering of columns on mobile devices.
Responsive Design
- 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.
Custom Breakpoints
View how the page looks on any breakpoint.
Hide/Show Elements
- 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.
Advanced Features
Advanced Features
Custom CSS
- Freely add custom CSS to rows, columns, and elements or the entire page.
RTL
Page Builder supports multiple languages and also offers RTL languages.
100% Open-Source
- You can flexibly customize your website to meet your expectations without depending on the provider’s offer.
A/B Testing
- You can test different designs by A/B testing feature to have insight into each version and choose the best one.
Raw HTML
Enter your code directly into your page using the Raw HTML element.
Developer API
- Get everything you need to create your own addons for Page Builder.
Role Manager
- Restrict access to editor options to admin users and control which editor option is available for each admin user.
Dynamic Content
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.
Global Elements
- Save your desired element settings and reuse them on any page of your site.
Global Fonts
- 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.
Custom Fonts
You’re able to upload your custom fonts from your computer to the Visual Page Builder.
Global Colors
- Determine primary colors for your site, save them, and apply them to any section on your site.
Action Links
- Easily navigate visitors to a specific product page or category page, or connect with them via some apps.
SEO
SEO
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.
Performance
Performance
Speed Optimization
- The extension focuses more on speed and enhances it for better performance.
Magento
Magento
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.
Integration
Integration
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.
Magento Themes
- The extension works well with all Magento themes that respect the coding standard of Magento.