Advanced page block capabilities
Overview
For advanced and trained users only.
New in 2019, you now have the ability to push the style of entries even further. If you would like to use these new features, please reach out to the website team first for training.
Below is a list of new features added to the page building tools:
- Hero Video - This allows you to add a video in place of the hero image at the top of an entry.
- Section Background Colors, Images, and Vertical Spacing
- Background Colors and Images - You can now create different colored section backgrounds and set images as the section background. You also have control over the background image position, size and repetition. This allows for many new possibilities when combined with the new WYSIWYG Font Colors.
- Hide Background on Mobile? button - This button will hide a background on mobile device sizes in case your background will interfere with text or header blocks. See hands-on training for more details.
- Vertical Spacing - We've added an X-Large and XX-Large options for section vertical spacing.
- Background Colors and Images - You can now create different colored section backgrounds and set images as the section background. You also have control over the background image position, size and repetition. This allows for many new possibilities when combined with the new WYSIWYG Font Colors.
- Full-width Images - Allows for full-width images. Great for breaking up a page with whitespace, but not recommended for text on a background. Text on a background should utilize the combo of a section background image and text/header page block.
- WYSIWYG Font Colors and Dark Mode Buttons
- Font Colors - Two new buttons have been added to the WYSIWYG editor. The icon with an "A" allows you to pick from Hamilton corporate and Microlab Prep brand colors. This allows you to set light text on a dark background or stylize headers. These color options should only be used by trained designers and used in rare instances such as landing pages or campaign pages.
- Dark Mode - With the ability to the set dark section backgrounds comes a limitation of viewing white/lighter text in the WYSIWYG editor. A work-around for this is the sun icon, called Dark Mode. This allows you to view light text on a black background for previewing purposes. NOTE: The black background will never display on the front-end of the website.
- Font Colors - Two new buttons have been added to the WYSIWYG editor. The icon with an "A" allows you to pick from Hamilton corporate and Microlab Prep brand colors. This allows you to set light text on a dark background or stylize headers. These color options should only be used by trained designers and used in rare instances such as landing pages or campaign pages.
- Card Colors - Card colors is a simple setting when creating a Grid layout that let's you select a border color for the cards.
- Accordion UI Element - This new UI element allows you to create an accordion for virtually any entry, allowing you to compact information when real estate is tight.
- New Header block options - Headers now have two new sizing options: Large and X-Large. These options should only be used in rare instances where a header is not accommodated by description text.
Additionally, the title color can be modified with the new "Heading Color Override" drop-down.
Hands-on Training
Please watch the following video for an overview of all the new features and to review a hands-on tutorial of creating a Microlab Prep page.
Refer to the timecodes below to skip to major sections of the video:
- (00:00:00) Overview of new features.
- (00:06:05) Hands-on tutorial overview.
- (00:08:38) An important note on entry "Drafts".
- (00:10:11) Adding Hero video.
- (00:12:07) Understanding how to use page sections.
- (00:12:44) Photo feature: Using multiple section backgrounds.
- (00:17:29) Header Block: Large, colored text on dark section background.
- (00:19:42) Video: Embedding a video block.
- (00:20:10) Photo Feature: Text on left and faded photo on right. Hidden background on mobile.
- (00:23:34) Grid: Changing Card border colors.
- (00:25:17) Photo Feature: Text on right and photo on left. Background not hidden on mobile.
- (00:26:10) Header Block: Large, black text on color section background.
- (00:28:30) Photo Feature & Javascript embed: Text on left and photo on right. Hidden background on mobile. Add AddThis social media code.
- (00:31:28) Review page build on desktop and mobile.
- (00:32:13) Full-width images: Add full-width images that can have various aspect ratios.
- (00:35:05) Accordions: Add accordions to any page.
- (00:38:26) Final thoughts, cautions and recommendations.