Homepage Slider Instructions
The homepage slider is built as a Container Element (with the custom class “compound-hero-image” applied) that contains 1 Content Element per slide. Each Content Element has the custom class “compound-hero-image-slide” applied.
To add each slide, you’ll want to
- Temporarily turn the Theme on the Homepage off: Click the Page Layout and Appearance button, next to the Compose button, and in the Theme dropdown, select “None” – DO NOT PUBLISH THE PAGE WHILE THE THEME IS OFF – THAT WILL STRIP THE STYLING FROM THE LIVE HOMEPAGE.
- Add the Content Element for the slide you’re creating, or make changes to an existing slide – Make sure any new content element (slide) goes INSIDE the Container element.
- Turn the theme back on, and
- Publish if happy with the changes.
*You can test out/build new homepage slides on the Homepage Instructions page (a clone of the homepage) in the Instructions branch in your site, and you can use the Shared Element Feature or Copy/Paste Element feature to place the new slides into the real homepage.
TIP: To the right you can see that there are Shared elements for the default color slide and custom color slide. You could drop those in, orphan them, and edit them from there to create new slides if you'd prefer that to building from scratch.
Anatomy of a slide:
Photos: These are placed in the body of the content element, one right after the other, each inside
Top text block:
- This is located in the Content Element Settings > Design > Header Content.
- The large text is placed first and coded as an H1
- The supplemental text is just normal text
Bottom text block:
- This is located in the Content Element Settings > Design > Footer Content.
- The text blurb is just coded as normal text.
- The button is created just like all other buttons (Add text, use link settings menu to add link and button classes for styling).
Coloring the text blocks:
- The default colors are black on top and maroon on the bottom.
- If you’d like to change the colors of the text blocks, go to the Content Element Settings > Design > Custom Class
- In addition to the class “compound-hero-image-slide”, which will be used on every slide, you can add the following classes (all classes should be separated by a space):
- top-hex-ed9203 (where the 6-digit hex code is your desired color)
- bottom-hex-566a8d (where the 6-digit hex code is your desired color)
- 4.So if using both custom colors, your entire line in “Custom Class” would read “top-hex-ed9203 bottom-hex-566a8d compound-hero-image-slide”
News & Events Instructions
The News and Events sections are fairly basic News and Calendar elements. You can change the news categories/calendars you'd like to pull from and, for calendar, the date range you'd like to look at, by going into each element's settings. The View All links are located in Element Settings > Design > Header Content.
STEAM Feature Instructions
This feature is built as 2 wrapper Container elements (Custom Class "panel-full-width" on the outside and Custom Classes "panel-expanding panel-expanding-initials" inside that) which contain 6 Content elements: one for the overlay that appears before hover on desktop and on mobile and 5 more, one for each expanding panel.Overlay Panel includes (all in the body of the Content Element):
- An H1 title
- A short description (in the neighborhood of 15 words) contained within tags
- A button
- (The custom class of "panel-expanding-overlay" under Element Settings > Design > Custom Class)
- A title placed in Element Settings > Title
- An image placed in Element Settings > Design > Header Content
- A sentence (in tags) and a button, both in the body of the content element
- (The custom class of "panel-expanding-item" under Element Settings > Design > Custom Class)
Science isn’t just a body of knowledge — it’s a process, a means of investigating, and a tool for interpreting discovery.Learn More
Classes use technology to effectively find and manage information and then to critically evaluate and ethically apply it.Learn More
Students take engineering courses on our campus or at NYU's Tandon School of Engineering.
The creative process teaches students to generate ideas, prototype, collaborate and innovate.Learn More
Math teaches students to analyze, problem solve and think critically.Learn More