1. Opening the Add Elements panel

This article gives you an overview of the Elements on the Readz platform, and how to find them. Elements place and position content on the canvas, and can be placed on the canvas by 'drag and drop'.  To write a sentence on a page, for example, you’d use a Textbox element. To add a picture, select the Image element. There’s an element for every kind of content you’d want to put on the canvas.
1. To open the Elements panel, locate the toolbar on the left side of the screen.
2. Click the plus (+) sign. The Elements panel displays.
The Elements panel contains six main sections with dozens of individual drag and drop tools that you can use to add content, create structure, and engage your audience.  Use your mouse to move up and down the panel and view all the available options.

The elements are grouped into 6 categories:

- structure
- text
- media
- forms
- social
- advanced (Jedi) tools

2. Understanding the Elements panel

Every web page needs structure. If you’re new to web building, page structure is like the 2x4 framing that carpenters use to build a house. Structure, like framing studs, holds everything in place. At a minimum, your page will probably include a Header at the top, a Footer at the bottom, and a Section in the middle to hold text or images.

Some of the element types that you will find in this section are:

Box: the most elementary building block, a box is used - just like a real box - to put other elements in and then group them.
Boxes are versatile though: you can style them, by adding borders, background colors and even background images.

Header & footer: most pages will have these elements. These elements come with some pre-built content (eg a navigation menu) in them and are by default automatically placed on all pages. You can manage these multi-page settings, read more on how to do that here: Managing multi-page elements.

Section: a section element is typically used to logically organize your content elements, and it is always full-width of your page.

Navigation menu: this very versatile element allows you to create navigations very fast. You can use it to build navigation to other pages, or to anchor elements within your page.

Multi-page element: If you want an element to appear on more than one page, this is the element type that you would choose to do that. Read more on this type of element: : Managing multi-page elements.

Horizontal & vertical divider: If you want to add elements to create more negative space, these two element types will serve you well.
You’ll also find elements to take your page to the next level. These include:
  • a grid tool to create mobile responsive tables
  • a carousel to display a rotating selection of images
  • a box with pop-up built onto it

2.1. 'Structure' elements

2.2. 'Text' elements

To add a bit of text, use the Textbox element.

For longer passages, use the Body Text element; you can easily change the boundaries of a long passage to fit any layout.
There are four Text elements. Use the H1 and H2 elements to add pre-formatted headings to the canvas.

Text elements automatically expand vertically to fit the text you place in them. So the more you add or type, the larger (higher) your text box will become.

2.3. 'Media' elements

Add compelling visual content with Media elements.

Image: Image elements can be styled (see styling option on the left panel) and all images are automatically added to the media library.

Slideshow: Upload images from your computer and create a slideshow. Read more about this element type here: Creating Slideshows.
Video: Streaming video content is easy. Drag the Video element to the page and then insert the video’s URL. The Video element works with any online video including Youtube and Vimeo (they need to be set to public, as private videos can't be embedded).

Flipbook: This element will allow you to add a PDF as an interactive flipbook.

Image with download: Sometimes you might want to include a high-resolution image that users can download. Read more on how to do this here: Adding images with download options.

Media placeholder: This element is used when you are designing your layouts or creating templates, or when you do not have the image yet.

2.4. 'Form' elements

Use the power of the web to engage your audience by adding a Form element. There are buttons, boxes, lists, and more. 

To create a form, add the 'empty form' element. Then start adding other elements into this one.

You can also import a form created elsewhere using the Marketo Form element. Drag the form to the web page and then add the Munchkin code and Form Id. 

2.5. 'Social' elements

After placing an Element on the page, click the Create Link button. Enter a URL to your favorite social site or page.
Sharing pop-up: This element will add all the social elements to your page. You can still edit and change these to your liking.

2.6. Advanced or 'Jedi' elements

Add extra functionality to your publication with these elements.

iframe: Use this element to add in functional elements linking to 3rd party software platforms. Add this element and then paste in the code snippet you were given on the source platform.

Script: Used to add scripts to headers - but preferably you would use Google Tag Manager to add and manage your tags.

Dots: a very cool interactive element, which shows your readers where they are on the page.

Search: Got lots of content? Add a Search tool.

Mute background video: The Mute button is a nice touch when you are adding videos with sound. It allows your readers to turn off the sound of the video.

Counter: this interactive element will display numbers counting up or down, and you can control it in settings.

From this menu, you can add any element. Simply click the + symbol, and you can then choose from the list of element types. To use an element, drag and drop it onto the canvas.

Types of Content Elements