AV狼论坛

| | | |  
Toggle Sub-Menu:

Page Templates

Page and Site Templates

Home Page

The home page template has a fixed layout and components.

The home page hero section has two options: hero section with background video OR hero section with parallax background image.

Hero Section:

  • Video must be 16:9 ratio or wider.
  • Video cannot have audio.
  • Video must not contain essential content.
  • Video element must contain a poster attribute using image that matches the video's aspect ratio.
  • Same image specs above must be applied to section's background-image for mobile, as mobile does not use video (This template uses 1920x1080 version).

Hero Card:

  • Hero card can contain a title (split into a bold first part and non-bold second part), body text, and two links to display as CTAs.

Sliding Promotional Portrait Card Section:

  • Each card must contain an image, a title, a short text entry, and a link to dispay as a CTA.
  • First image must be 303x566 for desktop, 263x351 for mobile.
  • Second image must be 303x404 for desktop, 263x351 for mobile.
  • Third image must be 303x650 for desktop, 263x351 for mobile.
  • Fourth image must be 303x472 for desktop, 263x351 for mobile.
  • Cards are preset to animate in when scrolled to.

Highlights Slider:

  • Slides must contain an image with desktop, tablet, and mobile variants: desktop = 1138x626, tablet = 600x330, mobile = 300x165
  • Slides may have accompanying text to display in a card. Card can contain a title, short text entry, and a link to display as a CTA.

More Info Promo Cards:

  • Section can contain a main title and basic body text at top.
  • Cards each require an image to display, title text, short body text, and a CTA link.
  • Image must be 147x147 and be a cropped circular PNG.
  • Cards are preset to animate in when scrolled to.
  • Background image is 1680x628. White fade effect is controlled by CSS.

Card-Captioned Image:

  • Image fills full width of page, and should be at least 1330px width. Height does not matter, but should not be so tall that wide devices cannot see entire image.
  • Text card can contain a title, basic text, and a link to display as a CTA.
  • Cards is preset to animate in when scrolled to.

Events:

  • Text block section for a simple paragraph and two CTA links.

Social Media:

  • Integrates and dynamically populates with content from linked Instagram account.

Microsite Home

The microsite home page shares many properties of the home page, with some distinctions and unique features.

Hero:

  • Hero is parallax background image only, which follows the same rules as the main home bg image.

Hero Card:

  • Follows the same rules as the main home hero card.

Stats:

  • Up to 3 stats can be used.
  • Top text must be 4-5 characters or less (test extensively if using 5). Top text can be set as a link.
  • Bottom half can contain a moderate amount of plain text. No links.

CTA Card:

  • Can contain a title, body text, and a link to display as a CTA.
  • Background image is 1680x628. White fade effect is controlled by CSS.

Slider:

  • Microsite home slider follows the same rules as the main home slider.

Card-Captioned Image:

  • Microsite card-captioned image follows the same rules as the one on the home page.

Events:

  • Microsite events section follows the same rules as the main home page events section.

News:

  • Thumbnail image must be 526x290.
  • Each entry contains an image, title, date, preview text, and a link.
  • Parallax background must be exactly 1390x758. Red overlay is controlled by CSS.

Bragging Points:

  • See "Bragging Points" component for rules.

Social Media:

  • Microsite social media section follows the same rules as the main home page social media section.

Program Listing Page

The program listing page template has a fixed layout and components.

Program Page

The program page template can use the standard inner components, but there are also special components for use only on the program page.

Testimonial:

  • Can contain an optional image. Image must be 147x147 and be a circular cropped PNG.
  • Requires basic body text within the quote.
  • Supports up to a pair of attribution text (e.g. Name | Title).

Spotlight:

  • Must contain a 219x219 PNG that is cropped to a circle.
  • Requires title and body text.

Gateway Page

The gateway page template can use the standard inner components, and contains one special component for use.

Gateway Landscape Card:

  • Must contain a 294x294 image and title text.
  • Can contain simple body text, and an unordered list of links.

Landing Page

The landing page template follows all the same rules as the microsite home page. The only difference is that the landing page uses a simplified version of the main header.

Standard Inner Page

The standard inner has different layout options. See "Layouts" section for more information.