Composer 2 - Training Guide

Welcome to Composer 2!

This guide (based on a recent training webinar) will walk you through everything you need to know to build, style and manage your Composer 2 website - from editing sections and articles to creating layouts, adding widgets, and customising your design settings.

What You’ll Learn

• How to customise your site’s design and appearance

• How to add and edit sections, articles, and widgets

• How to adjust colours, fonts and buttons

• How to work with layouts, backgrounds and animations

• How to update your site header and hero area

• Best practices for flexible page design and content consistency

Before You Begin

✅ Log into your ShowOff back office
✅ Review any example or template pages included in your site (these show all available styles and widgets)

Watch the video

1. Getting Started

Composer 2 is built around Sections and Articles:

• Sections are horizontal blocks that span the width of the page.

• Articles sit inside sections - up to four across - and hold your actual text, images, buttons, or widgets.

2. Design & Appearance Settings

Access via:
Settings → Design & Appearance

This area controls your site’s core look and feel - colours, fonts, buttons and more.

2.1 General & Layout

• Layout sets the order of content areas: header → hero → main content → footer.

• Use this to control overall site structure.

2.2 Colours

• Up to 8 core colours, plus muted/text/link colours.

• Referred to by number (Colour 1, Colour 2, etc.)

• Use HEX codes to match your brand palette.

• Changing one colour here updates it site-wide - great for quick rebrands.

2.3 Typography

• Two main fonts:

  • Font 1 – Body text

  • Font 2 – Headings

• Supported sources: Google Fonts, Adobe Fonts or custom fonts supplied to ASP.

2.4 Elements

Defines the default look for sections, articles, and buttons.

Sections

• Adjust header alignment, fonts, dividers and colours.

• Add optional text above or below section headers.

• Defaults can be overridden on individual pages.

Articles

• Set the default style for article titles and body text.

• Choose between: Plain, Boxed, Bordered, or Boxed + Bordered.

Buttons

• Configure up to 8 button styles with:

  • Default and hover states (lighten/darken/custom)

  • Text and background colours

  • Border options

  • Rounded or square corners

• Icons can be added when inserting buttons.

3. Building Your Content

3.1 Adding Sections and Articles

1. Go to the page you want to edit.

2. Click Add Section → choose your layout (1–4 articles).

3. Add your text, image, or widget inside each Article.

3.2 Article Settings

Each article includes tabs for:

• Content – toggle image, heading, or body visibility.

• Style – switch between plain/boxed/bordered; adjust colours and borders.

• Animation – apply fade or slide-in effects.

• Typography – override font size, colour, or alignment.

Tips:

• Clone an article to reuse its style.

• Drag and drop to reorder or move articles between sections.

4. Section Settings

4.1 Width Options

Control how wide your content and backgrounds appear:

• Full Viewport – background spans edge to edge.

• Full Width – slightly inset from screen edges.

• Standard / Narrow – centred layouts for focused content.

4.2 Margin vs Padding

• Margin = space outside a section (between sections).

• Padding = space inside a section (between content and edges).
  Use padding to give content room within coloured or image backgrounds.

4.3 Backgrounds

Each section can have:

• Solid Colour – choose from your palette or add a custom HEX.

• Gradient – set two colours and a direction (top/bottom or left/right).

• Image – add parallax or overlay for readability.

• Video – embed a background video.

• Pattern – repeating texture or graphic.

Pro Tip: Add a dark overlay on bright backgrounds to make text easier to read.

4.4 Stagger & Width

• Apply staggered layouts (left/right/up/down) for more dynamic designs.

• Articles can have custom widths (e.g. 33% / 33% / 16% / 16%) - use carefully to ensure readability.

5. Working with Widgets

Widgets add interactive and styled elements like buttons, flip cards, image sliders, or comparisons.

Access them via the Widget icon in the editor.

5.1 Buttons & Button Groups

Single Button

1. Choose a button style (1–8).

2. Add button text (avoid “Click here”).

3. Optional: choose an icon.

4. Add your link (page, URL, file, or anchor).

5. Set alignment (left, centre, right) and width (auto or fill).

Button Group

• Add up to 5 buttons in one block.

• Display them horizontally or vertically.

• Perfect for grouped CTAs like “Register | Visit Exhibitors | Download Guide”.

5.2 Flip Cards

Show content front-and-back with animations.

1. Insert a Flip Card widget.

2. Choose shape – square, vertical, or widescreen.

3. Select animation – flip (up/down/left/right) or fade.

4. Set front background – colour, gradient, image, or video.

5. Add text or icons for front and back.

6. Adjust corner radius or text formatting.

Tip:
Perfect one card, then clone and edit content for consistent design.

6. Example Pages

Each Composer 2 site includes:

• Article Styles Page – fonts, headings, colours

• Section Styles Page – layouts and widths

• Widget Examples Page – previews of all available widgets

Don’t delete these pages.
Deactivate them if not needed - they’re invaluable for reference.

7. Headers, Menus & CTAs

Your Header appears on every page and can include your logo, menus, CTAs, and social links.

It’s built from three editable views:

• Default Header (Desktop) – full version with logo, menus, and CTAs.

• Fixed Header – simplified version that stays visible as users scroll.

• Mobile Header – burger menu layout with optional CTAs.

Access via: Panels → Header

7.1 Changing Header Style

• Styles are numbered (1–8).

  • Style 1: logo top, menu below

  • Style 4: logo centred

  • Style 7–8: side or mega menus

• Change styles by selecting your preferred number.

7.2 Editing Header Content

You can:

• Update logos, event dates, and venue text

• Turn social icons and CTAs on or off

• Adjust button group style and links

8. Hero Area

The Hero is the large visual banner at the top of your homepage.

Access via: Panels → Hero

8.1 Hero Types

Choose between:

• Static Image

• Video Background

• Text Only

• Slider (multiple rotating slides)

Each hero can include:

• Background (image, video, gradient, or pattern)

• Title

• Body content

• Call-to-action button(s)

8.2 Hero Slider

Ideal for promoting multiple messages, e.g.:

• “Call for Papers Open”

• “Meet the Speakers”

• “Book Your Stand”

Each slide can have unique content and a background.

8.3 Mobile Hero

You can upload a different image or format for mobile to optimise load speed and readability.

9. Tips & Best Practice

✅ Create template pages with ready-made sections for easy cloning.
✅ Keep text concise - shorter blocks improve readability.
✅ Use overlays on bright images for contrast.
✅ Check pages on mobile view regularly.
✅ Don’t delete your example pages.
✅ Visit the Knowledge Base for step-by-step video tutorials on every widget.

10. Need Help?

• Visit the ShowOff Knowledge Base for even more tutorials and walkthroughs.

• Contact the ASP Support Team through your usual channel.

• Or reach out to your Account Manager

11. Watch the Video