The main menu with tabs
How to do a One column text box (staged)
Mandatory for layout reason
- Start with a HubSpot predefined layouts.(in the left panel)
- Choose the 1 columns template
- Add the Hubspot text module.
- Add 2 "Horizontal spacer" modules to the right and the left of the main column.
- In the left panel, choose the "Section" and set the max-width to 1200px
- Go back in the main window and adjust the width of the center column by moving the cursor to the desired value.
- Result will be that in Desktop view, the center column will not be bigger that the width defined in desktop mode, but when going to Mobile view, Hubspot will change the max-width to 100% , leading to the correct layout for mobile.
Text FX
This is the exemple
- You have to edit the text block manually and insert some code in order to animate the text.
- The code for the previous example is:
- <span class="text_animation" data-color="var(--purple)" style="color: black;">management</span>
- Put the desired text in a span. Add the "text_animation" class and that's it.
- If you want the animated text ending with a special color add the "data-colour" argument. You can use predefined css value or type a color like : #342534
DS Video on scroll
This module start a video when the video enter the viewport of the web browser. It's useful to give some movement to the layout. But it works better with small video (3-4 secondes). Also, please use the mp4 format for the video.
As hubspot only allows us to save 50videos on the DAM section, all the videos used on the website are saved on an AWS server (as well as the fallback images).
DS Video
This module allows you ton embed video in the website and also add a download button for related file (like pdf or keynote). Omparing to the hubspot default module, you can easily create a grid of videos by adjusting the number of columns in the Style tab. It also add a nice black rounded border to each video.
DS Agenda
This module was used for WWTM but replace by DS Timeline for the DUO.
DS Timeline
This module was used for the DUO event.
description of the slot
description of the second slot
Description of the third slow
DS Carrousel
Please try to use images with the same dimensions.
DS Carrousel
You can also use videos. But try to get video with the same length, and adjust the timer of the module.
DS Google map
Use to add a google map in a webpage. But you can also embed other thing as it puts a webpage in an Iframe.