General
Working with style collections (Pro)
There are significant benefits to working with style collections in Maglr Pro. Predefined style collections: allow designers to work faster; preserve design continuity, even when working with a large team; are easily managed from a central space; are flexible, allowing overrides and exceptions; can be synced to its style collection with one click. The styling configuration in Maglr will feel familiar if you have worked with other design software (i.e. Figma) before, though it is tailFew readersGetting started with the Pro editor
Get started with the Crash Course Get started at light speed and learn everything there is to know about our Pro editor. This will help you understand exactly how this editor works and how you can use it to design your interactive stories. Click here to start the Crash Course for Maglr Pro. Editor Layout Compared to the drag-and-drop Block Editor, the Pro Editor has much more to offer in terms of creativity and freeFew readersPage types & behaviour
Scaling behavior When creating a new Maglr Pro page, you can choose between two types of browser scaling behavior: Image: Scaling behavior and page types in Maglr Pro Original fit (previously "adapt to screen") The "original fit" option sets the page to a fixed size. That means the space ofSome readersResponsive safe zone (bleed)
Maglr Pro is built on the idea that you can create an interactive online page without thinking of all HTML and other types of code coming into play. Typically to make pages fit on all screen types, a technique called responsive is used. The Block Editor is based on this technique, but the Pro Editor isn't. The reason for this is that the responsive technique doesn't allow a 'free draw' type of creativity. BecPopularWorking with layers & groups
All elements added to your canvas can be found in the layers tab in the configuration panel on the right side of the editor. This tab gives you an overview of all the elements and groups that are on your page, and the order in which they are displayed. You can drag elements or groups up and down to change the order and place elements behind others. Every new element added to the canvas will be placed at the topFew readersUsing scenes
With the Scenes button on the left side of the editor, you can see an overview of all the scenes that are in the page. Scenes are slides inside a page where you can place more content to tell your story. You can enable mouse scroll to switch scenes or manually link to scenes from elements through the actions tab. In the scenes panel, you can add or delete scenes, reorganise them and set them to be sticky. SettingsFew readersKeyboard Controls
Global shortcuts While working in the Pro editor we support many different shortcuts. You can find an overview in the editor (clicking the 'shortcuts' link in the add panel, or through the options menu).Few readersAccessing the Media Library
The media library is used to upload any type of external content you would like to add to your publication. A new folder is created within this library for each project, in order to help you to maintain an overview of all your content. To access the media library, go to the the files panel in the right side of the editor. Here you can see an overview of the content used in your current publication. Image: the media panel in the Maglr Pro editor (https://storage.crisp.chat/users/Few readersAccessibility module
At Maglr, ensuring the content you create is accessible to viewers of all abilities is highly important to us. The Web Consortium Accessibility Guidelines (WCAG) provides worldwide guidance for making accessible digital content and online experiences that consists of levels ranging from A to AAA. We recommend checking out the guidelines (Few readersUpdate fonts
In the options menu of the pro-editor you will find the Font Updater. Here you can easily replace fonts used on the current page. On the left side of the popup you will see the typefaces and fonts used in the page. Select one of those fonts and the right side of the popup will update. You will see the selected font and will be able to choose a font to replace it with. Make sure you click "Replace font" when you're done and all those fonts will be updated to your selected font. (https://storFew readersPage performance
Why page performance is a shared responsibility The Pro editor gives designers the freedom to create without limits, which is an advantage but also comes with potential risks. That freedom can sometimes lead to overly complex pages that don’t follow web best practices, which may cause performance issues that are beyond our control. At Maglr, we do our best to optimise pages for performance and SEO, but when it comes to the latter, part of that responsibility also falls on the designer. That’sFew readers
Imporing designs
Import elements from existing Maglr projects
In order to quickly copy and paste multiple elements or entire scenes to other pages, we have implemented the import scene or elements functionality into the Pro Editor. You can use this feature to import elements from already existing projects, which can be very useful to recycle (parts of) your creations among different projects. Please note that you can also copy and paste groups and elements from one page to the other by using shortcuts cmd/ctrl + c and cmd/ctrl + v. Go to the optionsFew readersImport your Sketch file
As a Sketch user, it’s possible to directly convert your Sketch artboards into fully editable scenes in Maglr Pro. This allows you to design the pages of your Maglr publication in Sketch first, before importing to Maglr to convert them into an interactive publication. Selecting a file to import First, add a new Pro page or scene to your project and open it in the editor. Under the Options dropdown-menu in the top right you will see an option called Import from Sketch file. Here you’Some readersTips & restrictions when creating & importing your Sketch file
Our Sketch import allows you to fully design your entire publication in Sketch, before importing it to Maglr to make it interactive. While this is a great timesaver, there are some things you need to keep an eye on while designing your Sketch file to successfully convert all its elements to Maglr. Things to note when designing your Sketch file Your artboard in Sketch will be converted to a scene after importing it to Maglr. Keep this in mind when preparing your Sketch file if yoFew readers
Elements
Tables
If you have data that you want to display in columns, you can manually draw it in the editor, but it becomes difficult when you need to add columns or rows afterwards. With the table element, you can create a table that is easy to modify, reusable on mobile, and accessible for readers with disabilities. Within the constraints of the HTML table element, you can customise the table to match your own branding as much as possible using the Maglr Pro editor. Setting up a table When you drag a nFew readersBlendmode
Each element on the canvas can be extended with a 'blend mode' effect. You can find this effect in 'effects' panel. Effect panel Keep in mind there are some limitations using blend-mode. The hierarchy of layers used in the Pro editor can cause issues when: A mask is used An element with blend-mode is grouped A mask animation is used Best is to only use the 'blend-mode' on non-grouped elements placeFew readersHeadings & Text
In the Add panel on the left side of the editor, you will find heading and text elements and more that you can add to your canvas. Heading Via the Heading element, it's easy to quickly insert a small sentence or word and adjust its styling and settings. When you want to insert larger amounts text, please select and drag the rich text block to your layout instead. Text The rich text element is crFew readersImage
In the Add panel on the left side of the editor, you will find the Image element and more that you can add to your canvas. Images Images are probably the most used object for creating a publication. There are different ways to get them on your canvas. You can directly drag images on to your canvas and it will upload and place it instantly. You can also drag an image from the files tab on the right or choose an imagFew readersVideo
In the Add panel on the left side of the editor, you will find the Video element and more that you can add to your canvas. Youtube & Vimeo After selecting the video element you can go into the configuration panel on the right and paste the URL to a YouTube or Vimeo video. Both platforms allow you to create free accounts to host your videos. Vimeo also has paid accounts if you want more customization.Some readersSlideshow
In the Add panel on the left side of the editor, you will find the Slideshow element and more that you can add to your canvas. Slideshow A great way to show a series of pictures without losing too much canvas space is a slideshow. This element works best if all images are the same size. There are some settings in the objects tab to change the style of the slideshow: you can toggle on or off the arrowsFew readersEmbed
Being able to embed such things as social media posts or even pages/profiles is a powerful function. It allows you to show off a certain post or page that you might think is relevant to your publication. Your viewer then knows that what they are seeing is real and exists somewhere on the internet. In order to place your own code or content from external websites directly into your publication, the embed element can bSome readersAudio
In the Add panel on the left side of the editor, you will find the Audio element and more that you can add to your canvas. Audio element You can add an audio element by dragging it into the canvas from the add menu on the left. You can upload and choose an audio file (.mp3) and edit the start and stop button for the player in the canvas. Page audio Every page can have background music thaFew readersButton
In the Add panel on the left side of the editor, you will find the button element and more that you can add to your canvas. Button Because all objects can receive links, a button is not always necessary. But if you want a small shape with text inside it, a button is the fastest way to create this. Simply drag it onto the canvas and edit the text in the object tab on the right. Image button This element can be uFew readersChart
The Chart element can be added to your publication to display data that is easier for the user to understand and visualise. Inside the Pro editor, click and drag the graph element into your publication. From the panel on the right you can then fully customise the graph to your liking.Few readers
Components
Counter
One of the default components we added to the pro-editor is the counter. It can show numbers counting from one number to the next. Because it has multiple states you can let it animate or count between different states. This can be done by linking to these states in the links panel. From value This is the starting number where the counters begins to count. Steps Here you can set the first number where the counter should count towards. You can add extra steps with the plus button. MakeFew readersScroll indicator
We now have the option to add a scroll indicator to your longpage. That way visitors can see how fast they will read through your page before they will reach the bottom of the page. It's a simple bar that will get filled when you scroll down. To make sure the bar stays visible you will need to position it sticky in most situations. Page/Scene This setting let's you choose if you want the bar to fill for just the scene or the whole page. Horizontal/Vertical You can choose if you want thFew readersBar
The Bar works almost the same as the Counter. This counter also has a bar to visualise the numbers like a bar chart. Most settings are also the same for this component. Min range and Max range By entering a min and a max value, the bar will use the range in between to animate its content. The min value is also the number that will be used as starting number for the counter part. Steps Here you can set the first number where the counter should count towards. You can add extra steps withFew readersGauge
Like the counter and counter bar this element counts and animates towards a chosen state. The design can be configured in multiple ways. Min range and Max range By entering a min and a max value the circle chart will use the range in between to animate its content. The min value is also the number that will be used as starting number for the counter part. Steps Here you can set the first number where the counter should count towards. You can add extra steps with the plus button. Make sFew readersLottie animations
Place Lottie animations on your pro-page by choosing your .lottie or .json file. There are only a few settings to control the animation. You can let it autoplay, loop, and you can choose to show controls for the animation. Lottie files can be created by exporting animations from After Effects or other programs. More information about LottieFew readers
Editing elements
Using soft-hyphens in texts
Within text elements (headings or rich text), we do not automatically hyphenate words. Too often, browsers offer strange word breaks, and designers prefer to maintain full control. If you want to break text manually, you can of course use a ‘hard return’. However, the issue with that is that this line break also carries over to the mobile version of the page. To allow for proper word hyphenation, you can use soft hyphens. This allows you to indicate where in a word the browser is allowed tFew readersSizing elements
You can position and size elements in variable ways that make workflow easier and more flexible. When an element is selected, go into the Element panel and you will see the Auto size field. Here you can change the setting for how the element should scale according to the viewer's screen. Image: auto sizing options in the Pro editor (https://storage.crisp.chat/users/helpdesk/website/1544049f0be2f400/deaf7Few readersElement positioning
There are two positioning types for elements, behaving differently relative to the page or screen. In addition to either element position type, "sticky" may be used. Free positioning Allows the placement of an element to the desired position on the canvas freely. The element stays fixed to that position, regardless of screen size. To do so, sekect the 'Free position' option from the positioning menu of the eleFew readersUsing masks
In the Maglr Pro editor, masks can be used to show specific parts of elements while concealing the rest. This allows you to create more custom shapes and apply specific animations, effects & actions to the elements that are covered by the mask. Creating a mask To convert your element into a mask, right-click any image element and select the ‘Use as masFew readersPersonalise elements
In Maglr Pro, it's possible to create personalisable elements. This can be used to send relevant content straight to your target audience and target them directly using their names and other personal data. It's also possible to use this to replace the default data with the details of the sender.Few readers
Interactivity & Effects
Intro to animations
Elements in the Pro editor know multiple types of animations, which can be applied simultaniously to a single element and/or group. Animation types available in the Pro Editor are: start, repeating, end and scroll (longread only) animations. You will find these animations under the animation tab in the element panel. More information on general animations and how you can apply them can be found here. Click heSome readersStart & end animations
Start animations trigger on loading the page (Timeline) or when the user scrolls to a certain point on the page (Viewport, longread only). End animations trigger when the element is set to disappear from view. Turning on these animation types will make the following options appear: Duration: length of the animation itself Animation: type of animation Easing: the flow of the animationFew readersRepeating Animations
Repeating animations are animations that will continue to play infinitely or for a set number of times after becoming visible on the page. You can also change how fast the animation goes, which can result in a quicker or slower looping animation. This feature is very useful to keep the publication 'alive', along with drawing attention to a specific area of the page. Repeating animation types Bounce: this wilFew readersScroll animations
Scroll animations allow you to animate objects based on the scrolling position of your viewers. This animation type is therefore only available for longread pages. It allows you to make elements move with the scrolling movement of a viewer, or determine an elements positioning entirely when scrolling through the page. Scroll animation types Parallax: Follows the viewer's scrolling through tPopularElement effects
Effects can be used to make your element stand out a little better or to make it interact with the viewer's behaviour. These effects can be added and configured in the effects menu in the object tab of the configuration panel on the right side of the editor. You can add multiple effects to a single element. Select the type of effects you would like to add and configure them through the wrench icon. ThFew readersHover effects
Hover effects are very useful to make your element stand out when viewers hovers over it, inviting them to interact with the element further. These effects can be used to indicate that your element is clickable, and can be added and configured in the effects menu in the object tab of the configuration panel on the right side of the editor. You can add multiple hover effects to a single element.Few readersElement actions
Element actions are useful to create content for your viewers to interact with, allow you to make elements perform an action when it is clicked or hovered on. Some actions can be added multiple times or can be combined with other actions. When more actions can be added you will see a plus sign above the existing action. Click actions With click actions, you can create links to other pages or external URLs, buSome readers
Mobile design
Create your Mobile Version
On every page and/or in any scene you can switch to the mobile editor. This lets you arrange content in a way that is more suitable for mobile devices. Unfortunately due to the free positioning of elements, we are unable to determine where elements should be positioned in a mobile version. To help you create this version of a page however, we have put every element you used in the desktop version in an extra Element LibraSome readersWhat's disabled in mobile view
Most things when editing for mobile typically work the same in the desktop editor and even when viewing from the mobile device. However some things may not work the same, they may function differently in technical terms and so the outcome may be a little different from what you may expect. The things that don't work is simply due to the lack of flexibility when it comes to comparing the usage on a PC or Laptop as to a mobile device, such as a Smart Phone or Tablet. The different devices doFew readersWhat to consider when building a mobile design
Building a mobile version of an online publication or magazine can be a great way to expand your reach and ensure an optimal reading experience on all devices. However, there are a few things to keep in mind when designing a mobile version of your publication in Maglr: Take mobile in to consideration when designing desktop (and not after) Obviously, a smart phone and desFew readersMobile animations
When you create a mobile version, by setting your view to mobile and dragging the items on the page, the animations from desktop will automatically be activated for mobile as well. You can change or turn off the animations on mobile without changing it on desktop. In some situations will see small purple dots next to your mobile settings to show you these are changed on mobile. Desktop is leading so if you don't change a setting on mobile the setting of desktop will sync with the mobile versioFew readers