Mega Menu
The mega-menu sub-menus are gallery blocks placed in the Footer Top. These append to the first three navigation folders in sequence. These are accessible once in Footer safe edit mode.
https://trainingworks.squarespace.com/config/safe
The mobile version of the navigation relies on the native navigation, this is supported by links in the Primary Navigation under pages. These links are hidden on non-mobile devices and replaced with gallery blocks.
Hero
The top index section, slug /hero allows for two buttons to align next to one another, duplicate the page and place it as first in an index to replicate this quality.
Hero banners, once first in an index sequence, also get a gradient banner.
Accordion
Slug /accordion allows for an accordion.
Note: To close the accordion, use an empty div in a code block where you’d like it to stop.
Our Most
Advanced Solution
CATO™ Learning TechnologyAl-Powered Skills
Assessment + Microlearning
While CATO™ is at the cutting-edge of learning technology, it may not be for everyone. It is one of many solutions Training Works brings to the table, and we will only recommend it if it makes sense for your unique workforce.
Achievements
Slug /achievements allows for 3 columns with blocks that grow vertically, allowing for the text blocks to be the same height and for the bottom line to align to the bottom. Use the Duplicate function to recreate these sections, this will keep the /achievements slug first and recreate this pattern.
Floating
Slug /floating creates a section that breaks out of the fold.
These sections remove 250px from the top and bottom and set the section background to transparent. Where these sections overlap the others, use blank index pages to offset the difference.
Clients
Slug /clients generates a layout with white background, and a background to the gallery section. As long as the layout stays within these current column settings, these will duplicate.
Featured Text
To bypass default block padding and set up neat featured text blocks with minimal line-spacing, use the syntax provided, adjust to your needs.
The alt class will render text in a different color.
The featured-title class will render the small cap featured title.
small cap featured title
These same font settings are used on
the main H3 font
the italic font style in image cards.
<div class="featured-title"><span>What We Do</span></div> <h2><span class="alt"> Building<br></span> Learning Solutions of the Future</h2> <hr style="height:0; visibility:hidden;" /> How do you stay on top in a fast-paced... <br><br> It’s about providing modern learning solutions...
Image Cards
The Italic font style in image card titles render the all-cap cap H3
The Bold setting renders the alternate color text
Make itStand out
Whatever it is, the way you tell your story online can make all the difference.
Logo centered
Use attached svg code for a centered logo. Remove center class to left-align.
Through a holistic, scientifically proven, and technologically advanced approach, Training Works seamlessly fills the skill gaps of your employees at an individual level.
Accordion
Slug /accordion allows for an accordion.
Note: To close the accordion, use an empty div in a code block where you’d like it to stop.
Al-Powered Skills
Assessment + Microlearning
While CATO™ is at the cutting-edge of learning technology, it may not be for everyone. It is one of many solutions Training Works brings to the table, and we will only recommend it if it makes sense for your unique workforce.
Testimonials
Slug /testimonials creates a testimonial accordion. This uses a summary block feeding from the /testimonials blog.
Clients
Slug /clients generates a layout with white background, and a background to the gallery section. As long as the layout stays within these current column settings, these will duplicate.
Sections can be targeted with CSS by using the index section slug.
You can also target by the unique section id
[id^="accordion-cover-next-section-advanced-solution"] { background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%); }
Slider Arrows
For white slider arrows leading into a darksection, target the section id and use following syntax to brighten and invert the arrow color, this will make them white. Add this to the Custom CSS section above or below all other code.
section[data-collection-id="60ca53fb8fed406f341284c6"] .slick-prev, section[data-collection-id="60ca53fb8fed406f341284c6"] .slick-next { filter: brightness(0) invert(1); }
Animation Custom
Make it stand out
Whatever it is, the way you tell your story online can make all the difference.
Animation None
Make it stand out
Whatever it is, the way you tell your story online can make all the difference.
Animation Site Default
Make it stand out
Whatever it is, the way you tell your story online can make all the difference.
