Editing the Horizontal Scroll Section in Highmodernity Template
To edit the horizontal scroll section in the Highmodernity Template, follow these steps:
- Expand Horizontal Scroll Wrap:
Locate the horizontal-scroll_wrap element.
Expand this element to reveal the height element. - Expand Height Element:
Once the height element is visible, expand it to access the sticky-horizontal element. - Edit Full-Height Content:
Select the sticky-horizontal element.
In the right control panel of Webflow, navigate to the Size panel.
Change the Overflow property to Auto. This will allow you to access and edit all the content within the full-height section. - Revert Overflow Property:
After making your edits, return to the right control panel.
Change the Overflow
property back to Hidden
.
Using Utility Classes in the Highmodernity Template
To effectively align elements and apply background colors using the Highmodernity Template, follow these guidelines:
- Applying Background Color:
Use the class u-theme-dark
to correctly apply the background color to elements. - Aligning Container Content:
To align the content of a container according to the template's design, use the class u-container. - Styling HTML Tags:
For styling HTML tags such as headings, paragraphs, text blocks, and rich texts, refer to the Style Guide Page. Here, you will find all the necessary classes to apply the correct styles to these elements.
Ensuring Marquee Loop Animation
To ensure the marquee plays in a loop on each page, follow these steps:
- Select the Desired Page:
Navigate to the page where you want the marquee animation to work. - Access Interaction Options:
In the Webflow designer, open the Interaction options panel.
- Set Page Load Animation:
Locate and select the Page Load animation.
Choose the marquee animation from the available options. - Enable Loop:
In the animation settings, find the Loop option.
Make sure to check the Loop option to enable continuous playback.