ao link
Affino
Remember Login
Search

Design Elements Overview

 

A Design Element is a modular component (akin to a widget) used within the design and layout system to build and customize pages.

 

Design Elements serve as building blocks that can display various types of content or functionality, such as article listings, channels, forms, or navigation menus.

 

You can find video guides related to Design Elements on the Design Training hub.

 

Article Carousel

 

 

This is used mostly for rotating logos on site footers - for sponsors typically or partners.

 

You select an Article, often a Link type Article and select whether to display Name, image type etc. with a large number of settings to define exactly what appears and in what configuration, including a Break Point Item Grid and Ecommerce attributes too.

 

Example: demo.affino.com/article-carousel

 

Article Feature Scroller

 

 

A hybrid Feature Scroller using Articles as the display elements - selecting different title and text elements and combining with selected Article Imagery and settings including Max Width, Content Container Position and Slide Effect. Gives you a more dynamic Feature Scroller which is also easy to add to and update.

 

Example: demo.affino.com/article-feature-scroller

 

 

Article Highlights

Article Listing

 

 

Use this design element to list articles from a Section in different formats. You can apply multiples filters and refine the display.

 

Example: demo.affino.com/article-listing

 

Blog Navigation

 

 

Button

Campaigns (Placement Areas)

 

There are 1-7 Campaign Slots for your creatives (ads), which map to an Ad Campaign Theme. This displays the ads/banners in various places of the Design Object / Skin (on a listing or an article).

 

Example: demo.affino.com/campaign

 

Channel Listing

 

 

This design element lists a selection of Channels.

 

Example: demo.affino.com/channel-listing

 

Channel/Section Details

Contact Listing

 

 

This design element allows you to showcase specific contacts on different formats including search bar and filters to refine search results.

 

Example: demo.affino.com/contact-listing

 

Contact/Account Related Content

 

 

This design element display the content which is related to the Contact or Account featured on the screen.

 

Example: demo.affino.com/articles/simple-article-template

 

Converting Articles Listing

 

 

This design element lists the articles which are most likely to convert users to resigtered users or most likely to make a purchase, e.g. buy a subscription.

 

This is personalised to each individual when they are logged in using a combination of near real-time metrics.

 

Example: demo.affino.com/converting-articles-listing

 

Currency Selector

 

 

Dynamic Form

 

 

Edition Highlights

 

 

This design element highlights the key features of an Edition.

 

It can be as simple as a cover art and title, to an advanced element which allows downloading a PDF version of the addition, featuring specific articles and highlights an even links to App Stores.

 

Example: demo.affino.com/edition-highlights

 

Event Listing

Feature Scroller

 

 

This design element allows you showcase images from a Media Library in a scroller format.

 

Some of your options are:

  • Media Library Section: select the source of the slides/images
  • No Of Slides: select the number of slides to show (we advise not to add more than 12 items)
  • Slide Duration: select the time duration in seconds between each slide
  • Slide Effect: select the effect for the scroller (Wipe Down, Wipe Up, Wipe Left, Wipe Right, Fade)
  • Randomize Order: select to randomize listing order, so it doesnt always start with the same image
  • Show Navigation Bar: select to display the navigation bar
  • Navigation Bar Positioning: select the navigation bar layout to display (Bottom Left, Bottom Centre, Bottom Right, Below Feature Images, Tope Centre, Vertical Right Aligned)

 

Geo Targeting

 

This Design Element highlights the Geo region a user is on, and allows them to switch to a different region, e.g. when buying from an online store and switching from a US to EU store.

Image

Job Listing

Levels

Login

Mailing Lists

Manually Related Content

 

 

Manually relate content to one another and display them wherever the Design Element is used.

 

Example: demo.affino.com/articles/simple-article-template

 

Media Listing

Select Media Library and arrange items in Rows and Columns, various display and layout options for pop-up lightbox, media type filter and Ecommerce settings for purchase and download.

Online Forms

 

 

This design elements allos you to place online forms anywhere on a skin.

 

Example: demo.affino.com/online-form?cl=2

 

OnPage Feedback

 

 

Prime Content

 

The Prime Content Design Element is a core component on your site's pages. It's essential for pulling in native content from live channels, which can include a variety of elements such as Articles, Media, Login Forms, Search, etc.

 

The specific type of content displayed is determined by the configuration of the channel type being used.

 

Example: demo.affino.com/articles

 

 

Prime Related Carousel

 

 

 

Example: demo.affino.com/articles/simple-article-template

 

Recruitment Search

Rewards

 

Search

Section Feature Scroller

 

 

This Design Element allows you to showcase articles from a Section in a scroller format.

 

Example: demo.affino.com/section-feature-scroller

 

Shopping Basket

Text

Text and Image

Topic Related Content

 

 

Did you find this content useful?

Thank you for your input

Thank you for your feedback

Product Version

Version 9.0.10.18
VIEW
Related Reference Guides
Affino

Driving business at some of the world's most forward thinking companies

Our Chosen Charity

Humanity Direct