Area overview

Your H5mag article is built up using areas, the basic building blocks of your online magazine.

Adding new areas and sections

To add new areas and sections, click anywhere on the artboard where there is no other content. You can then see the "add" button appear in the bottom right corner. There you can select the type of area that you want to add. If you want to add multiple areas in one place, choose "section", you can then add the areas to this section the same way.

You can also add a new area in the Area Tree. Just click on plus button next to the article area in the top. 

Area options

Clicking on an area selects it, which is indicated by a yellow border around it. Various buttons will appear along the border, the image below describes each button's function.

Free positioning / in flow

An area or section that is freely positioned can be placed anywhere on the artboard. Click the "pin" icon on the top left corner of an area or section to freely position it, click it again to move the area back to it's inline position. You can move the area by dragging the handle above it. Adjust the width with the handle on the right. The height will automatically adjust to the content.

When to flow your areas or use free positioning

An area that is in flow gets placed below other areas that are in flow. As an example: When you have a block of text on a background picture, it is logical to have a section that is free positioned on the canvas. Within that section, there will be areas which are in flow, with for example first a headline area followed by a text area.

Exact positioning

Click the styling button ()  and click the tab "Position". You can now manually adjust how many pixels the area/section should be away from the top and left side.

Corner alignment

Instead of aligning with the top/left corner you can also align the element with another corner. To align an element with the top right, bottom right or bottom left corner, simply click on the circles next to "Free positioning".

Flexible width and height

You can create elements with a flexible width and/or height by entering values in opposing fields. For example if you enter "0px" in both left and right the element will always appear over the entire width of the article. This very useful when targetting many devices with various screen sizes.

Area tree

The area tree can be found in the right sidebar under the tab "General/Area". The area tree shows all sections and areas in the current article. It works similar to the layers section found in many professional graphics applications.

You can click on any area in the area tree to select it. On the right side two buttons will appear. The settings  button will display a menu with actions to copy, cut or delete the selected area, or paste a cut/copied one underneath. There are also keyboard shortcuts available for these actions. The plus button gives the option to add new areas, such as images or sections.

Master areas

You can set any area that you create as a master area using the area tree. A master area will contain all settings and content at the moment you create it. Your master areas will be available in all your editions and articles.

An example of a situation of where you can use a master area is with the social sharing buttons. You might want to customize the networks shown and the styling. After you have done this once you save it as a master area and can insert the same area on all other articles.

After adding your first master area it will appear in the area picker, in there you will also find the option to manage them.

Common areas

These are the areas you’ll most often use. Areas are normally sequentially placed in the content flow, but all these areas can also be free positioned anywhere on the canvas.

Text

The bread ’n butter of your publication: the text area. Use the text area to add rich text to your publication. The text area features an integrated tool palette to style your text, but you can also edit the HTML source if you so prefer. You can also embed inline images, using our integrated asset picker.

Image

Use the image area to place images in your publication. The images using the image area automatically scaled to the full width of the available space and are file size optimized for the device of the reader — so don’t worry about upload very high resolutions. H5mag accepts JPG, PNG and SVG images.

Video

To add videos to your publication use the video area. The video area allows you to embed video content from YouTube and Vimeo. You can add a poster frame and choose an optional start/end time. To add a video simply copy the YouTube/Vimeo link or embed code in your video area.

Advanced areas

Advanced areas are a great way to create interactivity within your magazine. They are tuned to give a great experience on any device.

Advanced areas work the same as others, but are often dependent on external services from where you need to copy a link or embed code.

Last modified: