Follow

Understanding Flex Panels

Screen_Shot_2021-10-25_at_1.13.44_PM.png

Flex Panels display multiple content feeds next to each other in columns, or “panels”. They can have two to three panels, and the e panel can be displayed larger than the others in a hero format. Items in Flex Panels can be displayed as portrait or landscape images, as well as text-only, and can be presented either as image or standard cards.

Increasing the density of content on the homepage with a clean and easy-to-read layout is likely to improve pageviews by increasing the amount of users who come to your site directly from having it bookmarked. Increasing the amount of content on your homepage may also grow the number or readers who click back to the homepage after visiting another page.

What Do Publishers Have Control Over?

We can configure flex panels within Site Programming. Publishers can use Site Programming to update the content of the panel.

Visit SI National to see some of these flex panels at work.

Examples

Screen_Shot_2021-10-25_at_12.07.03_PM.png
Screen_Shot_2021-10-25_at_12.07.20_PM.png
Screen_Shot_2021-10-25_at_12.07.46_PM.png
Screen_Shot_2021-10-25_at_12.08.17_PM.png

How Do You Add and Manage the Flex Panel Component?

This is all done by our Site Production team and changes are made by the Publisher Support team. If you have any questions about this component, or would like to make any changes, please email pubsupport@theareagroup.net

For those of you who are a bit more tech savvy... In short, our team adds a Flex Panel Component to a page template just like any other component. To learn more about the Tempest building blocks of design components, read this article.

How Does Flex Panel Render on Desktop, Tablet and Mobile?

The following are the rules:

  • Stacking logic
    —The hero column appears as the first item in the stack, then it is left to right
  • Three Column Flex Panel

    Desktop: you will see all columns in a horizontal view.

    Tablet:
    Each column is stacked on Size B, hero followed by non hero panels (left to right)
    The Hero column is maintained in its larger format size and appears as the first item in the stack
    The Non-Hero columns are dropped under the hero item in the order from left to right
    If the Hero column is a Standard Card, this card type is maintained on size B taking the full width of the screen.
    If the Non-Hero column is a Standard card, this card type is maintained but we display two columns worth of the cards to increase the content density
    If the Hero column and/or non hero columns are List card types, this card type is maintained and it just appears as a single column presentation.

    Mobile
    —Each column is dropped into a single column on size A, hero followed by non hero panels (left to right).
    —The card types on desktop are maintained on the mobile rendering.

    Two Column Flex Panel
    Desktop: you will see all columns in a horizontal view. The hero column is 2/3 the width of the well and the non hero column is 1/3 of the width. Hero columns with List card are treated as Promoted to give them a larger image and format.
    Tablet: each column is stacked on size B, hero followed by non hero
    Mobile: each column is stacked on size A, hero followed by non hero
If you have any questions about this component, or would like to make any changes, please email pubsupport@theareagroup.net
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk