Tempo | User Guide – ASP Knowledge Base

Struggling to get your head around the endless combinations of articles & sections on the Tempo template? Below you'll find detailed information on both to help you build the perfect website!

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 Tempo demo site here -https://themes.showoff.asp.events/tempo/example-page-one.
Boxed Colour One/Two/Three/Muted/Dark – This article style enables you to add a coloured background to your content areas. The background colours are determined by the colour set within the flex theme settings. You can also add featured images to these articles to place an image directly above the copy. These are best used 2/3 or 4 articles across to create a block section of different coloured backgrounds.
Button Image Colour One/Two/Three – These article styles allow you to create clickable areas of content, great for pushing users through to key content on the website. The colour of the bottom portion is determined by the colour set within the flex theme settings. When a featured image is uploaded (which is strongly recommended) this will sit above the article title. Description copy will not be displayed when using this article style.
Button Colour One/Two/Three – These articles are fairly similar to the above but the text will appear centred within the article in
Slide Up Colour One/Two/Three – 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 300p
- If 3 articles across – minimum of 400px x 300px
- If 4 articles across – minimum of 290px x 300px
Stat Colour One/Two/Three/Dark – This article is specifically built to contain stats & icons as per the example here - https://themes.showoff.asp.events/tempo-v3. To apply an icon to the article you’ll need to grab the embed code from Font Awesome. For example you’ll need to add code such as <i class="fa fa-users"> to the featured image field. This will then render the icon & not the code if applied correctly.
Image Only – This is a simple article that allows you to add just imagery. The image will automatically scale to fill the required area.
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.
Video Only – Pretty self-explanatory, this article is only to be used when inserting a video.

S E C T I O N S

Grid-1/2/3/4-Default – The section styles on Tempo are the key to building great content blocks across your site. The default setting for the grid just spans the articles out equally across the page. The width of each block will depend on how many articles you add within each section.
Grid-2-Style-1/2 – These section styles are only to be used when 2 articles have been placed within the section. Style 1 places the first article on the left at 66% width and the second article on the right which fills the remaining space. Style 2 does the same but vice versa.
Grid-3-Style-1/2/3 – These section styles are only to be used when 3 articles have been placed within the section. Dependant on which style you pick it’ll either make the 1st, 2nd or 3rd article appear at 50% width and the others 25%.
Grid-3-Style-4/5 – Now you’re using more articles in the section you can begin to stack blocks on top of one another. When style 4 is selected the 1st article will appear on the left with the other two articles stacked on the right. Style 5 does the opposite of this with the articles stacked on the left.
Grid-4-Style-1/2/3/4/5/6/7 – These styles will only work when you have 4 articles within the section. Each different styling places the 4 articles in a slightly different format, stacking the various articles you add in different ways.

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

Homepage Hero Images – You can upload any sized imagery here, but we’d recommend sticking to something around the 1900px x 800px mark if possible. How the images are cropped will be dependent on which header/hero layout settings you opt with. We can advise once your preferred layout has been selected.
Subpage Hero Images – No specific 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 Tempo sites for a bit of inspo! If you're brain is fried already just raise a ticket & ask away!