The Jumbotron widget is a helpful option for displaying attention-gabbing headlines, most notably for homepage layouts. To use the Jumbotron widget, select it form the Content Widgets list, and begin entering content.
Add Basic Content
Static content can be added in three simple steps:
- Add a headline. 1a: Select a font.
- Add a sub-heading. 2a: Select a font.
- Add paragraph copy. 3a: Select a font.
Add Multiple Headlines
To make the content more dynamic, add multiple headlines and choose a method to display them.
- Enable multiple headings 2a: Click Show Headings to display headline inputs.
- Add new headlines. Up to five are available
- Select an animation. 3a. Select an animation speed (the time it will take to switch between headlines). 3b. Select the duration, (time that the text will display for)
- Select Display the Cursor for a more authentic 'typing' effect (only applies to the 'Typed' animation)
- Make the cursor blink (only applies to the 'Typed' animation)
- Continue to loop through headlines.
Add a Button
The Jumbotron widget can display one custom button below the content. To use more than one button below the Jumbotron, nest a row and add separate buttons there. For more information on the button widget, click here.
For Best Results
Because there are so many options and capabilities of the widget, there are a number of things that can go wrong if not set correctly. Here are a few tips for best results.
- Test all styles on mobile displays.
- Be sure to set all values. For example, if a mobile font-size is set but the line-height is not adjusted, the headlines can overlap on mobile devices and become illegible.
- Do not use a line-height of less than 1.0 on any headlines that use the 'fade' or 'slide' animation.
- Be weary of negative margins. If they are used incorrectly, headlines can become illegible.
Click the button to “Add Nested Row” at the bottom of the last row: http://prntscr.com/8zq210
· Select “Add Child Row” and hit the arrow on the far right of the “New Row” text: http://prntscr.com/8zq2x1
· Select the radio button for the type of row you want (in this case 50/50 since there are 2 videos per row) & hit “Save”: http://prntscr.com/8zq3ki
· If you scroll to the bottom of the page, you’ll see there is a new blank row added: http://prntscr.com/8zq5rj
· Hit the “Add Nested Row” button, then scroll to the bottom: http://prntscr.com/8zq6mp
· The bottom row will be the new one you just added. On the far left, click the Up/Down arrow and drag the row to where you want it: http://prntscr.com/8zq6xf
· However over the first box in the new row and hit “Add Widget”: http://prntscr.com/8zq8mi