Visual hierarchy of text
H1 The quick brown fox jumps over the lazy dog.
H2 The quick brown fox jumps over the lazy dog.
H3 The quick brown fox jumps over the lazy dog.
H4 The quick brown fox jumps over the lazy dog.
H5 The quick brown fox jumps over the lazy dog.
H6 The quick brown fox jumps over the lazy dog.
<p> The quick brown fox jumps over the lazy dog.
Tables class and Id
ID for Sessions
This ID is used in the sessions section within the tabs. It is for the table that goes inside the accordion. It is important to keep in mind several things: the date should not be added inside the table but in the space where it says "date" in the sessions, you must always add a width of 100%, a special class is used for breaks, and don't add bold to the titles and item 1, as they already have it.
<table id="session-table" style="width:100%;"></table>
Example:
| Title | Title | Title |
| Item 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. |
| Item 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. |
| 10:00 am: BREAK*** | ||
| Item 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. |
| Item 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. |
*** This is the class for breaks. It is different because, if not done this way, it will not work for responsive versions. The class for the break is class="grey-bg", and you also have to use a colspan="#" with the number of columns that the table has. The code is:
<tr><td class="grey-bg" colspan="3">10:00 am: BREAK</td></tr>
Class: workshop-content-table
This class is used for workshops on a landing page, but it can be used elsewhere. The difference is that it has a title in the first row and a subtitle in the second row.
It is important to keep in mind several things: you must always add a width of 100%, and don't add bold to the titles and item 1, as they already have it.
<table class="workshop-content-table" style="width:100%;"></table>
Example:
| Title | Title | Title | Title |
| Subtitle | Subtitle | Subtitle | Subtitle |
| Item 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Item 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Item 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Class course-content-table
This class is used for the content and speakers on the online courses, but it can be used elsewhere. The difference is that this one has only one main title.
It is important to keep in mind several things: you must always add a width of 100%, don't add bold to the titles and item 1, as they already have it. Also, if you create the table from scratch, you need to make sure that the first line has a colspan="#" with the number of columns that the table has.
<table class="course-content-table" style="width:100%;"></table>
Example:
| Title | ||
| Item 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. |
| Item 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. |
| Item 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. |
| Item 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim ex, nec commodo eros pharetra et. |
Class: webcast-calendar-table
This class is used for the webcast on a landing page, but it can be used elsewhere. There is not much different. It is important to keep in mind several things: you must always add a width of 100%, and don't add bold to the titles and item 1, as they already have it.
<table class="webcast-calendar-table" style="width:100%;"></table>
Example:
| Title | Title | Title | Title |
| Subtitle | Subtitle | Subtitle | Subtitle |
| Item 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Item 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Item 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Modal video
The modal video is an option to make an image pop up as a video in almost full screen. First, you need to create a link (an <a></a> tag), then put the image inside the link. After that, go to the code view and add the following inside the <a> tag:
href="[modal]=#"
Where # represents the ID of the YouTube video. The ID is the last part of your YouTube link, which is always different. For example, in https://www.youtube.com/watch?v=jfKfPfyJRdk, the text in red is the video ID.
Example of the modal:
Styles for bottons
It uses only three different styles of buttons. These are classes that are applied to the <a> tag, and then you can add the URL in the href attribute. Alternatively, you can copy and paste the example of the button below and then use Command or Control + K to add the URL in the link field.
Blue Principal buttom
White with blue border secondary buttom
Red buttom
For the Images
We can add any image anywhere, but we make some changes to the images for consistency that you can follow if you want:
-
Adding a Border Radius: If you insert an image in a WYSIWYG editor, it should have a
border-radius: 9px;. You can add it in the HTML viewer like this:style="border-radius: 9px;". -
Full Width Images: If you insert an image in a WYSIWYG editor that you want to take the full width of the space (for example, in a tab), you need to use
style="width:100%;". I recommend that these images are more like banners so they don't take up too much space. -
Small Format Images: If you want to add a small image that mixes with the text, you can use the following code:
style="float: right; border-radius: 9px; max-width: 250px; margin: 0 0 20px 20px;". -
Stacked Images: If you want to place two images, one on top of the other, you can put both inside a
<div style="float: right;"></div>in the HTML view and add a space (</br>) between the images.