Superpages

Overview

Superpages are a special kind of WordPress content type that 350 developed to give you full control over the page, top to bottom, left to right. They’re composed of “sections”, individual full-width content areas that can have their own background images, width, color and more. This page is a superpage, for example!

Pros:

Customizable – You can customize almost everything about a superpage.

Versatile – A superpage can be an event registration page, a multimedia reportback, an annual report, almost any kind of page — even multiple different kinds of pages at once.

Highly visual – Big background images, lots of white space, large blocks of color — superpages are 350’s most visual engaging kind of page.

Cons:

Complicated – Compared to normal page, superpages are more time-consuming to create, harder to edit, and easier to break.

Blank Slate – Because superpages are designed to be flexible, they aren’t necessarily optimized to excel at any one task. Don’t forget about ActionKit pages, blog posts and regular pages.

Can get slow – Superpages lend themselves to including lots of big photos, which can make pages slow to load, especially for people on mobile phones or with slower internet connecctions.

Types of Superpage Sections

The “Add Section” menu on a superpage edit screen.

Text/HTML

Text/HTML sections let you add and edit content just like you would on a normal page or a blog post. It uses a WYSIWYG editor that includes buttons for formatting text and uploading images.

Note: if you’re having trouble including videos, embed codes, or multiple columns in a Text/HTML section, you might try a Code section instead — the WYSIWYG editor tries to “autocorrect” code, which can unintentionally break things sometimes.

Code

Code sections are similar to Text/HTML sections but without the WYSIWYG editor — they’re useful for situations where you need to enter HTML, CSS and/or Javascript directly, without it being modified.

Nav Menu

Nav Menu sections let you include menus from WordPress’ built-in Menus system in your superpage. Just add the “Menu Name” as it appears on the “Menus” page (for more information on adding/editing menus, see this guide).

Under “Advanced Options”, you’ll find extra options for controlling how the menu displays on different size screens.

ActionKit Form

ActionKit Form sections let you set up forms that send data to 350’s database. Here is a step-by-step guide to setting up an ActionKit Form section (coming soon).

Site Content

Site Content sections display things like blog posts, press releases, and other types of content that usually live outside of superpages. You can use any of the parameters available through WP_Query to tweak what’s displayed in a Site Content section.

Some examples of things you could do with a Site Content section, (depending on what kinds of content you have on your site):

the 10 most recent Press Releases tagged with “Break Free”
all the Team Members who belong to the category “Fracking”, sorted alphabetically
all the Campaigns created in 2014
the 5 newest Resources with a value of “Visual” for the custom taxonomy “Learning Style”

Special Feature: If you set the “posts_per_page” parameter to “1”, the full content will be displayed instead of just a summary. In other words if you’re only showing one of something, it will show the full text. If you’re showing more than of something, it’ll display a compact, summarized version of each one.
One common use for this feature is displaying the most recent press release on a Media page — you can display the full text of the newest press release, and then display a regular list of older press releases.

Ticker (requires plugin)

Note: If you want to use a Ticker section in your superpage, you must activate the “Ditty News Ticker” plugin first — if you don’t see Ditty News Ticker in your list of plugins, contact a 350 developer!

Tickers sections are way to integrate Ditty News Ticker into superpages — the most common use is to create a one-line, horizontally-scrolling list of short text updates. Here’s an example from the 2014 People’s Climate March website:

baseline-ticker-example

Tickers are good for adding excitement to a page, like when you’re covering a live event, for example. To see how a basic Ticker is set up, here are screenshots of the Ditty News Ticker settings page (1) (2)