Our microsite editor gives you control over what your end users will see by letting you customize layouts, pages, content, and branding elements like fonts and colors. This document explains the editor’s interface and provides information about how microsites are structured, including layouts, pages and components. If you’ve used our widget editor before, you’ll find that the microsite editor feels quite familiar–it has a similar interface and many of the same features.
See our other documentation for instructions on Setting up a microsite and customizing its appearance.
The SaaSquatch microsite editor has five main areas:
The left sidebar menu is a collapsible panel to the left of the canvas. Use the Navigate submenu to switch between the microsite editor, the email editor, and the widget editor. The second submenu displays options that change depending on whether you’re in a page or a layout.
Select Layers to see a detailed view of all of the components on your page or layout
Templates takes you to our template pages, layouts, widgets, and more
You’ll see a context-dependent third menu based on your selected page, layout, widget, or email
There are a few building blocks that are important to understand as you customize your microsite: layouts, pages, and components. See our guide on customizing microsites for help with creating, modifying, and personalizing your microsite’s layouts and pages.
Layouts and pages are linked through an inheritance structure. Both pages and layouts can inherit a layout. Pages/layouts that have an inherited layout will have their content wrapped by their inherited layout’s content. For example: if your base layout contains a header image, any pages that inherits the base layout will display the same header image in the same location.
Layouts act as “frames” for your microsite. They’re where you can place components that you want to appear pervasively across the microsite, like headers and banner images.
If you used auto setup to create your microsite, then your site has three layouts by default:
The base layout is where you can place content that you want to appear regardless of which page a user is on and whether they’re authenticated on your site. This is where you can add a header or footer that you want to appear across the site. The base layout also contains the brand container, which manages colors and fonts sitewide.
Both the logged in layout and the logged out layout inherit the base layout.
The logged in layout is where you can add components that all your logged in users will see, regardless of which page they are on. For example, your microsite’s sidebar navigation menu is created through a component in the layout. Because it’s added to the layout, any page that inherits that layout will include that sidebar.
The Logged Out layout is where you can customize what any user who is not currently authenticated will see.
Pages are where you build the content of your site, like program explainers, referral and sharing information, and text/images. In the Settings under the Current Page submenu, you can choose the page visibility and restrict it to:
Verified: Logged in users only
Unverified: Logged in users who have not verified their email address
Public: Viewable by anyone
If you used auto setup to create your microsite, then your site comes equipped with several pages that inherit the logged in and logged out layouts.
Inherited Layout | Page |
|---|---|
Logged in layout | Dashboard |
Activity | |
Edit Profile | |
Logged out layout | Page Not Found |
Email Verification | |
Forgot Password | |
Login and Logout | |
Register | |
Reset Password | |
Verify Email |
Components are individual elements that you can add to your pages and layouts to further personalize your users’ microsite experience. SaaSquatch’s mint components library powers the microsite editing experience.
We’ve grouped common component types together in the Add/Edit menu so that they’re easy to locate. Our doc on Participant Experiences has you covered if you want to learn more about SaaSquatch component libraries in general.