Skip to main content

Finalsite Explore: Designing a Great Explore Page

Claire Frank
  • Updated

Overview 

The Explore Schools page in Finalsite Explore provides details about each school in the group. It's essential to make this page engaging so that you can nurture families towards applying. You can design this page under Settings > Portal > Parent Portal Content > Finalsite Explore Page.

As a best practice, you should:

  • Keep this page up to date.
  • Include important deadlines and details that prospective families should know about.
  • Add links for families to register for highlighted events.
  • Design your page to stand out.

Read on to learn some tips and tricks for making this page beautiful.

GIF of scrolling on an example Finalsite Explore page

In this Article

Where can you update this page?

To update the design of the main area displayed when a parent chooses to explore your school, navigate to the Parent Portal Content page (located under Settings > Portal > Parent Portal Content > Finalsite Explore Page).

Selecting Explore Content will open the template window which allows you to design your Explore page.

Banners

Let's begin with banners. Incorporating a captivating banner at the top of the template is a warm invitation to capture attention.

Here's how to add your school banner to the Explore Template: 

  1. Within the template editor, select the image icon. You can then choose whether you want to upload an image file from your computer, upload an image from a link, or select one of the images that you already have stored in Finalsite Enrollment. 
  2. Upload your image.
  3. Click on the image to see the image edit options. You can use these options to resize your image, add links, alternative text, and more! In the example GIF below, I've adjusted the width to 1440px and left the height to "auto" adjust. 
  4. Always save your changes by clicking Save in the template.

GIF of inserting an image into a template

Here are our general recommendations for the best practices when it comes to Banner formatting:

  • 1440px wide
  • Max. 250px high  
  • If you use a full size 1440px banner, the logo will automatically scale to narrower widths (such 1200px wide or 1024px wide)
  • File size should be 250kb or less
  • Can be JPG or PNG (PNG recommended for logos)

Images

Including images in your Explore page is simple and they're a great way to link folks to pages within your school's website.

Pro-Tip: for the most consistency in your template (or any email or other template) it's a good idea to check your image sizing before loading them into Finalsite Enrollment. If you upload images that are the same size, your template will look a little cleaner.

In this example, we're going to walk through adding inside a table as a trick to format them nicely. We'll also make those images clickable so that parents can get right to your webpage.

How to use a table to nicely format images (and make those images into hyperlinks):

Part 1: Adding your images within a table:

    1. Select the table icon.
    2. Select the number of rows for the table. In the example below, we wanted to add 3, nicely spaced images for a good clean look so we included 3 rows.
    3. Click into one of the rows and select the image icon to insert your image into the table. If you get a "file is too large" error message it means that you need to reduce the size of the image before trying again. 
    4. Repeat by adding images to the other two rows.
    5. Click on the table (not the images) and use the edit options to remove the table boarder for a cleaner look.
    6. Always save your changes by clicking Save in the template.

GIF of adding images within a table

Here's a pro tip: Use this same method to cleanly display a row of text within your template as seen in the GIF below. 

GIF of adding a text table in a template

Part 2: Making your images clickable:

  1. Click on one of your images within the table.
  2. Select the Insert Link option and add your link. Be sure to click "Open in a new tab" when adding the link.
  3. Repeat with each photo in the table so that when each is clicked, it will bring parents to the page you've linked. 
  4. Always save your changes by clicking Save in the template.

GIF of inserting a link on an image

Text Edits

You can edit the text within your template so that it stands out in some areas where you'd like to draw attention to it. When it comes to editing text, you can change the header style, color, font size, and font of the text in your template. You can even use the link option to hyperlink your text so that it takes the parent to the webpage of your choice.

In this example, we'll walk you through adding headers and adjusting their color within your template.

  1. Highlight the text that you'd like to edit.
  2. Select the paragraph icon to choose a format. In this example, I've used the Heading 2 option for my header text.
  3. Select the text color icon to choose a color. In this example, I've inserted a hex code so that I could use a specific color. 
  4. Always save your changes by clicking Save in the template.

GIF of updating header text in a template

Layout Example 1

In this section and the one below, we'll look closer at two example layouts that you can follow to design your template page.

For the first example, the school uses a banner at the top with a brief descriptive text area underneath followed by a three-image table with text and links underneath.

Hint: You can use the same method described above to insert a table and then include text within each row. You can then make the table hidden for a clean look.

GIF of an example Explore Page

Use this code to get started with the above template!

Copy the code below and paste it into your Shared Portal Page template (within the Parent Portal Content page).

Use the text within the template to guide where to add your Banner, Intro Text, Image Table, and Contact Links.

Tips

  • Erase the text at the top and upload your banner image there.
  • Update the text below the banner to a heading title for the intro paragraph below.
  • Use the text area below to enter some introductory text about your school.
  • In the first table section below that, erase the text in the table sections one by one and upload an image into each of the sections. 
  • In the second table section, erase the template text and include a title and then a description for each of the three table sections. Optionally, hyperlink the titles to link families to pages on your website.
  • At the bottom, change the text in the links area to represent the page you are linking to and turn each or some of them into a hyperlink.
<p><img src="https://s3.us-east-1.amazonaws.com/sa-assets-production/file_resources/6d884a65-ff88-11eb-81f5-02d5c4214917/3ee91a5e-2297-11ef-8289-66f0d9220171.png?1717521846" class="fr-fic fr-dib"></p>

<h1 style="text-align: center;"><span style='font-family: "Times New Roman", Times, serif; color: rgb(27, 29, 77);'>
Title (replace with your intro title)</span></h1>
<p style="text-align: center;">
<span style='font-size: 18px; font-family: "Times New Roman", Times, serif;'>
Replace this text with an intro paragraph about your school.</span></p>

<table class="fr-no-borders" style="width: 100%; margin-left: calc(0%);">
 <tbody>
 <tr>
 <td style="width: 33.3333%;"><img src="https://s3.us-east-1.amazonaws.com/sa-assets-production/file_resources/6d884a65-ff88-11eb-81f5-02d5c4214917/4cbea612-2297-11ef-9c61-22dfce22ab79.png?1717521869" class="fr-fic fr-dib"></td>
 <td style="width: 33.3333%;"><img src="https://s3.us-east-1.amazonaws.com/sa-assets-production/file_resources/6d884a65-ff88-11eb-81f5-02d5c4214917/55447faa-2297-11ef-8e81-be63cfdb056b.png?1717521883" class="fr-fic fr-dib"></td>
 <td style="width: 33.3333%;"><img src="https://s3.us-east-1.amazonaws.com/sa-assets-production/file_resources/6d884a65-ff88-11eb-81f5-02d5c4214917/5c303df4-2297-11ef-905d-2e4c760dfc2c.png?1717521895" class="fr-fic fr-dib"></td>
 </tr>
 <tr>
 <td style="width: 33.3333%; padding: 10px; vertical-align: text-top;"><span style='font-family: "Times New Roman", Times, serif; font-size: 18px; color: rgb(27, 29, 77);'><strong>Enter Table Section 1 Title Here</strong></span>
 <br>Enter short description here.
 <br>
 </td>
 <td style="width: 33.3333%; padding: 10px; vertical-align: text-top;"><span style='font-family: "Times New Roman", Times, serif; font-size: 18px; color: rgb(27, 29, 77);'><strong>Enter Table Section 2 Title Here</strong></span>
 <br>Enter short description here.
 <br>
 </td>
 <td style="width: 33.3333%; padding: 10px; vertical-align: text-top;"><span style='font-family: "Times New Roman", Times, serif; font-size: 18px; color: rgb(27, 29, 77);'><strong>Enter Table Section 3 Title Here</strong></span>
 <br>Enter short description here.
 <br>
 </td>
 </tr>
 </tbody>
</table>
<p>
 <br>
</p>
<hr style="text-align: center;">
<p style="text-align: center;"><span style="font-size: 16px;">
ENTER LINK 1 TITLE</span> | 
<span style="font-size: 16px;">
ENTER LINK 2 TITLE</span> | 
<span style="font-size: 16px;">
ENTER LINK 3 TITLE</span></p>

Layout Example 2

For this second example, the school uses a banner at the top, followed by descriptive text and then another 3 image table with hyperlinked images, and, at the bottom of the page, they've included links to different pages within their school's webpage.

GIF of an example explore page

Use this code to get started with the above template!

Copy the code below and paste it into your Shared Portal Page template (within the Parent Portal Content page).

Use the text within the template to guide where to add your Banner, Intro Text, Image Table, and Contact Links.

Tips

  • Erase the text at the top and upload your banner image there.
  • Use the text area below to enter some introductory text about your school.
  • In the table section below that, erase the text in the table sections one by one and upload an image into each of the sections. Optionally, turn those images into links.
  • At the bottom, change the text in the links area to represent the page you are linking to and turn each or some of them into a hyperlink.
<p><img src="https://s3.us-east-1.amazonaws.com/sa-assets-production/file_resources/6d884a65-ff88-11eb-81f5-02d5c4214917/f628c87e-229a-11ef-859a-cda91c5ced9c.png?1717523441" class="fr-fic fr-dib"></p>


<p style="text-align: center;">ENTER YOUR INTRODUCTORY TEXT HERE.</p>


<table style="width: 100%;" class="fr-no-borders">
<tbody>
<tr>
<td style="width: 33.3333%;"><img src="https://s3.us-east-1.amazonaws.com/sa-assets-production/file_resources/6d884a65-ff88-11eb-81f5-02d5c4214917/01442640-229b-11ef-9c5e-9ae9ecc39068.png?1717523460" class="fr-fic fr-dib"></td>
<td style="width: 33.3333%;"><img src="https://s3.us-east-1.amazonaws.com/sa-assets-production/file_resources/6d884a65-ff88-11eb-81f5-02d5c4214917/08dbdb96-229b-11ef-90ba-f668fa31157b.png?1717523473" class="fr-fic fr-dib"></td>
<td style="width: 33.3333%;"><img src="https://s3.us-east-1.amazonaws.com/sa-assets-production/file_resources/6d884a65-ff88-11eb-81f5-02d5c4214917/0e9a15e8-229b-11ef-932b-0c99a3a36da6.png?1717523482" class="fr-fic fr-dib"></td>
</tr>
</tbody>
</table>


<p>
<br>
</p>


<p style="text-align: center;"><span style="font-size: 18px;">Link 1 | Link 2 | Link 3 | Link 4</span></p>

 

Additional Resources

Related articles

Comments

0 comments

Article is closed for comments.