Instructions
Keep track of design changes made to this template by recording them here.
How to customize section divider waves
The "waves" dividing various sections have been designed in Figma and added as background images so that they can be easily replaced. Click on the wave you want to customize and follow the instructions below to make it suitable to your requirements:
- You can increase or decrease the height of the wave by editing the "Min H" (Minimum Height) property in the Style panel.
- You can change the position of the wave to appear at the top or bottom of a section by editing the "Position" property in the Style panel.
- You can change the direction/angle of the wave by editing the "2D & 3D Transforms > Rotate" property in the Style panel.
- You can remove or replace the wave image by editing the "Backgrounds > Image & gradient" in the Style panel.
- Since these are PNG images, you cannot change the color of the waves within Webflow.
- To generate your own waves of different styles, colors and patterns, a great quick and free resource is https://getwaves.io/. Alternatively, you can create similar shapes in any free design software like Canva or Figma.
How to customize SVGs
Icons and rounded image frames are set up using SVGs (Scalable Vector Graphics) inside embeds. They are easy to use and customize (change color, size etc.) without losing quality.
- To change the color of an SVG icon, simply head over to the "Typography" section in the Style panel, and change the "Color" property.
- To change the size of an SVG icon, open the code embed and make your desired changes to the "height" and "width properties".