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.
1. Set Your Brand Colors and Fonts
The foundational step to branding your Project Page is setting up your organization's color palette and typography. You can manage all of this from the styling settings.
-
Go to Settings and select the Style tab.
-
Click Create new.
Typography: Select or upload your organization's official fonts and choose their default colors.
Color Palette: Choose a background color for your pages, along with specific accent colors that will be applied to interactive features like buttons.
Click Save!
💡 Tip: Once created, your custom style will always be available in the drop-down menu within the Style tab. You can return to edit it at any time, or set it as the general template style for your entire team's future Project Pages.
2. Build a Branded Navigation Menu
The Pages menu element is a bar that features links to different subsections of your project. It’s a great anchor for your branding because you can embed your logo directly into it.
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 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 Column alignment and content area 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 survey) 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). You can upload them from your computer or grab them from your Materials library if you’ve used them before.
Head to Extra settings to adjust the size and alignment of your image, or to add a title and caption.
🔄 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: When you use the Image element, respondents can click it to expand it to full size. This is incredibly useful if your brand visuals include detailed project maps or planning visualizations that require a closer look!