How to Design a Smart Page

Making compelling, 1-1 content is powerful. Making compelling, 1-1 content at scale is costly. Enter smart pages. This article will walk you through the steps to get started with your smart pages. For more detailed information on campaigns read our Smart Page Overview article.

Steps to Designing a Compelling Smart Page

Brand Styling
Section Selection
Contextualizing Your Design
Card Stylization
Determining Personalized Content (Field Merges)
Smart Page Group Template Creation and Editing

Step 1: Brand Styling

One of the most important aspects of Smart Page design is creating a page that resonates with your brand guidelines in order to give it the most professional and polished look. Here are some key things to have on hand before you start configuring a template:

Core brand colors. This could any form of CSS colors, such as be rgba or hex values. Our default template supports up to 4 distinct brand colors.
Brand font.If you use a custom font, you will need to have a publicly hosted link to be able to reference on the smart page. If you use a google font, you will just need to have the font link to add to your page.
A general sense of how any CTAs should look. Do your CTAs have curved boarders? Do they have any hover effects? etc.
Key assets or content you want to utilize. There is a card section included on these pages by default which can house key pieces of content that you want to make available to account visitors. You will need links to the content as well as any graphics that summarize the content, which could include things like stock images, custom graphics, or any other form of graphics.
Forms you may want to embed on the page. Because of the highly personal nature of these pages, smart pages can be a great mechanism for driving conversions. Our default template has sections with some default styling for Marketo and Hubspot forms.
Rep information. (Optional) One of the core uses of Smart Pages is for reps to use in their outreach to accounts. Having rep information on hand, such as names, email addresses, calendar booking links, LinkedIn pages, etc, is a great way to contextualize these pages to your business needs.

Triblio Tip

Smart Pages are powerful resources that can be utilized over the course of the entire buying journey. From Marketing's initial touchpoint, to Sales demoing and nurturing, to onboarding and the customer lifecycle.
With some coordination, you can provides a cohesive experience to prospects and customers alike while simultaneously providing insights and signals to your company regarding their overall interest in the

Step 2: Section Selection

The step of smart page design is deciding what the overall layout of the page will look like. This section selection process will govern the copy and content you will need to complete the page build.

Here are some common layouts that are used in smart pages:

Layout 1

Nav Bar
Hero Section - Great for welcoming visitors to the page and giving people a taste of what to expect
Card Section - Used to provide the key pieces of content for visitors to interact with
Rep Information - Essential for driving follow ups from the page interactions
Footer

Layout 2

Nav Bar
Video Highlight - Provide a more visually way for visitors to be welcomed to the page
Card Section - Used to provide the key pieces of content for visitors to interact with
Form Embed - Drive engaged leads off the smart pages
Footer

Layout 3

Nav Bar
Hero Section - Great for welcoming visitors to the page and giving people a taste of what to expect
Key Insight Highlights - Distill key points for your site visitors to help them understand how you can meet their business needs
Card Section - Used to provide the key pieces of content for visitors to interact with
Footer

By default we have a general template design that includes a lot of options for you to choose from regarding your overall layout. To get going with your section selection, follow these steps:

Navigate to the Smart Page section in the right hand navigation of the Triblio platform
Click the New Smart Page button on the top right of the screen, give it a friendly name and then select the template you want to start building from
In your new Smart Page Group, select the Edit Template button, which will take you into our point-and-click template editor
Click into each section to decide if you want to keep or delete itMove the section up and down the page by using the Move Up and Move Down buttons in the section editor. Delete a Section by clicking the Delete Section button.

Step 3: Contextualizing Your Design

Once you have configured the overall layout of your Smart Page, the next step is to update the overall look and feel of the page to be more in step with your brand colors, fonts, and styles.

A couple of things to know about designing Smart Pages. The pages are standard HTML pages, so any CSS or Javascript as well as any libraries, such as Bootstrap are eligible for designing the pages. Additionally, our card section utilizes Isotope,js for the card layout.

There are two core places for you to input css styling on a given Smart Page:

1) The container HTML:

2) In a given section within the template editor:

Best practice for Section design is to contain all of the necessary layout css to be written within the section itself. You can see examples of this in our default template. Each section contains the necessary CSS for that section in a <style> tag at the top of the Raw HTML, accessible through the Advanced drop down of each section. This is the case for two reasons. First, this makes quick edits to a particular section a lot easier since the governing CSS is localized to the section itself. Second, you can save Sections for re-use on other templates by using the Save Section button. Having all the necessary CSS directly related to the Section allows for easy implementation on future Smart Pages.

If you are using our default template, there is a space for you to input your brand colors in the Container HTML. Inputing your brand colors here will propagate those colors throughout the template and enable you quickly stylize your whole template.

Here is a list of all the things on the page that each of the colors controls:

Primary Brand Color: This primarily handles backgrounds on the page and is paired with the Primary Font Color
- Backgrounds: Hero, Cards, Default Primary CTA, Header Section, Video Box, Form Boxes, Rep Info Background, and Footer
Secondary Brand Color: This primarily handles the main background color of the page and is paired with the Secondary Font Color
- Backgrounds: Nav Bar, Main Page Body (Which includes most of the Sections on the template)
Tertiary Brand Color: Card CTA Color, Default Secondary CTA Color, Section Line Break
Quaternary Brand Color: Key Insight Graphic Backgrounds, Specific Card Styles
Primary Font Color: This governs the color of all text in primary brand color Sections
Secondary Font Color: This governs the color of all text in secondary brand color Sections
Brand Font: This governs the font of the entire Smart Page

Additionally, you can govern the style of your CTAs on the page if the default cta style doesn't suite you:

Once your core Sections are styled, you are ready to finalize the copy in those sections and to progress to card creation and styling.

Triblio Tip

Just getting started with Smart Pages? Choose a prospect or customer stage (such as a certain tier accounts, all decision stage accounts, or all current customers), and design with that stage in mind. Ask these questions to help you think through what content to put on the page:

What content performs the best for this segment?
What information is most important for accounts in this stage to have easy access to?
Am I looking to get form conversions from this segment?

Step 4: Card Stylization:

In the Card Section of the Smart Page Editor, you can manage what content should be included on the page.

Each card has two key sections:

The Upper Image Section:
The Lower Text Section: This section houses the main content of the card
1. Card Title: This should represent what the client will get by engaging with this card. It should be no more than 80 characters.
2. Card Description: This should briefly describe the value of the content that the card represents. It should be no more than 130 characters.
3. Card CTA: This is an optional feature of the default Triblio template and can be utilized by adding a class. The class name should start with "cta--" and then be a hyphen (-) separated call to action, for example: cta--Read-More, cta--Download-Here, and cta--Find-Out-More. These will render as the following on a card as the following: Read More, Download Here, and Find Out More. You can also position the CTA by adding a class cta-center or cta-right to the card (the CTA is positioned to the left by default).

Note: If you want to add this capability to one of your Smart Pages that does not utilize the default template, copy and paste the code located here at the bottom of your Smart Page's Container HTML

To add in new pieces of content to the page by clicking the Add Card button. A dialogue box will open up that will show give you content type options:

Add Link Item: If you want to direct someone to a key piece of hosted content (a blog, a resource, etc.) you can use this option. The card will capture the meta data on the page and load it in as the default copy of the card.

Add Custom HTML: This allows you to design a special card out of HTML. It is great for embedding a small form or other unique piece of content.

Add Video Link: This will render a playable card. It is great for YouTube videos. We recommend using a a card width of 2 for these card types.

Add File: This allows you to add a particular file to the page for download, you can upload it with this card type. The title of the card will be the title of the file. You can update all the additional data points by clicking and editing the card.

Add PDF: This allows you to add a particular PDF to the page for download. The title of the card will be the title of the file. You can update all the additional data points by clicking and editing the card.

Default Styling Available

Additionally, our default Smart Page template has four core card stylings available:

1. The Default Style: All cards added to this page will have this style by default.

2. Mat: To utilize this card style, add the class 'mat' to the card. You can find a live CodePen demo of these card styles here.

3. Stripe: To utilize this card style, add the class 'mat' to the card. You can find a live CodePen demo of these card styles here.

4. Scale: To utilize this card style, add the class 'scale' to the card. You can find a live CodePen demo of these card styles here.

Note: The cards are not designed to be used in combination with one another. Your Smart Page should choose a particular card style and use it universally.

Step 5: Determining Personalized Content (Field Merges):

One of the most powerful elements of Smart Page design is the ability to load content dynamically by account in the form of Field Merges. Consult our Custom Data article to see Smart Page specific guidance on utilizing field merges on your smart page.

In general, the best candidates for Smart Page, account specific personalization are the following:

Highlighting a specific pain points and solution for a given account
Unique account manager, customer success manager, or sales rep information: Images, Contact Info, Name, etc.
Account name
Custom graphics (such as a logo) or video content

Step 6: Smart Page Group Template Creation and Editing

Once you have completed the design of your template, you are ready to convert your design into a Group Template that can be used over and over again.

To do this, just go to the Advanced section of your Smart Page Group and select the Save As a Template button. From there, you will be prompted to give the template a name.

We recommend using a clear name for the template that helps you remember what the page was designed to accomplish, such as "Sales Rep Account" or Customer Success Onboarding.

If you want to edit a template that you have already created, simple navigate to the Smart Pages side navigation in the app, and select the Template Editor button on the top of the page.

Then select the template you want to edit and at the bottom of the modal click edit:

This will take you to a very similar editing experience of the Smart Page group, with additional options to edit the container HTML of the page:

Two things to note about the template editor:

Unlike the standard Smart Page Editor, any changes made to the template must be saved. To preserve your changes, hit the green save button at the top of the template:
Edits to the master Smart Page Group template will NOT propagate to Smart Page Groups that were created from it. Any design changes will need to be made to the Smart Page Group itself.