Flexible Content
Powered By
Flexible Content Guide
This is the Content Hero Block! Use it for the title area!!
This is similar to the block that you use as the title area of news posts, which if used should act as a title area for pages too. You can choose from a standard Content Block, and Accordion Block, or a Button Block to add to the “Content Column”. You can learn more about each in the sections below!
Oh and make sure you add alt tags to images like the one used in this title piece.
While looking through the rest of the examples, take note of just how many “Powered By” sponsorship options there are too. Wherever you see one note it can be swapped to a light or dark variant, and the “Powered By” phrase can be changed to anything you like for each section.
This is an extract block. More likely used in articles, if you wish to include a “TL;DR” of your page or post you can use this to sum it up nearer the top of the article.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet arcu id elit fringilla dictum. Nullam vehicula luctus consectetur. Quisque viverra ligula vitae urna finibus vestibulum. Morbi pharetra turpis a arcu dictum maximus. Mauris urna felis, luctus non elit non, viverra scelerisque neque. Aliquam tempor magna non dignissim commodo. Suspendisse aliquam quis lectus ut consectetur.
This is a quick guide designed to show you all the pieces of Flexible Content and how best to use them.
This first block is just the regular content block, it isn’t flashy and won’t garner more interest from readers, but sometimes you just need a block that functions like a “normal” article. In those cases, grab a “Content Block”. Where it is likely that you need more text than I will use for the basic description of each section, I will drop in some classic Lorem ipsum to fill in the blanks.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet arcu id elit fringilla dictum. Nullam vehicula luctus consectetur. Quisque viverra ligula vitae urna finibus vestibulum. Morbi pharetra turpis a arcu dictum maximus. Mauris urna felis, luctus non elit non, viverra scelerisque neque. Aliquam tempor magna non dignissim commodo. Suspendisse aliquam quis lectus ut consectetur.
Fusce erat nunc, ullamcorper at dui et, consectetur auctor metus. Aliquam blandit ut velit nec tempus. Praesent accumsan metus at egestas imperdiet. Nullam eget neque ac ante bibendum auctor. Nullam eu pharetra libero. In semper, neque nec viverra pharetra, nibh purus viverra velit, sit amet lacinia felis lorem in libero. Cras metus nunc, euismod eget rhoncus quis, dignissim sed mi. Aliquam condimentum fermentum nulla, vitae finibus nisl consequat ut. Nulla nec laoreet nisl. Cras non elit augue. Integer a molestie purus. Donec interdum egestas magna nec mollis. Curabitur lorem enim, ultricies at aliquet eu, auctor ac nisl. Nunc ut viverra enim. Etiam maximus tempor dolor, ut malesuada tortor mollis et.
Accordion Information
Accordion Usage
Media / Partners Gallery
I’ve used a Content Block here to describe what is above, a Media/Partner Gallery! This is a great way to show a collection of images, videos, or partners that you can tab through. The sizes of each image also don’t matter here as the slider will accommodate all shapes and sizes.
I have also set the Background of both the gallery and this content block to “Dark” so they look like they are one and the same thing, although they are completely different sections.
This is a tabs block, and realistically my title for this tab is far too long. Similarly to accordions this will let you hide information behind different tabs.
Although, as you will notice, unlike accordions the first tab will show by default, so there is always something showing on the page.
This lends itself more to types of information regarding a singular topic, rather than larger spreads of information that you don’t want occupying large spaces on your page.
There is an option for mobile to swap this to an accordion as you have far less horizontal real estate on a mobile device, so swapping to an accordion when on mobile is a great idea for wider tab setups.
Video Block!
Key Points
- You can use key points to really highlight important things!
- If you need to it can have multiple rows
Media & Content Block
You can use this block to display some form of media, be that an image, video (video post, redtv, or youtube), or a map alongside some sort of content block or blocks. In this example there is a video to the left, and a content block followed by a button block on the right.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet arcu id elit fringilla dictum. Nullam vehicula luctus consectetur. Quisque viverra ligula vitae urna finibus vestibulum. Morbi pharetra turpis a arcu dictum maximus. Mauris urna felis, luctus non elit non, viverra scelerisque neque. Aliquam tempor magna non dignissim commodo. Suspendisse aliquam quis lectus ut consectetur.
Showcase Content Slider
Predict The Lineup
Select
Select
Select
Select
Select
Select
Select
Select
Select
Select
Select
The above is the Lineup Selector. Throw it into a post about an upcoming game, and let your fans suggest their own lineups which they can share to social media. You can even override the team and use it for other Aberdeen teams such as Womens as we have done here.
Below this content block is the Player Comparison Block, which does what it says on the tin. You can drop this into a post or page to compare the stats of two players. This can be players from your team, or players from the league. You can even leave a space for the user to pick from a dropdown list of players to compare.
Then you decide if you want to use the default stats, or if there are some stats you specifically want to highlight. In this case I have used goals and shots off target just as an example of what can be done.
Compare Players
News Block - Include news in other pieces, be they other stories or pages
Link Text Block
Link Text Two
This time we’ll link to an external page. You can use this block as an aggregator of pages if you need to!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet arcu id elit fringilla dictum. Nullam vehicula luctus consectetur. Quisque viverra ligula vitae urna finibus vestibulum. Morbi pharetra turpis a arcu dictum maximus. Mauris urna felis, luctus non elit non, viverra scelerisque neque. Aliquam tempor magna non dignissim commodo. Suspendisse aliquam quis lectus ut consectetur.
Filling Out More Links
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet arcu id elit fringilla dictum. Nullam vehicula luctus consectetur. Quisque viverra ligula vitae urna finibus vestibulum. Morbi pharetra turpis a arcu dictum maximus. Mauris urna felis, luctus non elit non, viverra scelerisque neque. Aliquam tempor magna non dignissim commodo. Suspendisse aliquam quis lectus ut consectetur.
Contact Us!
You can always tack on a link to a helpful page like your Contact Us page if it is relevant within these sections.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet arcu id elit fringilla dictum. Nullam vehicula luctus consectetur. Quisque viverra ligula vitae urna finibus vestibulum. Morbi pharetra turpis a arcu dictum maximus. Mauris urna felis, luctus non elit non, viverra scelerisque neque. Aliquam tempor magna non dignissim commodo. Suspendisse aliquam quis lectus ut consectetur.
Content & Accordion Block
Left Section
Accordion Block
Lorem Ipsum
Dolor Sit Amet
Content blocks look like this, just a regular block of content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet arcu id elit fringilla dictum. Nullam vehicula luctus consectetur. Quisque viverra ligula vitae urna finibus vestibulum. Morbi pharetra turpis a arcu dictum maximus. Mauris urna felis, luctus non elit non, viverra scelerisque neque. Aliquam tempor magna non dignissim commodo. Suspendisse aliquam quis lectus ut consectetur.
Accordion Half
Lorem Ipsum
Images