Your website’s visual appeal is crucial for capturing attention and keeping visitors engaged. With Roccai’s swipe module, you not only have a powerful decision-making tool at your disposal but also the ability to customize its visual layout to perfectly align with your brand’s unique style.
Let’s dive into the different styling options available and how you can create the perfect look for your site.
Explore a Variety of Customizable Styles
- Create a section with two columns.
- Set the background color to black or your preferred color.
- Left column: Add text and a button.
- Right column: Embed the module (see guide).
- Round the corners of the container by 10px.
- Create a section with two columns.
- Set the background color to a gradient from (#336370) to (#7ab2c2) or your preferred colors.
- Right column: Add text and a button.
- Left column: Embed the module (see guide).
- Round the corners of the container by 10px.
- Create a section with two columns.
- Set a background image for each column.
- Left column: Add text and a button.
- Right column: Embed the module (see guide).
- Round the corners of the container by 10px.
- Open the settings for the right column. Under Spacing, set the padding to 110px for both the top and bottom.
- Create a section with 3 columns.
- Change the section background to a gradient from white (#ffffff) to dark blue (#072130).
- First column: Embed the module (see guide) and round the container corners to 30px.
- Second column: Set a background color and round the corners with a 30px border. Add an image (drop), title, and text.
- Third column: Set a background color, round the corners with a 30px border, and add a title, text, and button.
- Create a section with two columns.
- Yellow Circle:
- Click the grey + in the right column and add a Divider.
- Set the background color to #f6c85d.
- In Design > Sizing, set the width and height to 380px.
- Set the Border to 400px to create a rounded circle.
- Field with dots:
- Add a transparent image with dots.
- Set Alignment to the left and Width to 34% in Sizing.
- In Spacing, set the right margin to 20%.
- Circle Made of Dots:
- Click the grey + in the right column and add a Divider.
- In Sizing, set the width and height to 220px.
- Set the Border to 400px to round the corners.
- Adjust the border width to 6px, choose a color, and set the border style to Dotted.
- Left column: Add text and a button.
- Right column: Embed the module (see guide).
- Round the container corners by 10px.
Whether your brand leans toward minimalism, bold designs, or custom flair, Roccai has a swipe module template to suit your needs.