Page Effects
Common effects
These effects appear across the site, each started by the class shown here:
- Heading Effect: heading words rise into place on scroll.
- Text Effect: lines of text rise and fade in on scroll.
- Image Reveal: a cover wipes away as the image settles into place.
- Primary Button Wrap: the button opens from left to right on scroll.
- Counter Wrap: the numbers animate on scroll.
Turn off with a class
Heading Effect and Text Effect are safe to remove. Select the element and remove the class in the Style panel. The content then appears without the animation. If the element sits inside a component, open the component first; the change applies to every instance.
A few elements also get their font size or color from these classes, so check the styling after you remove one.
Keep the layout classes
Image Reveal, Primary Button Wrap and Counter Wrap also hold the layout, so removing them breaks the design. To stop one of these effects, delete its interaction in the Interactions panel. This changes the whole site.
SVG Icons
Edit an icon
Most icons are inline SVG inside a Code Embed. Select the Code Embed, open the code editor from the Settings panel, make your changes, then choose Save and Close. If the icon sits inside a component, open the component first.
Change the color
Icons that use currentColor take the Font color of their class or parent, so change the Font color in the Style panel. If the code has a fixed value such as fill="black", edit it there or replace it with currentColor. Keep fill="none" on outline shapes, otherwise they fill solid.
Change the size
Check the width and height on the svg tag in the code, keep the viewBox, then follow the method the icon uses:
- Em values, such as width="1em": change the Font size on the class. If the class also sets Width and Height, change those too.
- Percent values, such as width="100%": change the Width and Height on the class.
- Fixed numbers, such as width="48": edit the numbers in the code and keep the same ratio. If the class also sets Width and Height, change those too.
Example
This icon uses em sizing and currentColor, so its size and color come from CSS. The path is shortened here.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
width="1em" height="1em">
<path d="M7.499.049a.737.737 0 0 0-.48.836 ..."
fill-rule="evenodd" fill="currentColor"/>
</svg>Replace an image
A few SVGs are placed as Image elements, so CSS cannot recolor them. To change one, replace the image with a new SVG file.