About Pages
Each Page can be made out of different ‘Parts’. Each part has its own look and own function and can be used multiple times per page.
The order in which the parts are displayed on the page can be modified manually. This means that the possibilities are literally infinite! After creating your page you can choose among the following parts and add them to your page!
After creating a page you can add it to the menu. It is also possible to access a page without adding it to your menu. In this case, the page can be found if someone has the right URL (for instance by clicking on a link).
How to add a Page
To create and manage your Pages, go to Dashboard > Stories > Pages.
Create your page by adding some essential information.
- Type: [used by Peppered Consultants only] you probably leave it as it is; normal.
- Title: A title that will be visible on the website
- Dashboard note: Visible only in the Dashboard
- Meta description: For summaries, SEO and socials (OpenGraph)
- Publication date: The publication date is only used for ordering content items among themselves.
Page Visibility Settings
Choose one of the following options:
- Yes: Page is visible on the website to all Visitors
- No: Page is not visible on the website to all Visitors, for instance if you are still working on it.
- Advanced: The banner visibility depends on date settings and visitor tags
Advanced Visibility Settings
Setting a start date and end date can only be done in the Advanced visibility setting. These are optional.
You can also show a banner to (or hide a banner from) visitors with specific visitor tags. With this option you could:
- Create a fundraising funnel: show banner A to the general audience with an invitation to become a member or to donate; show banner B to members or donators with an invitation to become an ambassador; and show banner C to ambassadors to invite them to a special event.
- Do AB-tests (or ABCD….-tests if you like!): divide you audience randomly in groups A, B, etc. and try out a different banner (text/image/video) per group. Sit back and check live behaviour on Google Analytics (with e-commerce tracking) to see which one works best.
- Show content based on segment, profile or persona: are you working with segments, profiles or personas? Maybe young people respond well to a nice image but experience seekers prefer an exciting video. Maybe persona A should see a banner for the brochure, whereas persona B should not be bothered with it.
- Show content based on order history: perhaps you have a festival that you want to show as a fullscreen image to visitors that bought tickets last year, but smaller to others. Or a large banner for an event with classical music only to visitors who have bought tickets to similar events earlier.
- Hide banners from visitors that do not need to see the banner. If you are already a "Friend", you don't need to see banners that advertise becoming a "friend".
- Or surprise us with some other campaign! :)
- Allow indexing: allow search engines (like the search engine of your website, or Google) to include this page in search results.
- SEO-SEA metadata: Fill out the meta title and description fields so that the page is easy to find. If you like to know more about SEO-SEA metadata you can contact our partner Mondo Marketing.
Save your Page, and you can now add Parts to your Page
Page Parts
Every page can be created by adding page parts. Each part is designed to manage a specific type of content and present it in the best ways possible.
There are lots of page parts you can add to your page. You will find them in the drop-down box at the bottom of your page. Once added, all page parts are presented in a list. You can drag & drop parts to change the order of the page parts.
In the manual How to find different Parts and add/change Parameters you will find an extensive list of parameters to be used in the parts
Each page part comes with a set of options and their own specific content management tools.
- Dashboard note is your little helper for internal notes. Very convenient when you are using multiple of the same parts.
- Anchor is the name of the part that is displayed on the website in the subnavigation bar of the page. Leave this empty if you don’t want sub navigation for the page, or give each part an anchor name to enable visitors to jump to the exact part of your page.
- FAQ/Collapsed heading is an optional title you can give the part when you want the content to be able to collapse. When collapsed, the content is not shown. Only the FAQ/Collapsed heading is shown with an icon to open it. This is a perfect way to create FAQ’s of multiple parts.
- Parameters are used to tweak the part. Every part can have a different default set of parameters, and there are a lot of extra parameters that can be added. Most common parameters are the padding top and bottom around the part to create some extra space around the content. Background color is also available, but make sure to keep it close to your standard background color to maintain proper contrast levels with your text.
- Visibility of a page part is a very powerful tool. You can schedule visibility in the “advanced” section, or make sure the part is only visible to (or hidden from) visitors with a specific visitor tag.
Some more information about specific parts:
Header part
The part that is always at the top of the page is the Header part. Here you manage the title (H1) shown on the website. It’s important to always add a title for SEO and accessibility reasons.
A description is also possible (which comes underneath the title).
To add space between the different parts you can add pixels to the parameters "pTop" (padding Top) and "pBottom" (padding Bottom). For instance, 30px to pTop and 30px to pBottom. After saving these parameters you will directly see some space between this part and your next and/or previous part on the page. The default background color is white but you can choose every color you would like, using these HEX color codes.
By adding one or more visitor tags to your part, that particular part will become visible to a selected group of people only.
It is also possible to choose from which date on a part will be shown on the website.
By adding a photo to your header, this media will be shown on top of the page. In the picture below you can see the picture "downloading" on top of the page.
If an image is uploaded in the "header" part, it will always be placed behind the text. So pay attention to whether the text is still easy to read.
It's also possible to show a background video in the header. It will play without sound and replaces the background image. For this to work you will need:
- a header in the "full width" setting. If you are using headers with "boxed" images, you would need to change this by adding the parameter "variant" to the header and set this to "default".
- a background image. Video does not always load correctly on all webbrowsers, so an image as fallback is necessary.
- a new parameter "video" in the header part. Here you can add any Youtube or Vimeo url.
Media Gallery Part
In the "Media gallery" part you can upload one or more photos at a time. You can then use various layouts. You do so by setting the parameters to the desired setting. This part offers different settings for what needs to be done if there is only one image (single dropdown), but also settings in case of multiple images within the same part (look at the multi dropdown). The look depends on the amount of uploaded images.
Options for a single image
Full width
Boxed
Boxed with text on top
Boxed with text on the right
Options for multiple images
Full width slideshow
Full width grid two columns
Full width grid three columns
Three tiles
Five tiles full details
The background color and padding (above and below) are adjustable in all these variants.
The Title, Description and Credits that you can add for each image are used in some of the above variants. These can be adjusted per image in the "Media" part:
Description part
The Description part is very simple - if you want to place some text on your page, use this part. This can be a short or longer text. If you want to show an introduction to the whole page, or an introduction above or below (for example a media gallery), you can easily add a description part. This can also be used to add a button to your page (here you can read how to create a button anywhere) within a description part.
Video/Audio part
The Video/Audio" part supports Vimeo, Youtube and Soundcloud links. Add the link to the video part.
The Parameters in this part allow you to show a video over the full width, boxed or compact.
Iframe part
Use iFrame to integrate videos, podcast, music playlists or other inspiring content to your page. Read more about iFrames in the website feature manual.
Donations
For more info about the donations part? Check the dedicated manual about donations.
Related articles