By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy

 
Skip to Content

Block Content Use Case

Here is an example of using block content to build urgency. Using a block content banner on the home page, you can choose to target repeat visitors to your site. The first time a prospective student visits your home page they will see the default message. The second time, the call to action escalates and they see an application due message. If they visit a couple more times, you can offer the ability to schedule a personal meeting with an advisor to help them through the process.

Create HTML FilesLink to this section

Default Message HTML

First, let's create the HTML file we will use as the default message in our block content.

  1. Create a personalization folder in Content > Pages.
  2. Click +New.
  3. Select New File.
    • Filename is block-default.html
  4. Click Create.
  5. Create a 1x1 table.
  6. Add text in the table row.
    • For example, You belong at Gallena
  7. Apply a Heading 1 style to the text.
  8. Start a new paragraph in the table row.
  9. Add button text.
    • For example, DISCOVER YOUR PASSION
  10. Go to Source.
  11. Add styles to the table.
    • For example,
<table style="border-collapse: collapse; width: 100%; height: 100%; background-color: #2dc26b;">
     <tbody style="background-image: url('/_resources/images/personalization/block-default.png'); background-color: #cccccc; background-size: cover;">
          <tr>
               <td style="height: 100%; width: 100%; text-align: left; padding-top: 30px;">
                       <h1><span style="font-family: arial, helvetica, sans-serif; color: white;">You belong at Gallena</span></h1>
                       <p><button style="background-color: #e0712b; border: none; text-align: center; padding: 8px 9px; color: white; font-size: 12px;">DISCOVER YOUR PASSION</button></p>
              </td>
          </tr>
     </tbody>
</table>

 

Save and Publish this file.

Now, we can copy this file and edit the text, images, and colors to create the HTML files for our "Applications Due" and "Meet with an Advisor" variations (see Variations HTML, as needed).

You are ready to

Create Dynamic Block Content.

Variations HTMLLink to this section

Code blocks for the variations that your visitors see after their first visit.

Variation 1

On a second visit, give the visitor an urgent call to action. Go to Content > Pages, create a new file in your personalization folder with filename block-variation-1.html

<table style="border-collapse: collapse; width: 100%; height: 100%; background-color: #2dc26b;">
     <tbody style="background-image: url('/_resources/images/personalization/block-variation-1.png'); background-color: #cccccc; background-size: cover;">
          <tr>
               <td style="height: 100%; width: 100%; text-align: left; padding-top: 30px;">
                       <h1><span style="font-family: arial, helvetica, sans-serif; color: white;">Applications Due 5/20</span></h1>
                       <p><button style="background-color: #ff4646; border: none; text-align: center; padding: 8px 9px; color: white; font-size: 12px;">TIME IS RUNNING OUT</button></p>
              </td>
          </tr>
     </tbody>
</table>

Variation 2

On subsequent visits, offer the ability to meet with an advisor. Go to Content > Pages, create a new file in your personalization folder with filename block-variation-2.html

<table style="border-collapse: collapse; width: 100%; height: 100%; background-color: #2dc26b;">
     <tbody style="background-image: url('/_resources/images/personalization/block-variation-2.png'); background-color: #cccccc; background-size: cover;">
          <tr>
               <td style="height: 100%; width: 100%; text-align: left; padding-top: 30px;">
                       <h1><span style="font-family: arial, helvetica, sans-serif; color: white;">Personal Connections</span></h1>
                       <p><button style="background-color: #21c3b6; border: none; text-align: center; padding: 8px 9px; color: white; font-size: 12px;">IT'S THE GALLENA WAY</button></p>
              </td>
          </tr>
     </tbody>
</table>