General
Working with style collections
A style collection is a set of reusable styles for headings, rich text, buttons, shapes and images. When you apply a style to an element, the element stays linked to it, so you can keep designs consistent and bring elements back in line with the style later. Essential Course Ep. 5 - Style collections Style collections A style collection holds your styles, grouped by element type: Headings, Rich text, Buttons, Shapes and Images. Each style has separate settings forFew readersGetting started with the editor
The editor is where you build and design a page. The editor window has five areas: the top bar, the left panel, the canvas, the right panel and the timeline. In freeform mode, you place and size elements freely on the canvas, much like in design tools such as Sketch or Photoshop. Editor layout The editor window is divided into five areas: Top bar: the opFew readersPage types & behaviour
Essential Course Ep. 2 - Pagetypes & Safezone Every page you add with Freeform page is made of one or more scenes. Each scene has a type (Fullscreen or Longpage) and a scaling behaviour (Original fit or Zoom). Together, these decide how the scene fits the visitor's screen. You choose them when you add a page, and you can change them per scene in the editor. Page types Maglr has two base types for scenes: Fullscreen and Longpage. Fullscreen A Fullscreen scenSome readersResponsive safe zone (bleed)
The safe zone is the area of a scene that always stays visible on the published page, whatever the size of the visitor's screen. Pages don't reflow on smaller screens: each scene is scaled so its safe zone fits the screen. The area between the safe zone and the edge of the scene is the bleed, a term from print: it shows when the screen has room for it and is cropped when it doesn't. Essential Course Ep. 2 - Pagetypes & Safezone Showing the safe zone in the editoPopularWorking with layers & groups
The Layers panel lists every element and group in your scene and controls which elements sit in front of others. Each element and group on the canvas appears as a layer in the list. You find it in the Layers tab of the panel on the right side of the editor. Essential Course Ep. 6 - Groups & layers Opening the Layers panel The Layers panel is the Layers tab in the panel on the right side of the editor, next to the Element, Media and General tabs. To open it:Few readersUsing scenes
A scene is a section of a page in the editor. Every page is built from one or more scenes, stacked vertically, and each scene has its own size, type and safe zone. You manage the scenes of a page in the Scenes panel, which opens with the Scenes button in the left rail of the editor. Essential Course Ep. 4 - Scenes Adding a scene To add a scene to the page you're editing: In the editor, click Scenes in the left rail. The Scenes panel opens and lists every scFew readersKeyboard Controls
Global shortcuts While working in the 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 editor](https://storage.crisp.chat/users/helpdesk/wFew readersAccessibility module
Course Advanced - Accessibility The accessibility settings in the editor help screen readers and other assistive technology present your page correctly. You can add descriptions to elements, set heading levels, hide decorative elements from screen readers and set the reading order. You work on one element at a time in the element's Accessibility tab, or on the whole page at once in Page accessibility. For tips on making your content meet the Web Content AccessibilitySome readersUpdate fonts
The "Replace font" popup in the editor replaces a font, or one style of a font, on every element of the current page at once. Open it from the M menu: go to Fonts and click Replace fonts in page. Replacing a font on a page To replace a font on the current page: In the editor, click the M menu in the top-left corner. Go to Fonts and click Replace fonts in page. The "Replace font" popup opens. The left column lists every font used on the page, with the styles (for example NFew readersPage performance
Page performance is a check in the editor that scans the page you're working on and flags things that can make it slow to load or render, such as many scenes, hidden elements that never appear, or many videos. Because the editor lets you design without technical restrictions, a page can become heavy without you noticing. Maglr optimises published pages for performance, but how a page is built also affects how fast it loads, so the check gives you guidelines to keep your page running smoothly.Few readers
Importing from external design tools
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 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 options mFew readersFigma plugin
The Figma to Maglr plugin copies elements or frames from Figma so you can paste them into the Maglr editor with their styling. Elements are pasted into the scene you have open, and frames are pasted as new scenes. Interactions, animations and some Figma properties are not imported; see the limitations below. Installing the Figma to Maglr plugin You install the Figma to Maglr plugin from Figma's Community, once per Figma account. Open the [Figma to Maglr plugin page](https://www.figma.coFew readersImport your Sketch file
You can import an artboard from a Sketch file into a scene in the editor. Each layer in the artboard becomes a separate, editable element, and the images the artboard uses are uploaded to your project automatically. Recent Sketch updates can affect the import, so some layers may not import correctly. If you run into problems, send the Sketch file to support@maglr.com. Importing a Sketch artboard To import a Sketch artboard into a scene: Open the page in the editor and go to the scenFew 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
The Table element places a real table on your page, with rows, columns and header cells that you can add, remove and style at any time. Tables carry over to the mobile layout automatically, and header cells make the table accessible for readers who use assistive technology. Adding a table To add a table to your page: Open the Add elements drawer and go to Numbers. Drag Table onto the canvas. The new table has 3 columns: one header row and two empty rows. Double-click the tabFew readersBlendmode
Each element on the canvas can be extended with a 'blend mode' effect. You can find this effect in 'effects' panel. Keep in mind there are some limitations using blend-mode. The hierarchy of layers used in the 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 placed onFew readersBreadcrumb / Sitemap
Breadcrumb / Sitemap component The Breadcrumb / Sitemap component shows a navigation trail on a published page: the path from the top-level page down to the page the reader is viewing. It shows only the path to the current page, not a list of all pages in your publication. The trail is built automatically from your publication's page structure (main pages and the subpages nested under them). You don't set the path by hand. Each item in the trail is the title of one page on the path.Few readersHeadings & Text
The editor has two text elements: Heading for titles and short lines, and Text for longer copy such as paragraphs and lists. You find both in the Add panel on the left side of the editor. Essential Course Ep. 3 - Element types Adding a heading or text element To add a Heading or Text element to your page: In the editor, click Add in the left panel. In the Elements category, find Heading or Text. Drag the element onto the canvas. Double-clFew readersImage
The Image element places a picture on your page inside a frame, the box you move and resize on the canvas. You choose how the picture fits that frame. Essential Course Ep. 3 - Element types Adding an image You can add an image to the canvas in five ways. From your computer: drag an image file onto the canvas. The editor uploads it and places it as an Image element. With the Image element: Click Add in the left bar. Under Elements, drag ImageFew readersVideo
The Video element plays a video on your page. The video can come from three sources: a YouTube or Vimeo link a link to a hosted video file that ends in .mp4 or .webm a video uploaded to the media library You add the Video element from the Add panel on the left side of the editor, and you set it up in the Video settings in the right panel. Adding a video from a link To add a YouTube or Vimeo video to your page: In the editor, open Add on the left side. Add the `VideoSome 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 arrows and dots, choose different transitions and choose to play the slideshow auFew readersEmbed
The Embed element shows content from another website, or your own HTML, CSS and JavaScript code, inside a Maglr page. You choose how the content is added with the element's Type setting: iFrame link shows a web page by its link, and Code places pasted embed code on the page. Adding an Embed element To add an Embed element to a page: In the editor, click Add in the left panel. Click Specials, then click Embed or drag it onto the canvas. Resize the Embed element to fit tSome 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 that can be uploaded through the page settings on the left side of the ediFew readersButton
Essential Course Ep. 3 - Element types 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 used to easFew 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 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
Before/after slider
The before/after slider is an interactive image comparison component in the editor. Visitors drag a handle across two stacked images to compare a "before" and an "after" state. The product update New components: Diagram & before/after slider shows the before/after slider alongside the diagram component. Adding theFew readersCounter
One of the default components we added to the 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. Make sureFew readersDiagram
The Diagram element shows structured information as connected nodes, such as a project timeline, an organizational structure or a decision process. You type the items as a dashed list, and the Diagram draws them as a Timeline, an Organization Chart or a Tree. Adding a diagram and opening its settings To add a Diagram to your page and open its settings: Open the Add elements panel anFew readersScroll indicator
A scroll indicator is a bar that fills as visitors scroll, showing how far through the page or scene they are. You add it as an element in the editor, choose what it tracks and which way it fills, and style it in the right panel. Adding a scroll indicator To add a scroll indicator to a scene: In the editor, open the Add elements drawer in the left panel. Select the Specials category. Drag Scroll Indicator onto the canvas. Drag the handles of the scroll indicator to set itFew readersBar
The Bar is an element that shows an animated number next to a bar that fills up like a bar chart. On the published page, the number counts to the value you set and the bar fills to match. It works like the Counter, with a bar added. You find the Bar in the Numbers category of the Add elements panel. In the right panel and in its settings popup, the Bar is called "Counter Bar". Opening the Bar settings To open the settings of a Bar:Few 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
A Lottie animation element places a Lottie animation on your page from a .lottie or .json file. You can create Lottie files by exporting animations from After Effects or other animation tools. Adding a Lottie animation To add a Lottie animation to your page: In the editor, click Add in the left panel to open the Add elements panel. Select the Specials category. Drag Lottie animation onto the canvas. With the element selected, click the Settings button in the right pFew readers
Editing elements
Using soft-hyphens in texts
A soft hyphen is an invisible character that marks where a word may break if it doesn't fit on the line. When the word breaks there, a hyphen appears; when the word fits, nothing is visible. You add soft hyphens to Heading, Text and Table elements in the editor with the Add hyphen button. Maglr doesn't hyphenate words automatically in text elements, because browsers often break words in odd places and designers usually want full control over where a word breaks. A line break you add with EntFew readersSizing elements
Essential Course Ep. 7 - Element sizing & positioning You set an element's size in the Element tab of the right panel in the editor. You can give it a fixed width and height, or use the Auto size options to make it fill the full width, full height or the whole of the visitor's screen. Changing an element's size manually To give an element a fixed size, select it on the canvas and use either of these methods: Drag the frame: drag the sides or corners of theFew readersElement positioning
Every element in the editor has one of two position types: Free position places it in the design, and Screen border anchors it to a corner, side or the center of the viewer's screen. With either type, you can also turn on Sticky to keep the element in place on screen while the page scrolls. Essential Course Ep. 7 - Element sizing & positioning Choosing a position type The position type is set in the element's settings in the right panel. To choose it: Select thFew readersUsing masks
Course Advanced - Masks A mask is an image or shape that shows only the part of the layers above it in the Layers panel that falls inside its shape, and hides the rest. Use a mask to create custom shapes, such as a photo inside a star. The covered elements keep their own animations, effects and links, so you can animate content inside the masked area. These elements can be used as a mask: Image: any Image element. The transparent parts of the image hide the coveFew readersPersonalise elements
In the editor, 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. Note: the Personalisation feature is not activated by default and only available with the additional Personalise module. [Please contact us if you would like to uFew readers
Interactivity & Effects
Scrub on scroll
Course Advanced - Scrub on Scroll The term "scrub" comes from video playback, where dragging along a timeline moves through a video frame by frame. Scrub on scroll applies this to an element on your page: its playback follows the visitor's scroll position instead of playing on its own. Compatible elements Scrub on scroll works on these elements: Video (uploaded video files; not YouTube or Vimeo) Slideshow Lottie animation Counter Bar Gauge DiagramSome readersPreparing your video for scrub on scroll
Course Advanced - Scrub on Scroll A video used with scrub on scroll must be an MP4 file with H.264 encoding, 60 seconds or less, 50 MB or less, and 1920 × 1080 pixels or less in total (width × height). If your video doesn't meet these requirements, re-encode it with HandBrake using the steps below. Video requirements A video works with scrub on scroll only when it meets all of these requirements: **FoSome readersScroll animations
Scroll animations tie an element's start or end animation to the scroll position: the animation plays over a set scroll distance, as fast or as slowly as the viewer scrolls. Timeline and viewport animations, by contrast, play over a fixed duration once they start. Course Advanced - Scroll animations Setting up a scroll animation To set up a scroll animation, choose the Scroll trigger in the Start animation or End animation block of the Animations tab. The `ScFew readersIntro to animations
Animations make an element or group appear, move or disappear on the page. You add them in the Animations tab of the right panel and time them on the timeline. One element can have a start, a repeating and an end animation at the same time. Essential Course Ep. 11 - Animations Animation types The Animations tab has up to four animation blocks. Each block has its own toggle: Start animation: plays when the element appears. See [Start and end animations](/Some readersStart & end animations
Essential Course Ep. 11 - 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 animation **DirFew readersRepeating Animations
A repeating animation is a motion, such as a bounce or a pulse, that an element plays over and over: endlessly or a set number of times. Use it to draw attention to an element, such as a button or an arrow. Essential Course Ep. 11 - Animations Adding a repeating animation To add a repeating animation to an element: Select the element you want to animate. Open the Animations tab in the right panel. Click the + next to Repeating animation to switch itFew readersScroll path animations
A scroll path animation moves an element along a path you set with keyframes, driven by the visitor's scrolling. When the visitor scrolls down, the element moves forward along the path; when they scroll up, it moves back. Scroll path animations are only available in Longpage scenes. Video: Keyframes & Scrollpath - Course Advanced Adding a scroll path animation To add a scroll path animation to an element in a Longpage scene: Open a LongpagePopularElement effects
Essential Course Ep. 8 - Effects & hover Element effects change how an element looks or moves on the page, such as a shadow, a blur or movement that follows the cursor. You add them in the right panel of the editor, under the Element tab, by clicking the Effects icon (the lightning bolt). An element can have several effects at the same time. The Effects section has two tabs. The Effect tab holds effects that are always applied, and this article covers them. The `HoFew readersHover effects
Hover effects change how an element looks while a viewer moves the mouse over it. Use them to make an element stand out or to show that it's clickable. You can add several hover effects to the same element. Essential Course Ep. 8 - Effects & hover Adding a hover effect To add a hover effect to an element: Select the element on the canvas. In the right panel, open the Element tab. Click the Effects icon (the lightning bolt). Click the Hover effect tFew readersElement actions
Element actions make an element do something when a viewer clicks it or hovers over it, such as showing a group, going to another page or playing a video. You add them to an element in the Links tab of the right panel, which has an On click tab and an On hover tab. Essential Course Ep. 9 - Hover & click actions Adding a click action To add a click action to an element: Select the element on the canvas. In the right panel, open the Links tab (the linkSome readers
Mobile design
Create your Mobile Version
Every scene has a separate mobile layout, which you build by dragging elements from the desktop layout onto the mobile canvas. Because elements on desktop are positioned freely, Maglr can't place them on mobile automatically, so you decide where each element goes on mobile. Essential Course Ep. 12 - Mobile Creating the mobile layout of a scene To create the mobile layout of a scene: Open the scene in the editor. In the left panel, click Mobile. The canvasSome 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