Mobile-first Email Template
We make sure that every email you create in our editor is mobile-first by design. Therefore, Topol Plugin offers a built-in mobile preview mode to help you see exactly how your email will appear on smaller devices.
To enable mobile-first support, include the following option in your TOPOL_OPTIONS
configuration:
mobileFirstEnabled: true; // to disable, set to false or skip
Switching Between Views via API
If you're using a custom top bar or custom interface instead of the default one, you can control the device preview using the Plugin’s built-in methods:
TopolPlugin.changeEmailToMobile(); // display mobile preview
TopolPlugin.changeEmailToDesktop(); // display desktop preview
Toggle Visibility of Hidden Elements
Topol Plugin also supports responsive visibility control, allowing you to show or hide specific blocks or structures based on the device type (mobile or desktop).
To manually toggle visibility for all hidden elements in the editor preview, use:
TopolPlugin.toggleBlocksAndStructuresVisibility();
When this feature is turned on, hidden elements appear with lower opacity so users can still interact with them. When turned off, the blocks are fully hidden from the canvas view.
Track Visibility Changes
When all elements in certain device type are hidden, we fire a callback stating you should switch the visibility of this feature to true.
You can handle this with the following callback:
callbacks: {
//other callbacks...
onBlocksAndStructuresVisibilityChange(value: boolean) {
// Value is true when hidden elements are visible, false when fully hidden
// You can trigger your own UI updates here
}
}