Add content to your Project Pages

You add content to your page with elements from the element library. Click Add element in the middle of the page, or one of the + buttons between elements, to open the library. Click an element to add it, then click it on the page to change its settings. Page settings such as the style, publication dates and sharing buttons are under Settings in the top bar.

In this section, you will be given an overview of each element. You can always find more detailed instructions on each setting by clicking the ? symbols. You can change the order of the elements by dragging and dropping.

 

I want to add...

Our brand colors, fonts and page style

Click the palette button (Style template) in the toolbar at the top right of the editor and pick a template. A template sets the fonts, colors, page background and how rounded the corners of containers and buttons are.

To create your own template or edit one, choose Manage style templates at the bottom of the list. This opens Settings > Style, where you can click Create new. Templates are shared, so you can also pick a style that has been used on another page or survey. See Brand your Project Pages.

A heading or a sub-heading/section heading

Choose the Heading element. You can choose the size (H1 to H4) and style it as a Title or a Subtitle. To put a title on top of a large picture, use the Image title setting of the Page-wide image (hero image) element.

A paragraph or a list of text

Add the Text element to your page. You can change the size and alignment of the text. Markdown is on by default, which lets you add links, bullet point lists and bold or italic text. Choose Plain text if you do not want markdown. To set the text in two or more columns side by side, increase Text columns. A Columns gap setting then lets you adjust the space between them.

Some more space between different elements

To add some air between the elements, add a Spacer element (or several!) to your page. Set the height of the space, or switch on Show horizontal line to draw a line. This is useful if you want a clearer division between two sections of the same page. Every element also has Margins (Minimal, Comfortable, Spacious or Custom) to set the space around it.

A link to another website

There are three options for this.

Option 1: Use the Hyperlink element. Enter a link title and the web address. This creates a neat embedded link.

Option 2: Use markdown language to embed a link into a paragraph of text or a list. Add the Text element. Make sure that Markdown is turned on in the element's settings. Write the title of the link in square brackets, followed by the URL in normal brackets. Make sure that there's no space between the two!

For example:

[Maptionnaire](new.maptionnaire.com)

Option 3: Use the External link element. This shows the link featured prominently in its own 'box' on the page, with a title, description, button text and a featured image. To show several of these boxes together, use the External link grid element.

A link to another Maptionnaire survey or page

To link to a survey, add a Questionnaire link element and choose the survey. If the survey has several languages, you can also choose which Questionnaire language the link opens. Type the text of the button in Button text. The title and the description shown in the card are taken from the questionnaire's Card settings (which can be edited in the Card tab of Questionnaire settings).

To link to another Project Page, add a Page link element and choose the page. If you like, choose one of its sections as well. You can add an image, a title, a description and the button text for the card.

To feature several pages together as cards, use the Grid or Carousel element. See Link pages together to create a website.

An embedded Maptionnaire (Iframe)

You can show a questionnaire directly on the page, without respondent having to navigate to it  through a link. Use this feature to ask questions and/or to include an interactive map on the page.

If you want the iframe to show a page that's not the first page of the questionnaire,  add the following parameter to the questionnaire URL:

?startPage=[number of page]

If you want to make sure that respondents cannot move to other pages of the survey, add this to the URL:

?disableNavigation=true

To use both in the same iframe, use ?startPage=[number of page]&disableNavigation=true. In the element's settings you can also switch Use full width on or off and set the Height of the iframe (600 by default). See Embed a survey or parts of it to a Project Page (Iframe).

A timeline that shows all the important times and events in my project

This element allows you to list important dates and times (e.g. deadlines) related to your project. They are shown in order on a timeline. Please note that Maptionnaire currently uses the MM/DD/YYYY format for dates.

Under the Basic settings tab:

  • Title and color of the timeline
  • Each event: its title, description and start date and time

Under the Extra settings tab of each event:

  • A date granularity: show the event down to the minute, as a day, or just the month.
  • An event end, and a setting to show the event duration.
  • Formatting: choose Plain text or Markdown (which allows bold, italics and links in the event text).
  • An event link.

Under the Extra settings tab of the timeline:

  • The text size.
  • Whether the timeline is horizontal (otherwise it is vertical).
  • Whether to show the title on top, sort by start date, show the timezone, hide progress, embed links to event titles or number the list.

 

In this video you can see two ways in which the timeline element can be built on the page:

An image

There are different ways to add images to a page, depending on where and how you want to use the image.

  • The Image element can be added anywhere on the page, or inside a Columns element. Upload an image or choose one you have used before. You can set its alignment, width and corner roundness.
  • The Page-wide image (hero image) is a banner-type image spreading across the entire width of the page. You can set its height and add a title on top of it, with a dark overlay and a white title color to make the title easier to read.
  • The Columns element lets you use a picture as the background of a section, or beside your text.
An audio clip

You can embed an audio clip on your page. Add the Audio element and upload the audio file. There is also a Show attribution setting.

A video clip

You can embed videos hosted on YouTube and Vimeo to your pages by using the YouTube video and Vimeo video elements. Both can show captions, and you can choose the caption language.

For a YouTube video, enter the URL (web address) of the video.

For a Vimeo video, insert the Video ID, which is the number series at the end of a Vimeo share link:

vimeo.com/[Video ID]
A PDF (e.g. a privacy policy or accessibility document)

The File download element is the most suitable. It adds a button to your page, which the viewer can click to download the document to read. Upload the file, then set the file name and the button text, and choose the button color and icon.

A social media sharing button

Make it easy for people to share the page with their networks by adding a social media sharing button (or several) anywhere on your page with the Sharing button element. Currently available are Facebook, X, LinkedIn, Pinterest and Reddit buttons. You can also choose the buttons for the whole page under Settings > Interactivity.

A menu to move between parts of the page

Add a Section marker element where each new part of the page should begin, and give it a Section title. A menu of tabs appears at the top of the page automatically. Everything above your first Section marker is the home section. With the # button on the right side of the editor you can choose whether each section opens as its own page (Paginated) or whether all sections stay on one scrolling page (Scrolling), and add a logo and a home tab label. See Link pages together to create a website.

Content side by side, or on a picture or colored background

Use the Columns element. It can show an image or a chart beside your content, or place your content on a colored background. See Customize the layout of a Project Page.

A chart or map of my survey results

Use the Chart element to show a chart you have saved in the analysis tool, and the Response map element to show a map of the responses. See Share charts on a project page and Share map responses on a project page.

A way for visitors to comment

Open Settings > Interactivity and switch on Allow commenting. You can also set the maximum length of a comment under Comment length.

Was this article helpful?
0 out of 0 found this helpful