Manual Components - Campaigns

Introduction

Welcome to the presentational page of manual components for building your own campaign page on the CMS! You will find here some components approved by design with their code snippets and guidelines about how to use them.

Before you start...

• Do not just create a campaign page on your own. Any idea you might have has to be approved by design first! Just set up a meeting with them and tell them about your project and the comoponents you're planning to use. They might also give you useful hints about the best way to display your content.
• If you're new to the CMS, you will find here a detailed presentation and documentation about how to use it.
• Be aware that the components listed in this page are not the only ones available. You will find here another page, used by the SEO team, listing other components you might want or need to use.

Also, please make sure to copy and paste the line of code below in your CMS page before starting to implement other components. This line of code makes sur the whole styling of the components is imported to the page. Otherwise, you might see very weird stuff :).

Index

• Basic Components
• Full-width Components
  • sticky menu
  • USPs
  • Full-width Colored Backgrounds
  • Grey line separator
• Presentational Components
  • Text and images
  • Image + Text Grid
  • Slider
• Misc
  • Social Media Links
  • Share this page
  • App Stores Buttons
  • Embedded Video

Basic HTML Elements

Before going to much more complex components that you will need for populating your page, let's review some very basic HTML elements. If you are already familiar with HTML, this should be no surprise for you.

Open the collapsible below to see how they look on our landing pages

Code Snippets and instructions

• Usage: These are the basic HTML elements you will use to display simple information:
  • Normal and centered titles
  • Normal and centered paragraphs
  • Specific elements you can include in paragraphs in order to have:
    • bold text
    • a link to another page
  • An image
  • a list
  • a numbered list
• What to edit? You will find all these basic elements grouped in the code snippet below. Just pick the ones you need and edit the text within the brackets.

Sticky Menu

Code Snippet and instructions

• Usage: Sticky menu component should be used hand-in-hand with the header component presented above. Please make sure to follow the instruction written for the header component
• Note: The interactive behavior of the menu has been deactivated on this page for presentational purpose. To see it in action as a live example, please click here
• What to edit?
  • every "[...]" line represents one item in your menu. Remove the unnecessary ones from the code snippets or copy the last one and paste it right after if you want more.
  • Change the titles within each item
  • IMPORTANT every title item has a data-id="..." attribute. These work as anchors to the different sections of your page. You can edit them, but keep in mind that they will need a corresponding reference in the section you want to link to. Ex:
    

Customised USPs

Code snippet and instructions

• Usage: Customised USPs that should go after a cusomised header. You can have up to three text USPs and a button that linksto wherever you want to
• What to edit? The three USPs within the div class="tick". The link in a href="..."

Full Width Colored Backgrounds

Code snippet and instructions

• Usage: Sometimes, to underline the differences between specific sections of your page, grey lines separators are not enough. These colored background allows you to highlight some specific content, and alternating between colors helps the user identifying it clearly. The content you want to have appearing on colored background has to be nested within the provided div in the template. Some examples here and here
• What to edit? Nothing. Just place your content within the brackets provided by the template and it will appear with the colored background of your choice.

Grey line separator element

Code Snippet and instructions

• Usage: This grey line is used to visually separate the different sections of your page. It also give some space between the sections. Don't use it nested in any div or section but in between them.
• What to edit? Nothing. Just copy-paste the snippet and you're good :)

Images and text

Code snippet and instructions

• Usage: Can be used as USPs or Snippets. Presentational purpose
• What to edit?
  • the src="..." in each img element
  • the title in each h4 element
  • the text in each p element

Images and Text grid

Code Snippet and instructions

• Usage: Image and text grid, alternating text or image as first element in line on desktop. Can be used as presentational component.
• What to edit?
  • First, choose the number of image + text lines you want to have. These template and code snippet have 6 by default. Every text part is nested into div class="col-md-6... followed by div class="fact-text".... Every image part is also nested into div class="col-md-6..." followed by Image + CTA comment. Make sure to remove them by pair (one text and one image), starting from the end. Once you have the correct number of items, you can start editing
  • For text elements: you can edit the title, nested into h4 and the paragraph, nested into p
  • For the image elements: you can edit the image (change the URL declared in background-image:url(...)), the destination link (line below in href="..."), the title and subtitle of the overlay (in thumbnail-title and thumbnail-subtitle) and the button (in discover-button
  • Optionally, you can replace this elaborated clickable image by a more simple image. In this case, you keep the nesting div class="col-md-6.." and you erase whatever is inside. you then can replace it by a simple img element. If in doubt, just contact us.

Slider

Code snippet and instructions

• Usage: A slider is a rather complex component and not very flexible in terms of content it can have. If you were to use it, make sure that the copy you want to integrate has a similar length to the one you see displayed in the template. Otherwise, your own slider might not look as nice as the one you see displayed here.
• What to edit?
  • Number of slides Before including your own content into the snippet, you need to make sure you will have enough slides displayed. The current template and code snippet display 6 slides. In the code snippet, every slide is marked by a comment mentioning its number (eg, slide 1 has a comment above: !-- 1 --, and so on)
    • If you want more slides: Go to slide number 5 (not number 6!) in the code snippet and follow the instructions in comment
    • If you want less slides:: Delete the unnecessary slides starting from number 5 (keep number 6 as it is!).
  • What to edit for each slide
    • the img src="..."
    • the text between the p brackets
    • The "signature" part nested in the div class="employee-title".... It can also be fully removed if you do not need it.

Social Medias Links

Code Snippet and instructions

• Usage: Links to our social medias
• What to edit? Nothing

Share This Page

Code Snippet and instructions

• Usage: Lets the User share the page you're on
• What to edit? Nothing

App Buttons

Code snippet and instructions

• Usage: Simple CTA buttons to download the app
• What to edit? Make sure to have the links in the a href="..." linking to the right locale in both the playstore and the appstore.

Embedded Video

Code snippet and instructions

• Usage: Simple component to embed videoes on landing pages
• What to edit? Ensure you change src="https://www.youtube.com/embed/... to the youtube video you want to feature. Also edit the text as appropriate. Important: Remember to include the campaign stylesheet when using this component.