Motif | User Guide

If you're struggling to get your head around the various article & section combinations on your Motif site, here you will find a breakdown of everything at your disposal!

A R T I C L E S

• Default – This is the most standard and basic article available to use. This will simply place black text onto a white background. An example of this can be seen on our Motif demo site here
• Bordered – This article is very similar to the default in terms of text style, but when applied it will add a thin border around the content. You can combine this with a featured image to create bolder content sections, placing the featured image above the article title/content
• Boxed Primary – This article style enables you to add a coloured background to your content areas. The primary colour is pulled directly in from your flex theme settings – whichever colour is selected as ‘Main’ will appear as the background colour. You can see an example here
• Boxed Secondary – Identical to the above, though the colour is taken from the ‘Accent’ colour selected in the theme settings.
• Slide Up Primary – This animated widget allows you to add imagery with descriptive text appearing on hover. The image is added via the featured image field and the initial text beneath the image is set via the article title. In terms of the amount of text you can add in here we’d suggest not adding more than 175 characters. Image size wise we’d recommend the following
  • If 2 articles across – minimum of 600px x 300px
  • If 3 articles across – minimum of 400px x 300px
  • If 4 articles across – minimum of 290px x 300px
• Slide Up Secondary – This works in the exact same way but pulls a different background colour. The primary will take the ‘Main’ colour set in the theme settings and the secondary will take the ‘Accent’ colour.
• Side by Side / Side by Side Reversed – This article allows you to create 50/50 sections with one half text and the other half an image. The image size will be completely dependent on the amount of text you add – the more text, the more the image will scale to fit the required area. Because of this there’s no ‘set’ image sizing – just bear in mind if you add lots of text you’ll need a longer image!
• Image Fill – This is a simple article that allows you to add just imagery. The image will automatically scale to fill the required area.
• Button – This article allows you to create an animated CTA using imagery. For this article to work you’ll need to add a featured image to the article, whilst adding an article title. The article title will appear larger and bold and any text added into the body area of the article will appear smaller, beneath the title. Recommended image sizes are as follows:
  • If 3 articles across – minimum of 400px x 400px
  • If 4 articles across – minimum of 290px x 290px
• Pop-up – This allows you to add content into a lightbox window directly from the page. This has to be combined with a featured image to work correctly, but once added you can avoid having long pages of text by condensing them into these articles. The article title will appear overlaid on the image, whilst all body text will appear within the pop-up window itself. Recommended image sizes are as follows:
  • If 2 articles across – minimum of 630px x 320px
  • If 3 articles across – minimum of 400px x 200px
  • If 4 articles across – minimum of 290px x 150px
• Accordion – This article allows you to create animated blocks that reveal additional information on click. The article title will appear within the coloured block (which gets its colour from the ‘Main’ option within the flex settings) and the text added to the body of the article will appear on click.

S E C T I O N S

• Background-Colour-Primary – This section style will apply a full-width coloured section behind the articles added to the page. These are really good when trying to highlight specific content or to help break up page content. The primary colour will be pulled from the ‘Main’ colour you set in the theme settings.
• Background-Colour-Secondary – Exactly the same as above but the colour will be pulled from the ‘Accent’ colour set within the theme settings.
• Background-Colour-Muted – This colour will be pulled from the ‘Muted’ colour set within the theme settings.
  
• Background-Parallax-Image – This full width section allows you to add parallax scrolling sections to your pages. The image added will remain static whilst all other page content flows over the top of the section creating an animated feel. We’d recommend adding images no smaller than 1440px x 400px.
• Narrow – This is a simple section style that narrows the page content more centrally.
• Full Width – This stretches the content out to be placed full-width of the content area, though you shouldn’t need to use this one very often!
• Grid-Gapless – This section style removes all padding/margin between articles, so they sit directly next to each other. This is best used when the articles are using the button style, so you can create a full-width grid effect.

M I S C E L L A N E O U S

• Homepage Hero Images – If using imagery on a full page opening fold you’ll need to upload large images to make the best of this. You can upload any sized imagery here, but we’d recommend sticking to something around the 1900px x 800px mark if possible.
• Subpage Hero Images – Again no exact sizing here but nothing smaller than 1440px x 350px
• Speaker Images – Speaker images should be ideally uploaded at no smaller than 500px x 500px with the speaker’s face centralized.
• Exhibitor Logos – Exhibitor logos should be uploaded at 300px x 300px in size. Smaller/larger logos can be added but this may impact the display on the front end of the website.
• News/Product Library Images – There are no restrictions on image dimensions here, but the image you upload will display in full on the entry. On the list itself you can choose whether to display it:
  • default – this option is just the standard setting that places the image in as you uploaded
    it.
  • contain - this option scales the image as large as possible without cropping or stretching
    the image.
  • cover - this option scales the image as large as possible to fill the containing space. It is
    cropped either vertically or horizontally to ensure no empty space remains
    

If you're still stuck for ideas, have a scan of some of our demo Motif sites for a bit of inspo! If you're brain is fried already just raise a ticket & ask away!

Motif V1 - https://themes.showoff.asp.events/motif
Motif V2 - https://themes.showoff.asp.events/motif-v2
Motif V3 - https://themes.showoff.asp.events/motif-v3