Settings for Spiralyze PLPs

This page contains specific settings and recommendations for building PLPs in the new paid landing page content type. For general information on the PLP content type and PLP block patterns, see the Paid Landing Page Post-Type page.

For any questions or issues regarding building PLPs within the new content type, reach out to Larry Clem at lclem@2u.com

Building in the program site on production

Program Sites

Moving forward, all Spiralyze PLP builds for program sites builds should be done within the production environment for each program using the Paid Landing Content Type.

Minisites

Spiralyze PLP builds on minisites should be done within the production environment for each minisite, but still using the page content type.

Logging in

Log in to each production environment using the /wp-admin/ path for each site. For example on UNC-MPH, log in at https://onlinemph.unc.edu/wp-admin/

If you’re not able to log in via the spiralyze email / password , please login through the SSO/SAML option using the Spiralyze account with the 2u email ( gretnasaba@2u.com )

The PLP plugin must be enabled in order to use the Paid Landing Page content type. If you do not see the ability to add a Paid Landing Page via the content type, please reach out to Larry Clem at lclem@2u.com to enable the plugin.

Editor Access Permissions

The current editor access permissions allows you to create PLPs/Pages, save changes, and edit published PLPs/pages, but Larry from MKTG-TECH ( lclem@2u.com )will need to review and publish any pages / updates to make them live . Please save the latest drafts and provide the public preview link when building pages.

Do Not Check “Pending Review”

In the page/PLP settings, do not check “Pending Review” on any new or existing pages. There is a bug with this content moderation feature that will create duplicate pages.

Anatomy of a WordPress PLP

Below is a breakdown of the block structure used for a typical PLP built with the new Paid Landing Page Content Type:

  • Header Override Block – to remove logo links and hide header for desktop/tablet
  • Hero Block – PLP Variation
  • Body content blocks as needed, built via block patterns
  • Footnotes – built manually for now until the footnotes block is finished
  • Footer Override Block – set to ‘PLP’ style – make sure links are entered as relative paths

See the example PLP here to see how a PLP should be constructed.

General Conventions to Follow Across PLPs

There a few accessibility items to standardize across PLPs as a part of the PLP migration that are new since the initial ATF rollout:

  • The page background color should be set to white via the body background color page setting
  • The lead form background color should be set to the #F9F9F9 gray color, you may need to add this color in the global settings if it’s not there already.
  • The button text in the body content should be title case, not all caps, i.e. “Request Information”, not “REQUEST INFORMATION”
  • The form should have an id of ‘form’ and anchor link the button with #form
  • All notice banners should be hidden. The ability to hide notices via the notice block controls will be available in our WordPress theme 6.3 release (due mid August). In the meantime, use this CSS to hide as a workaround:
    • .siteNotice, .alert-covid {display:none;}
  • Page level settings in the ‘Paid Landing Page’ tab in the right sidebar settings:
    • PLP Sitemap Settings: Add the content provided by CRO for the “Approved for Agency” and “Description” fields.
    • Permalink, URL slug: this will be the url slug that appears after the /requestinfo/ parent path. For example, entering “mph-hero” will result in a URL path of /requestinfo/mph-hero/
    • In the Yoast settings at the bottom of the page, you need to enter an “SEO Title” – this can match the title in the tab for the control page. For example on https://speech.emerson.edu/requestinfo/msl-spz-atf/ , the SEO Title is “Speech@Emerson | Online”
    • The PLP post-type is no-index / no-follow by default

Hero Block Settings

Below are some recommended starting points for some select settings in the hero block.

  • Mobile background color set to white
  • Lead form background color set to #F9F9F9 (this is to meet link contrast requirements when privacy policy links appear at the last step of the form).
  • Lead form HTML ID should be set to “form”
  • Lead Form fields to include:
    • Title – example: “Get Admission and Tuition Information”
    • Intro text – example: “Answer a few quick questions to determine if Speech@Emerson is a good fit for you.”
    • Form ID – example: 232
    • Form Grouping – example: ec-msl
    • Thank You URL – use relative path – example: /requestinfo/thank-you/
    • Splash Creative – provided by CRO (Simonia/Tim) – example: ucb_mids_hero
  • The arrow is generated via SVG, you can provide an arrow color hex value in the hero block settings
  • ‘School logo’ should be hidden on mobile
  • ‘Hero text’ font size – 20px – this was the default size for our rollout of above-the-fold PLPs, but can be adjusted per page depending on the amount of text.
  • List block within hero:
    • List font size: 18px – – this was the default size for our rollout of above-the-fold PLPs, but can be adjusted per page depending on the amount of text.
    • override icon code to enter for the icon settings: e92d – paste this into the override field. This will generate the outlined checkmark icons
    • Icon size: 24
    • Line height: 24
    • Left margin: 36
    • Right margin: 30
    • Bottom margin: 16
    • Icon color can be a theme color or you have the option to provide a custom hex color if needed