When launching a public consultation or project site, keeping your visuals consistent with your organization’s brand identity builds trust and ensures a seamless user experience.
Maptionnaire makes it easy to customize your Project Pages: you set your colors, fonts and corner style once in a style template, then add your logo, graphics and navigation menu. The Container width button next to the palette makes the whole page narrower or wider.
1. Set your brand colors and fonts
-
Click the palette button (Style template) at the top right of the editor, then choose Manage style templates at the bottom of the list. This opens Settings > Style. A style template sets the look of the whole page, so you only have to do this once.
-
Click Create new.
-
Select or upload fonts and their colors.
-
Select a background color for the page and the colors for buttons and other accents: the Primary color, Dark button text and Secondary color. Then choose how rounded the corners of containers and buttons are (None, Small or Large).
-
Remember to click Save!
-
Once created, the style appears in the Style template list (the palette button), where you can pick it for any page. You can return to Manage style templates to edit it if needed. If you want to make this the general style for your team's Project Pages, follow these instructions.
2. Build a Branded Navigation Menu
Add Section marker elements to your page. Each section is listed automatically in a clickable navigation bar at the top of the page, so visitors can jump between the different parts of your project. The old Pages menu element has been retired.
Click the # button in the toolbar at the top right to add your logo to the menu (Logo image), rename the first menu item (Home tab label), and choose whether sections open as separate pages (Paginated) or one long page (Scrolling).
3. Add Branding & Graphics to the Layout and Content with Columns and Images
There are multiple ways to display your brand's graphics, logos, and planning visuals. You can use the Image element (or the Page-wide image element for a large banner at the top of the page) on its own, or drop it inside a Columns element to create structured, visually impressive layouts.
Designing Structure with the Columns Element
The Columns element lets you combine text and graphics side-by-side or in layers rather than just stacking them vertically.
You can upload any images or a graphic to the Columns element, or use a specific color to create an accent strip
Choose Placement and Alignment: Select your Column placement—choose floating if you want your content to sit directly on top of the background image, or docked if you want to feature e.g. text and a graphic side-by-side Then, choose your Content alignment (left or right) and Content width.
Layer Your Content: Click Add element inside the Columns element to drop in text, headings, video clips, or your brand assets.
Featuring Branding & Graphics with the Image Element
Whether placed freestanding on the page (like a large company logo at the top of your page) or nestled neatly inside a Column, the Image element is your go-to tool for visual assets.
The element supports most common file types, including .png and .svg (ideal for crisp vector logos). Image formats that don't display on all devices, such as Apple-only HEIC photos, can't be uploaded: convert them to .jpg or .png first. You can upload them from your computer or grab them from your Materials library if you’ve used them before.
Head to the Image element's settings to adjust the alignment, width and corner roundness of your image.
🔄 Design Flex: You can add multiple Columns elements to the same page to create a dynamic scrolling experience—for example, placing a logo on the left with text on the right, and then flipping the alignment in the next section.
🔍 Bonus Feature: in a Columns element with an image, switch on Click image to view so visitors can open the picture at full size. This is useful if your visuals include detailed project maps or planning drawings that need a closer look.
Take a look at this walkthrough: