General

• Getting 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 readers

• Page types & behaviour

  Scaling behaviour When creating a new Maglr Pro page, you can choose between two types of browser scaling behaviour: Image: blank page types in the Maglr Pro editor Adapt to screen The "adapt to screen" option sets the page to a fixed size. That means the space of (and between) element is aSome readers

• Responsive 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. BecPopular

• Working 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 readers

• Using 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 readers

• Keyboard 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 readers

• Accessing 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 readers

• Accessibility 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 readers

• Update 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 readers

The 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 readers

• Blendmode

  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 readers

• Headings & 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 readers

• Image

  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 readers

• Video

  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 readers

• Slideshow

  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 readers

• Embed

  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 readers

• Audio

  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 readers

• Button

  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 readers

• Chart

  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

Editing elements

• Positioning elements

  You can position and scale objects in such a way that can make workflow easier and more flexible, based on what you tend to make of your publication. In the editor, while an element is selected, go into the Element panel, where you will see the Auto size field. Here you can change the setting for how the element should be positioned according to the viewer's screen. Image: auto sizing options in the ProFew readers

• Alignment options

  The alignment of an object/element can be done in three different ways, meaning they can behave in three different ways according to the page or screen. This article will explain the differences between them. Free positioning Place the element and move it to its desired position on the canvas. The element will now stay fixed in that position, regardless of the size of the screen. This can be done by selectingFew readers

• Using 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 readers

• Personalise 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

Applying interactivity

• 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 readers

• Start & 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 readers

• Repeating 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 readers

• Scroll 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 tPopular

• Element 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 readers

• Hover 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 readers

• Element 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

Create your Mobile Version

• 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 readers

• What'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 readers

• What 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 readers

• Mobile 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

Import existing design

• 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 readers

• Import 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 readers

• Tips & 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

Embedding

• Take control of embed pages in Pro with iframe bridge

  In some cases, you want to have control over the start of your animation or you want to control Maglr elements from within your embedded files. We have added a list of events and an example of how you can use these from inside the iFrame element in the Block editor, or the Embed element in the Pro editor. To start using this API, paste the snippet below inside the <head> tag of the HTML to include the needed files.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 readers

• Scroll 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 readers

• Bar

  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 readers

• Gauge

  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 readers

• Lottie 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