Structure - H5mag User Guide

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Structure - H5mag User Guide</title> <meta name="keywords" content="" > <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;1,200;1,300;1,400;1,600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="/css/reset.css" type="text/css"> <link rel="stylesheet" href="/css/text.css" type="text/css"> <link rel="stylesheet" href="/css/search.css" type="text/css"> <link rel="stylesheet" href="/css/pagination.css" type="text/css"> <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen"> <link rel="stylesheet" href="/css/print.css" type="text/css" media="print"> <link rel="stylesheet" href="/css/main.css" type="text/css"> <link rel="stylesheet" href="/css/mobile.css" type="text/css"> <link rel="stylesheet" href="/css/mobile-menu.css" type="text/css"> <script src="//code.jquery.com/jquery-1.11.3.js"></script> <script src="/js/main.js"></script> </head> <body> <div class="navigation-container"> <div class="hamburger"></div> </div> <div class="mobile-menu"> <div class="close navigation-container"></div> <ul class="navigation"> <li> <a data-id="menu-84" title="Frequently Asked Questions" class=" main" href="/faq">Frequently Asked Questions</a> </li> <li> <a data-id="menu-111" title="API" class=" main" href="/api">API</a> </li> <li class="active"> <a data-id="menu-2" class=" main mainactive" href="/basics">Basics</a> <ul> <li> <a data-id="menu-20" href="/basics/getting-started">Getting started</a> </li> <li class="active"> <a data-id="menu-17" class=" active" href="/basics/structure-terminology">Structure</a> </li> <li> <a data-id="menu-35" href="/basics/system-requirements">System requirements</a> </li> <li> <a data-id="menu-18" href="/basics/artboards">Responsive Artboards</a> <ul> <li> <a data-id="menu-47" href="/basics/artboards/setup">Bleeds</a> </li> </ul> </li> <li> <a data-id="menu-21" href="/basics/managing-articles">Articles</a> </li> <li> <a data-id="menu-66" title="Restore older versions of saved articles" href="/basics/versioning">Saving & versioning</a> </li> <li> <a data-id="menu-22" href="/basics/images">Images</a> </li> <li> <a data-id="menu-39" title="Webfonts" href="/basics/webfonts">Webfonts</a> </li> <li> <a data-id="menu-65" href="/basics/saved-styles">Saved Styles</a> </li> <li> <a data-id="menu-56" title="Actions" href="/basics/actions">Actions</a> <ul> <li> <a data-id="menu-37" title="popups" href="/basics/actions/popups">Popups</a> </li> <li> <a data-id="menu-57" title="Internal, external and email links" href="/basics/actions/links">Links</a> </li> <li> <a data-id="menu-73" title="Social media sharing and follow actions" href="/basics/actions/social-media">Social Media</a> </li> </ul> </li> <li> <a data-id="menu-12" href="/basics/animations">Animations</a> </li> <li> <a data-id="menu-76" title="Guides: grids, columns & layouts" href="/basics/guides-grids">Guides: grids & columns</a> </li> <li> <a data-id="menu-117" href="/basics/table-of-contents">Table of Contents</a> </li> <li> <a data-id="menu-44" href="/basics/previews">Previews</a> </li> <li> <a data-id="menu-45" href="/basics/publishing">Publishing</a> </li> <li> <a data-id="menu-120" href="/basics/managing-editions">Exporting/Importing editions</a> </li> </ul> </li> <li> <a data-id="menu-8" class=" main" href="/areas">Areas</a> <ul> <li> <a data-id="menu-43" href="/areas/heading">Heading</a> </li> <li> <a data-id="menu-24" href="/areas/text">Text</a> </li> <li> <a data-id="menu-40" href="/areas/section">Section</a> </li> <li> <a data-id="menu-25" href="/areas/image">Image</a> </li> <li> <a data-id="menu-123" href="/areas/gallery">Gallery</a> </li> <li> <a data-id="menu-26" href="/areas/video">Video</a> </li> <li> <a data-id="menu-59" href="/areas/advanced">Advanced areas</a> <ul> <li> <a data-id="menu-28" href="/areas/advanced/twitter">Twitter widget</a> </li> <li> <a data-id="menu-29" href="/areas/advanced/facebook">Facebook widget</a> </li> <li> <a data-id="menu-27" href="/areas/advanced/soundcloud">Soundcloud widget</a> </li> <li> <a data-id="menu-36" href="/areas/advanced/iframe">Iframe</a> </li> <li> <a data-id="menu-119" href="/areas/advanced/audio-player">Audio player</a> </li> </ul> </li> </ul> </li> <li> <a data-id="menu-60" class=" main" href="/layout">Layout Techniques</a> <ul> <li> <a data-id="menu-61" href="/layout/custom-columns">Custom columns</a> </li> <li> <a data-id="menu-62" href="/layout/scrolling-content-fixed-background">Scrolling content over fixed background</a> </li> <li> <a data-id="menu-63" href="/layout/anchoring-content-to-edges">Anchoring content to edges</a> </li> <li> <a data-id="menu-124" href="/layout/sticky-content">Sticky content</a> </li> </ul> </li> <li> <a data-id="menu-48" class=" main" href="/workflow">Creating digital magazines</a> <ul> <li> <a data-id="menu-49" href="/workflow/concept-target-audience-and-goals">Concept, target audience & goals</a> </li> <li> <a data-id="menu-50" href="/workflow/page-plan-and-publication-structure">Page plan & publication structure</a> </li> <li> <a data-id="menu-51" href="/workflow/graphic-design-and-layout">Graphic design & layout</a> </li> <li> <a data-id="menu-52" href="/workflow/developing-master-pages-and-styling">Developing masters & styling</a> </li> <li> <a data-id="menu-53" href="/workflow/content-development-and-integration">Content development & integration</a> </li> <li> <a data-id="menu-54" href="/workflow/getting-it-out-there">And then… getting it out there!</a> </li> </ul> </li> <li> <a data-id="menu-10" class=" main" href="/design-guidelines">Design Guidelines</a> </li> <li> <a data-id="menu-16" class=" main" href="/statistics-analytics">Statistics & Analytics</a> </li> <li> <a data-id="menu-132" class=" main" href="/modules">Modules</a> <ul> <li> <a data-id="menu-130" href="/modules/dataset-module">Dataset module</a> </li> <li> <a data-id="menu-133" href="/modules/translate-module">Translate module</a> </li> <li> <a data-id="menu-115" href="/modules/feedback-module">Feedback Module</a> <ul> <li> <a data-id="menu-116" title="How to create a form" href="/modules/feedback-module/how-to-create-a-form">How to create a form</a> </li> <li> <a data-id="menu-118" title="Feedback Results" href="/modules/feedback-module/feedback-results">Feedback Results</a> </li> </ul> </li> <li> <a data-id="menu-85" href="/modules/subscriber-module">Subscriber Module</a> <ul> <li> <a data-id="menu-86" href="/modules/subscriber-module/acquiring-subscribers">Gaining subscribers</a> </li> <li> <a data-id="menu-95" href="/modules/subscriber-module/adding-subscribers">Adding subscribers</a> </li> <li> <a data-id="menu-96" href="/modules/subscriber-module/subscriber-list">Subscriber list</a> </li> <li> <a data-id="menu-87" href="/modules/subscriber-module/push-notifications">Push notification</a> </li> <li> <a data-id="menu-97" href="/modules/subscriber-module/email-notification">Email notification</a> </li> <li> <a data-id="menu-98" href="/modules/subscriber-module/subscriber-settings">Subscriber settings</a> </li> <li> <a data-id="menu-99" href="/modules/subscriber-module/sending-notifications">Sending notifications</a> </li> <li> <a data-id="menu-100" href="/modules/subscriber-module/notification-progress-history">Notifications progress & history</a> </li> <li> <a data-id="menu-101" href="/modules/subscriber-module/notification-analytics">Notifications analytics</a> </li> <li> <a data-id="menu-83" title="Web Push certificate" href="/modules/subscriber-module/web-push-certificate">Web Push certificate</a> </li> <li> <a data-id="menu-112" title="Transfer Zapier Mailchimp" href="/modules/subscriber-module/transfer-zapier-mailchimp">Transfer Zapier Mailchimp</a> </li> <li> <a data-id="menu-113" href="/modules/subscriber-module/connecting-mailchimp-zapier-h5mag">Connecting Mailchimp with H5mag using Zapier</a> </li> <li> <a data-id="menu-114" href="/modules/subscriber-module/automate-referrals-zapier">Automate Referrals Using Zapier</a> </li> </ul> </li> </ul> </li> <li> <a data-id="menu-6" class=" main" href="/advanced-features">Advanced Features</a> <ul> <li> <a data-id="menu-55" title="CSS & Javascript" href="/advanced-features/custom-scripting">CSS & Javascript</a> </li> <li> <a data-id="menu-104" title="Authentication" href="/advanced-features/authentication">Authentication</a> </li> <li> <a data-id="menu-15" title="URL structure" href="/advanced-features/url-structure">URL structure</a> </li> <li> <a data-id="menu-46" href="/advanced-features/custom-navigation-bar">Navigation bar</a> </li> <li> <a data-id="menu-77" href="/advanced-features/toc-styling">TOC styling</a> </li> <li> <a data-id="menu-74" href="/advanced-features/scrollbar-styling">Scrollbar styling</a> </li> <li> <a data-id="menu-3" title="Keyboard shortcuts" href="/advanced-features/keyboard-shortcuts">Keyboard shortcuts</a> </li> <li> <a data-id="menu-78" href="/advanced-features/sharepoint">Access Control using Microsoft 365</a> </li> <li> <a data-id="menu-79" href="/advanced-features/autoplay">Autoplay</a> </li> <li> <a data-id="menu-103" href="/advanced-features/okta-integration">Okta integration</a> </li> <li> <a data-id="menu-80" href="/advanced-features/ms365-integration">User Provisioning via Microsoft 365</a> </li> <li> <a data-id="menu-102" title="After Effects" href="/advanced-features/vector-animations-using-adobe-after-effects">After Effects</a> </li> <li> <a data-id="menu-106" title="Adobe Animate" href="/advanced-features/adobe-animate">Adobe Animate</a> </li> <li> <a data-id="menu-109" href="/advanced-features/building-a-h5mag-app-using-react-native">Building a H5mag App using React Native</a> </li> <li> <a data-id="menu-129" title="Presentation Mode" href="/advanced-features/presentation-mode">Presentation Mode</a> </li> </ul> </li> </ul> <div class="bottom"> <div class="submenu"> <div class="first half"> <a href="http://h5mag.com/blog"><p>Blog</p></a> <a href="http://h5mag.com/updates"><p>Versions</p></a> </div><div class="second half"> <a href="http://docs.h5mag.com/"><p>User Guide</p></a> <a href="http://h5mag.com/contact"><p>Contact Us</p></a> </div> </div> <div class="contact"> <a href="tel:+310703184404">+31 (0)70 31 84 404</a><br> <a href="mailto:support@h5mag.com">support@h5mag.com</a><br> <a href="https:twitter.com/h5mag"><img src="/img/twitter.svg"/>@H5mag</a> </div> </div> </div> <header> <div class="container"> <aside> <header><a href="https://h5mag.com"><img src="/img/h5mag_compact_logo.png" alt="" width="75" height="72" /><a href="/">User Guide</a></a></header> <nav class="main desktop"> <ul class="navigation"> <li> <a id="menu-84" title="Frequently Asked Questions" class=" main" href="/faq">Frequently Asked Questions</a> </li> <li> <a id="menu-111" title="API" class=" main" href="/api">API</a> </li> <li class="active"> <a id="menu-2" class=" main mainactive" href="/basics">Basics</a> <ul> <li> <a id="menu-20" href="/basics/getting-started">Getting started</a> </li> <li class="active"> <a id="menu-17" class=" active" href="/basics/structure-terminology">Structure</a> </li> <li> <a id="menu-35" href="/basics/system-requirements">System requirements</a> </li> <li> <a id="menu-18" href="/basics/artboards">Responsive Artboards</a> <ul> <li> <a id="menu-47" href="/basics/artboards/setup">Bleeds</a> </li> </ul> </li> <li> <a id="menu-21" href="/basics/managing-articles">Articles</a> </li> <li> <a id="menu-66" title="Restore older versions of saved articles" href="/basics/versioning">Saving & versioning</a> </li> <li> <a id="menu-22" href="/basics/images">Images</a> </li> <li> <a id="menu-39" title="Webfonts" href="/basics/webfonts">Webfonts</a> </li> <li> <a id="menu-65" href="/basics/saved-styles">Saved Styles</a> </li> <li> <a id="menu-56" title="Actions" href="/basics/actions">Actions</a> <ul> <li> <a id="menu-37" title="popups" href="/basics/actions/popups">Popups</a> </li> <li> <a id="menu-57" title="Internal, external and email links" href="/basics/actions/links">Links</a> </li> <li> <a id="menu-73" title="Social media sharing and follow actions" href="/basics/actions/social-media">Social Media</a> </li> </ul> </li> <li> <a id="menu-12" href="/basics/animations">Animations</a> </li> <li> <a id="menu-76" title="Guides: grids, columns & layouts" href="/basics/guides-grids">Guides: grids & columns</a> </li> <li> <a id="menu-117" href="/basics/table-of-contents">Table of Contents</a> </li> <li> <a id="menu-44" href="/basics/previews">Previews</a> </li> <li> <a id="menu-45" href="/basics/publishing">Publishing</a> </li> <li> <a id="menu-120" href="/basics/managing-editions">Exporting/Importing editions</a> </li> </ul> </li> <li> <a id="menu-8" class=" main" href="/areas">Areas</a> <ul> <li> <a id="menu-43" href="/areas/heading">Heading</a> </li> <li> <a id="menu-24" href="/areas/text">Text</a> </li> <li> <a id="menu-40" href="/areas/section">Section</a> </li> <li> <a id="menu-25" href="/areas/image">Image</a> </li> <li> <a id="menu-123" href="/areas/gallery">Gallery</a> </li> <li> <a id="menu-26" href="/areas/video">Video</a> </li> <li> <a id="menu-59" href="/areas/advanced">Advanced areas</a> <ul> <li> <a id="menu-28" href="/areas/advanced/twitter">Twitter widget</a> </li> <li> <a id="menu-29" href="/areas/advanced/facebook">Facebook widget</a> </li> <li> <a id="menu-27" href="/areas/advanced/soundcloud">Soundcloud widget</a> </li> <li> <a id="menu-36" href="/areas/advanced/iframe">Iframe</a> </li> <li> <a id="menu-119" href="/areas/advanced/audio-player">Audio player</a> </li> </ul> </li> </ul> </li> <li> <a id="menu-60" class=" main" href="/layout">Layout Techniques</a> <ul> <li> <a id="menu-61" href="/layout/custom-columns">Custom columns</a> </li> <li> <a id="menu-62" href="/layout/scrolling-content-fixed-background">Scrolling content over fixed background</a> </li> <li> <a id="menu-63" href="/layout/anchoring-content-to-edges">Anchoring content to edges</a> </li> <li> <a id="menu-124" href="/layout/sticky-content">Sticky content</a> </li> </ul> </li> <li> <a id="menu-48" class=" main" href="/workflow">Creating digital magazines</a> <ul> <li> <a id="menu-49" href="/workflow/concept-target-audience-and-goals">Concept, target audience & goals</a> </li> <li> <a id="menu-50" href="/workflow/page-plan-and-publication-structure">Page plan & publication structure</a> </li> <li> <a id="menu-51" href="/workflow/graphic-design-and-layout">Graphic design & layout</a> </li> <li> <a id="menu-52" href="/workflow/developing-master-pages-and-styling">Developing masters & styling</a> </li> <li> <a id="menu-53" href="/workflow/content-development-and-integration">Content development & integration</a> </li> <li> <a id="menu-54" href="/workflow/getting-it-out-there">And then… getting it out there!</a> </li> </ul> </li> <li> <a id="menu-10" class=" main" href="/design-guidelines">Design Guidelines</a> </li> <li> <a id="menu-16" class=" main" href="/statistics-analytics">Statistics & Analytics</a> </li> <li> <a id="menu-132" class=" main" href="/modules">Modules</a> <ul> <li> <a id="menu-130" href="/modules/dataset-module">Dataset module</a> </li> <li> <a id="menu-133" href="/modules/translate-module">Translate module</a> </li> <li> <a id="menu-115" href="/modules/feedback-module">Feedback Module</a> <ul> <li> <a id="menu-116" title="How to create a form" href="/modules/feedback-module/how-to-create-a-form">How to create a form</a> </li> <li> <a id="menu-118" title="Feedback Results" href="/modules/feedback-module/feedback-results">Feedback Results</a> </li> </ul> </li> <li> <a id="menu-85" href="/modules/subscriber-module">Subscriber Module</a> <ul> <li> <a id="menu-86" href="/modules/subscriber-module/acquiring-subscribers">Gaining subscribers</a> </li> <li> <a id="menu-95" href="/modules/subscriber-module/adding-subscribers">Adding subscribers</a> </li> <li> <a id="menu-96" href="/modules/subscriber-module/subscriber-list">Subscriber list</a> </li> <li> <a id="menu-87" href="/modules/subscriber-module/push-notifications">Push notification</a> </li> <li> <a id="menu-97" href="/modules/subscriber-module/email-notification">Email notification</a> </li> <li> <a id="menu-98" href="/modules/subscriber-module/subscriber-settings">Subscriber settings</a> </li> <li> <a id="menu-99" href="/modules/subscriber-module/sending-notifications">Sending notifications</a> </li> <li> <a id="menu-100" href="/modules/subscriber-module/notification-progress-history">Notifications progress & history</a> </li> <li> <a id="menu-101" href="/modules/subscriber-module/notification-analytics">Notifications analytics</a> </li> <li> <a id="menu-83" title="Web Push certificate" href="/modules/subscriber-module/web-push-certificate">Web Push certificate</a> </li> <li> <a id="menu-112" title="Transfer Zapier Mailchimp" href="/modules/subscriber-module/transfer-zapier-mailchimp">Transfer Zapier Mailchimp</a> </li> <li> <a id="menu-113" href="/modules/subscriber-module/connecting-mailchimp-zapier-h5mag">Connecting Mailchimp with H5mag using Zapier</a> </li> <li> <a id="menu-114" href="/modules/subscriber-module/automate-referrals-zapier">Automate Referrals Using Zapier</a> </li> </ul> </li> </ul> </li> <li> <a id="menu-6" class=" main" href="/advanced-features">Advanced Features</a> <ul> <li> <a id="menu-55" title="CSS & Javascript" href="/advanced-features/custom-scripting">CSS & Javascript</a> </li> <li> <a id="menu-104" title="Authentication" href="/advanced-features/authentication">Authentication</a> </li> <li> <a id="menu-15" title="URL structure" href="/advanced-features/url-structure">URL structure</a> </li> <li> <a id="menu-46" href="/advanced-features/custom-navigation-bar">Navigation bar</a> </li> <li> <a id="menu-77" href="/advanced-features/toc-styling">TOC styling</a> </li> <li> <a id="menu-74" href="/advanced-features/scrollbar-styling">Scrollbar styling</a> </li> <li> <a id="menu-3" title="Keyboard shortcuts" href="/advanced-features/keyboard-shortcuts">Keyboard shortcuts</a> </li> <li> <a id="menu-78" href="/advanced-features/sharepoint">Access Control using Microsoft 365</a> </li> <li> <a id="menu-79" href="/advanced-features/autoplay">Autoplay</a> </li> <li> <a id="menu-103" href="/advanced-features/okta-integration">Okta integration</a> </li> <li> <a id="menu-80" href="/advanced-features/ms365-integration">User Provisioning via Microsoft 365</a> </li> <li> <a id="menu-102" title="After Effects" href="/advanced-features/vector-animations-using-adobe-after-effects">After Effects</a> </li> <li> <a id="menu-106" title="Adobe Animate" href="/advanced-features/adobe-animate">Adobe Animate</a> </li> <li> <a id="menu-109" href="/advanced-features/building-a-h5mag-app-using-react-native">Building a H5mag App using React Native</a> </li> <li> <a id="menu-129" title="Presentation Mode" href="/advanced-features/presentation-mode">Presentation Mode</a> </li> </ul> </li> </ul> </nav> </aside> <main> <form method="get" action="/search" class="search"> <input type="hidden" name="page" value="1"> <input type="text" name="q" value="" class="text"></input> <input type="submit" class="button" value=""> </form> <article> <h1>Structure</h1> <section><p>To get the most out of H5mag it is important to understand the structure of a publication.</p> <ul> <li><strong>Project:</strong> The project is the root of your publication. It defines the master articles (templates), analytics but also the URL of your publications for all editions. The project basically describes your publications branding.</li> <li><strong>Edition: </strong>Every publication has at least one edition. You can give an edition a custom style. For example, make your x-mas edition red, green & gold!</li> <li><strong><a href="/basics/managing-articles">Article</a>: </strong>An edition consists of many articles. Basically the slides (or pages) you see when you swipe through the magazine on your tablet. Articles can be arranged using chapters, or shown just linearly. A master article is a quick way to start new articles. It is a copy of an article you’ve made before, which for example already has some basic content, animations or styling. Like a template! The article sidebar and area tree are tools to inspect and modify the the structure of your publication.</li> <li><strong><a href="/setting-up-your-account/artboards">Artboard</a>:</strong> Every article is made up out of several artboards which allow you to create a responsive magazine with optimized layouts for different screen sizes and orientations. Each artboard has the same content, but it can be styled in different ways to fit the target device the best.</li> <li><strong><a href="/areas">Area</a>: </strong>All content within an article consists of areas. Areas are the components of your publications such as text, an image, a video or even something more complex like a Twitter widget. Some areas can contain other areas, such as section, popup and gallery.</li> </ul> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </section> <div class="last-modified">Last modified: <time>Thursday, 04 January 2024 - 16:26:44 CET</time></div> </article> <nav class="breadcrumbs"> You are here: <a href="/">H5mag User Guide</a> > <a id="breadcrumbs-2" class=" main mainactive" href="/basics">Basics</a> > Structure </nav> </main> </div>  <script type="text/javascript"> var _paq = _paq || []; _paq.push(["trackPageView"]); _paq.push(["enableLinkTracking"]); (function() { var u=(("https:" == document.location.protocol) ? "https" : "http") + "://piwik.schuttelaar.net/"; _paq.push(["setTrackerUrl", u+"piwik.php"]); _paq.push(["setSiteId", "30"]); var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript"; g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s); })(); </script>  </body> </html>

CINXE.COM

Structure - H5mag User Guide