What is Melios?
Melios — is a free and open-source Magento module that improves built-in Page Builder module. There are two editions of Melios Builder available: free Basic edition, and paid Pro edition. Each feature of Pro edition is marked with special badge across the site.
Requirements
- PHP >= 8.0
- Magento >= 2.4.3
- Magento Page Builder >= 1.7.3
Installation
composer require melios/page-builder &&\
bin/magento module:enable Melios_PageBuilder --clear-static-contentcomposer config http-basic.meliosbuilder.com &&\
composer config repositories.melios composer https://meliosbuilder.com/api/packages.json &&\
composer require melios/page-builder-pro &&\
bin/magento module:enable Melios_PageBuilder Melios_PageBuilderPro --clear-static-contentWe allow the same license key to be used across unlimited development and staging Magento domains. Use your live domain name for all of them. However, you must purchase and use different license keys per each live Magento installation.
Spotlight popup
With Melios you get a better way to insert content elements — press / hotkey, find the element you need, and paste it in a single click using the mouse or keyboard.
When using keyboard to insert new content from the Spotlight popup, Melios will automatically switch drop location to the recently added element. This approach allows prototyping page layout blazingly fast!
Hotkeys
- Alt+0 — open PageBuilder.
- / — open Spotlight to insert new content.
- Enter or mouse Double Click — edit hovered element.
- Delete or Backspace — delete hovered element.
- Ctrl+Shift+M — switch between Desktop and Mobile views.
Image upload
Melios adds ability to upload modern image formats: webp and avif.
Since this feature can't affect Page Builder module only, you also get modern images support for any other admin page that uses Media Gallery component. For example:
- Product image upload.
- Category image upload.
- Third-party modules that use Media Gallery.
Copy-paste
Melios builder uses buffer from your operation system for copy, cut, and paste oparations. This allows working with different page builder instances and different tabs of your browser.
Please note, that copy-pasting the entire page is available in both versions while copy-pasting hovered elements is limited to the pro version only.
- Ctrl+C — copy hovered element into the clipboard.
- Ctrl+X — cut hovered element into the clipboard.
- Ctrl+V — paste copied element at the bottom or after the hovered element.
- Ctrl+Shift+V — paste copied element at the top or before the hovered element.
Quick save
Columns
Image
Melios adds an ability to set the image dimensions, and loading mode. Loading mode includes image lazy load, preload, and fetchpriority attribute — must have features for modern website.
Here is a guide on how to choose proper loading mode:
- Lazy — use for all images that are not visible on initial page load.
- Preload — use for image that creates LCP to reduce it and improve pagespeed score. We recommend having up to 3-4 preloaded images per page. A larger number will negate the possible boost.
- Default, fetchpriority="low" — use for images that close enough to the visible viewport and browser loads them despite of having the lazy attribute.
Background
We bet you want background-image to have the same loading mode control as the image has. We've done a good job on this, and you can set the background image as lazy, or you can preload it to improve the LCP score!
Here is a guide on how to choose proper loading mode:
- Lazy — use for all background-images that are not visible on initial page load.
- Preload — use for background-image that creates LCP to reduce it and improve pagespeed score. We recommend having up to 3-4 preloaded images per page. A larger number will negate the possible boost.
- Default — use for background-images that close enough to the visible viewport.
WYSIWYG editor
