General
Responsive 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 editoPopularPage 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 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 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 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:Few readersWorking 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 readersAccessing the Media Library
The media library stores the images, videos and other files you use in your projects. Each project has its own folder in the media library. In the editor, you open the media library from the Media tab in the right panel or from the Add panel on the left. Opening the media library from the Media tab To open the media library from the Media tab in the editor: In the editor, click the Media tab in the right panel. By default, the panel shows the files in the current project's foFew readersKeyboard Controls
The Maglr editor has keyboard shortcuts for saving and editing, arranging and grouping elements, adding elements, and moving around the canvas. The shortcuts below use the Mac keys ⌘ (Command), ⌥ (Option) and ⇧ (Shift). On Windows, use Ctrl for ⌘ and Alt for ⌥. Opening the shortcuts overview The editor has a built-in overview of its keyboard shortcuts. You can open it in two ways. From the Add elements panel: Click Add in the left panel of the editor. Click shortcuts at the topFew readersWorking 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 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 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
This article explains how to prepare a Sketch file for import into Maglr, and which Sketch features don't import or look different after import. To import a file, open the options menu in the editor's top bar and choose Import from Sketch. The full procedure is in Import your Sketch file. Sketch is updated regularly, and these updates can affect the import. Some layers may not come in as expected. If your file doesn't imFew readersImport elements from existing Maglr projects
You can import a whole scene, or selected elements and groups, from a page in any of your Maglr projects into the page you're editing. The source can be another project or another page of the same project. Everything you import is an independent copy. Importing an entire scene To copy a whole scene, with both its desktop and mobile layout, into the page you're editing: In the editor, click the M menu in the top-left corner. Click Import scene / element. The "Import Scene or ElemeFew 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 readers
Grid mode (beta)
Getting started with grid mode
Grid mode is in beta and available in selected accounts only. Grid mode is one of the two ways to build a scene in the Maglr editor. In a grid scene, content sits in rows and columns and adapts to the screen: when a text gets longer or shorter while you finalise your copy, the content around it moves along, and the mobile version is generated for you. In a freeform scene, you position every element yourself, so content that changes size can overlap other elements. This article explains whatFew readersRoles and views in the editor
Grid mode is in beta and available in selected accounts only. In the Maglr editor you work in one of three views: Design, Build or Content. Your view decides what you can change in a page. The view you get depends on your role, which is set in the dashboard, and on your organisation's license. The three views in the editor Each view gives a different level of editing: Design — full editing. You can build grid scenes and freeform scenes, and use every grid setting.Few readersCreate a grid scene
Grid mode is in beta and available in selected accounts only. A page in the editor is built from scenes, stacked one below the other. To add a grid scene, open the scene picker with Add scene and choose a blank grid scene or a ready-made scene from a library, or duplicate a scene that is already on the page. You choose grid or freeform when you create a scene. This can't be changed afterwards. Splitting a page into scenes Splitting a page into scenes keeps a longer page manageable. EaFew readersGrid scene settings
Grid mode is in beta and available in selected accounts only. Grid scene settings apply to the scene as a whole, such as its name, height and background. The setting specific to grid scenes is Scene height, which sets how tall the scene is at least. In the Design view, you can also set Show grid. Opening the scene settings in the Design view To open the settings of a grid scene in the Design view: In the left panel, click Scenes. The Page structure panel opens with a list ofFew readersRows, columns and elements
Grid mode is in beta and available in selected accounts only. A grid scene is built from rows, columns and elements. Rows run across the page and stack from top to bottom. A row holds elements directly, or holds columns that sit side by side. Columns hold elements. Because content sits in rows and columns, the editor can rearrange it for a small screen: the mobile version is generated from it automatically. Rows in a grid scene A row is a horizontal band across a grid scene. Rows stackFew readersAdd elements and building blocks
Grid mode is in beta and available in selected accounts only. You add content to a grid scene by dragging elements and building blocks from the Add drawer onto the page, or by clicking a + on the canvas. Content you add snaps into the flow of the page: above, below or beside what is already there. Elements and building blocks You can add two kinds of content to a grid scene: Elements — single pieces of content, such as a text, heading, image, video or button. **Building bloFew readersArrange content in the Build view
Grid mode is in beta and available in selected accounts only. In the Build view, you arrange a grid scene directly on the page. You select sections, rows, columns and elements on the page, drag sections, rows and elements to move them, and use the toolbar above a selected item to set its width, height and placement. Selecting content in the Build view In the Build view, every section, row and column has a grab tab that appears when you hover over it. A section is a row at the top levelFew readersSelect, move and resize in the Design view
Grid mode is in beta and available in selected accounts only. In the Design view, you arrange a grid scene directly on the page. You click to select rows, columns and elements, drag them to move them, and drag handles to change widths, heights and spacing. Content snaps to the grid columns: there is no free position on the page. Selecting content in the Design view To select content in a grid scene in the Design view: Click a row, column or element to select it. Shift+click to addFew readersLayout types and position settings
Grid mode is in beta and available in selected accounts only. In the Design view, the right panel sets how a grid scene is laid out: how rows and columns arrange their contents, how wide and tall items are, and whether an item is placed freely or sticks while scrolling. Select a row, column or element on the page to see its settings: the Layout block sets how a row or column arranges its contents, and the Position block sets how the selected item sits in the row or column around it. TheFew readersBackgrounds in a grid scene
Grid mode is in beta and available in selected accounts only. In a grid scene, you can give a row, a column or the whole scene a background: a colour, an image, a video or a slideshow. A background sits behind the content and grows with it, so a section can have a full-width image or colour while its text stays readable on top. Background types in a grid scene A row or column in a grid scene can have one of these backgrounds: Transparent — no background. This is the default. `ColFew readersEdit text in a grid scene
Grid mode is in beta and available in selected accounts only. In a grid scene, you edit text directly on the page, in the box where it sits. One text element can hold several paragraphs, and while you type you can add a heading, a paragraph or another element between the paragraphs. Editing text on the page To edit a text, heading or button in a grid scene: Double-click it. You can also select it and press Enter, or in the Build view click Edit text in the toolbar above it. TFew readersCard list and Card slider
Grid mode is in beta and available in selected accounts only. A card row is a row in a grid scene whose columns are shown as cards. There are two kinds: a Card list shows the cards in a grid that wraps onto new lines, and a Card slider shows the cards side by side in a row that visitors scroll or swipe through. Card list and Card slider Both kinds of card row hold a set of cards. Each card is a column with its own content, such as an image, a heading and a text. Card list —Few readersEdit the mobile version of a grid scene
Grid mode is in beta and available in selected accounts only. The mobile version of a grid scene is generated from the desktop version: it has the same content and structure, on a page grid of 6 columns by default. You check it in the mobile view and change what needs to be different on mobile, such as the order of items. A change you make on mobile applies to mobile only, and you can reset it to the desktop version. Switching to the mobile version To see and edit the mobile version ofFew readersEdit content in the Content view
Grid mode is in beta and available in selected accounts only. In the Content view, you change what a grid page says and shows: you edit its text and replace its images, directly on the page. The layout and the design stay as the designer set them. Users with the Contributor role work in the Content view. Changes you can make in the Content view In the Content view, you can: edit the text of texts, headings and buttons replace an image with another image publish the page for previFew readers
Elements
Video
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 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 readersTables
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 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 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 readersAudio
You can add audio to a publication in two ways: an Audio element, which is a clickable icon visitors use to play a sound file, and background audio, which starts when a visitor reaches a specific page. Adding an Audio element The Audio element places a clickable play icon on your page. To add one: Click Add in the left bar of the editor. Select the Specials category. Drag Audio onto the canvas. With the element selected, go to the "Audio" section on the Settings tab ofFew readersSlideshow
The Slideshow element shows a series of images in one frame, one image at a time. It lets you show several pictures without using much canvas space. Each image fills the slideshow frame and is cropped to fit, so the slideshow works best when all images have the same shape (aspect ratio) as the frame. Adding a slideshow To add a slideshow and its images: Open the Add panel on the left side of the editor. In the Elements category, drag Slideshow onto the canvas. With the slideshFew readersButton
The editor has two button elements: Button, a text element styled as a button, and Image button, a button made from your own images. You add both from the Add panel on the left side of the editor. Button is in the Elements category and Image button is in the Specials category. Essential Course Ep. 3 - Element types Adding a button A Button is a text element styled as a button. It lands on the canvas with the text "Button" on a teal background, reaFew readersBlendmode
Blendmode mixes an element's colours with the content behind it on the page. For example, Multiply darkens the result and Screen lightens it. You set Blendmode per element in the Effects tab of the right panel, under Effect. Adding and removing Blendmode To add Blendmode to an element: Select one element on the canvas. In the right panel, open the Effects tab (the lightning bolt icon). Make sure the Effect tab is selected, not Hover effect. Click the + next to `BlendmodFew readersChart
The Chart element shows your data as an interactive chart, such as a bar, line or pie chart. You place the element in the editor, then enter the data, choose the chart type and set its look in the Chart editor. Adding a chart To add a chart to your publication: In the editor, click Add in the left panel. Open the Numbers category. Drag Chart onto the canvas. Resize and position the chart box on the canvas. A new chart is an empty box until you add data in the Chart editoFew 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 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 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 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 readersCounter
The Counter component shows a number that counts from a start value to a target value. You can give a counter several steps, each with its own target value, and let a button or other element switch between them. You find the Counter in the editor's Add elements drawer, under Numbers. Adding a counter To add a counter and set the numbers it counts between: In the editor, click Add in the left panel to open the Add elements drawer, and choose Numbers. Drag Counter onto the canvasFew 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
The Gauge is an element that shows a half, three-quarter or full ring with a number in the middle. When the gauge plays, the ring fills to a value you choose while the number counts up or down to that value. The Gauge works like the Counter and Bar elements, but shows the value as a ring. Adding a gauge To add a gauge and set its value: Click Add in the left panel. Open the Numbers category and drag Gauge onto the canvas. With the gauge selected, click Settings in the GaugFew 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 readers
Editing elements
Using 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 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 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 readersPersonalise elements
Personalisation replaces texts and images in a publication with details for each reader, such as their name. It works in two parts: you mark headings, texts and images as personalisable in the editor, and the published page then fills them in through URL parameters or a personalised email. Marking elements and using URL parameters are available on every account. Making texts and images personalisable You can make heading, text and image elements personalisable in the editor, one element atFew readersUsing 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 readers
Interactivity & Effects
Scroll 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 LongpagePopularScrub 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), and it must have no audio track. If your video doesn't meet these requirements, re-encode it with HandBrake, or export it again without audio from your video app, using the steps below. Video requirements A video works with [scrub on scroll](https://help.maglr.com/enSome 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 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. Use it to bring content onto theSome 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 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 readersStart & end animations
A start animation brings an element into view, and an end animation takes it out of view. You set both for each element in the Animations tab of the right panel, under Start animation and End animation. Essential Course Ep. 11 - Animations Adding a start or end animation To add a start or end animation to an element: Select the element on the canvas. In the right panel, open the Animations tab. Switch on the toggle next to Start animation or `End animFew readersElement 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 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 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 to consider when building a mobile design
Every scene in the Maglr editor has a Desktop layout and a Mobile layout. You build the desktop design first, then place its elements on mobile and adapt them for smaller screens. This article covers what to plan for, how the two layouts are linked, and how to adjust the mobile scene. Planning for mobile while designing desktop Design the desktop layout first, but plan for mobile while you do it. Maglr works desktop-first: you build the mobile design mainly by placing elements from your desFew readersMobile animations
Animations you set on desktop also play on the mobile layout. Mobile follows desktop until you change an animation setting on mobile. From then on, that setting keeps its mobile value, and the settings you haven't changed on mobile keep following desktop, including changes you make on desktop later. The one exception is the Duration of Start and End animations, explained under Changing animations on mobile. An element you add to the mobile layout keeps the animations it has on desktop. To set uFew readersWhat's disabled in mobile view
This article lists what doesn't work, or works differently, on the mobile version of a page and in the Mobile layout of the editor. Visitors see the mobile version when the page is narrower than about 500 pixels, which in practice means phones held upright (portrait). Tablets, phones turned sideways (landscape) and wider screens show the desktop version. What works differently for visitors on mobile On the mobile version of a page, visitors see a few things behave differently than on desktoFew readers