Documentation

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!

All of the Tailwind CSS utilities are now available to use in Magento Page Builder. Just add the css class you need, or copy whole tailwind-based designs and they'll just works!

To get started with Tailwind CSS, open the terminal and run the following command:

bin/magento melios:tailwind:download

That's all! You can now use Tailwind in all Page Builder forms, including third-party modules:

Configuring Tailwind CSS

Usually, you do not need to change the Tailwind configuration. However, if you want to, you can do so on Stores > Configuration > General > Content Management > Melios Page Builder page:

Please note, that changing the configuration will have no effect on previously saved pages. You need to save them again to regenerate styles using the updated configuration.

Disabling Tailwind CSS

Sometimes you may want to turn of the Tailwind for selected page, or CMS block. In this case you may add melios-tailwind-off css class name to your existing content.

To disable Tailwind completely, you need to remove tailwindcss executable: magento_root/var/melios/tailwind/tailwindcss

Melios supports OpenAI and OpenRouter providers.

• OpenAI provides their own models with different capabilities and pricing.
• OpenRouter provides access to the massive amount of third-party models. Additionally, this service provides their own openrouter/auto proxy model that automatically switches between multiple allowed models to optimize your bills.

To start using AI assistant you need to open Melios settings at Stores > Configuration > Content Management > Melios Page Builder page and fill the API key and AI Model fields:

Now, you can use the assistant! Search for AI icon in every WYSIWYG editor and supported pagebuilder elements:

Clicking the AI icon will activate persistent chat with AI model. This chat preserves the local history on your computer, so you can continue your work where you left off.

Clicking the chevron near AI icon will show you the commands dropdown. You can instanty run selected command for the content of the active section or for selected part of the text. These commands create temporarily chats that are destroyed once you accept the answer or close the chat.

All commands are multilingual, so you can run them for any language!

The following commands are available:

• Fix grammar — fixes grammar errors.
• Fix grammar and improve writing — fixes grammar and improves text readability and clarity.
• Expand content — adds more details and richness to the original content.
• Shorten content — summarizes the text keeping the main ideas.
• Translate to ... — this command is created for each locale used by the frontend stores.

Melios integrates CodeMirror editor into HTML components and "View Source Code" mode of WYSIWYG elements. CodeMirror provides stunning experience for reading and editing html content directly in Magento admin panel:

• Syntax highlighter.
• HTML validation and error highlighting.
• Search and replace.
• Hotkeys — nearly everything from your favorite code editor!
• Light and Dark theme toggler — choose your favorite colors!
• Fullscreen mode — comfortable work with large HTML texts.
• SVG image preview — reduces markup noise when working with HTML content. You can double click the preview icon to view raw content.

The list of available CodeMirror Hotkeys:

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.

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.

Live preview — is an awesome companion to the Quick save feature. Combined, these features will save you tons of time! No need to leave Page Builder, switch the tab and refresh the page manually — stay focused!

When activated, Melios Builder will automatically reload storefront page right after you save the content using Ctrl+S hotkey!

Images (including background images) are well known causers of performance issues. To provide users with fast and reliable shopping experience you must optimize your images carefully. Melios provides a few features to fix image issues on CMS pages:

• Ability to upload modern image formats: webp and avif.
• Ability to set image dimensions attributes.
• Ability to set loading and fetchpriority attributes.
• Ability to preload selected image.

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.

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.

This feature is available since v1.3.0

• Margins and paddings.
• Border width and radius.

This feature is available since v1.5.0

Edit HTML content like a pro! CodeMirror integration greatly improves content management and decreases chances to save broken markup.

• Add WYSIWYG menu because sometimes you need these items.
• Integrates CodeMirror editor into "View Source Code" popup.

Available in MeliosPro v1.4.0

Create stunning pages with Marquee elements! You may also know it as infinite scroller. Melios provides the following Marquee options:

• Appearance: Image or HTML.
• Scroll speed, pixels per second.
• Scroll direction, default or reversed.
• Pause on hover.
• Fade Marquee edges. Works for dark and light themes!
• Gap between items.
• Global and per-item border and border radius styles.