Using Animations and CSS on Custom Pages

You can now enhance the look and feel of your custom pages with new animations and the ability to add custom CSS per page. These updates, available through OfferingTree, allow for greater visual customization of your website.

How to Apply an Animations to your Website

1. Navigate to Site Settings and scroll down to see the Page Animation settings. This will apply it to all pages. 
2. Choose the style and speed of your animations and press Save Settings.
3. You can also preview different styles and speeds here.

Overriding Page Animations

Animations provide a subtle, engaging effect when a user visits a page.

How to Apply an Animation

1. To override Animation Settings on specific pages, head over to the Pages tab under Edit Website.
2. Select the page you want to edit (e.g., the Home page) and click the edit tab.
3. In the left-hand settings panel, go to Page Styles and scroll all the way down.
4. The animation setup is found in two settings, Animation Style and Animation Speed. The default setting is a "Fade Up" at a medium speed.
5. Change the animation type (e.g., no animation, fade up, scale, slide left, etc) and speed as desired.
6. Save your changes.
7. Refresh the page to see the new animation applied to all building blocks.

Animation Notes

• Re-animation: Scrolling back up a page will not re-animate everything. The animation is triggered only once per refresh or visit to the page.
• Scope: Once you set an animation, it will apply to all separate template blocks within that single page. Separate template blocks do not have a setting for individual animation styles.
• Per Page Customization: You can set a different animation style for separate pages (e.g., your "schedule" page). To do this, simply edit the specific page, find its page style settings, scroll down, and add the desired animation.

Adding Custom CSS per Page

You can now add custom CSS directly to each page to further customize its appearance. This feature allows you to customize the appearance of that specific page.

How to Apply Custom CSS

1. Edit the specific page (e.g., Home page or any custom page) via the Pages tab.
2. In the left-hand settings panel, go to Page Styles and scroll all the way down.
3. Paste your CSS code into the designated area.
   • For example, you could use CSS to make all buttons the same on your site, or to change the font across different parts of the page.
4. Save your changes.
5. Refresh the page to see your CSS changes applied, such as a change to the header or font style and color.

Reverting Changes

If you need to remove the custom styling, you can either change the code or simply delete the code and save. Deleting the code will revert the page's style back to its previous settings.

P.S. Join our Facebook group and connect with other OfferingTree users to share questions, offer ideas and insights, and support each other towards a more thriving wellness business.

Register to our monthly Skill Sparks to stay ahead of the curve! This is where we dive into all the new features and updates like Animations and other website edits we just covered. It's the best way to ensure your wellness business is always taking full advantage of the latest tools.