Getting Started
This page is to give you some insight and guidance in how to use this template.
Admin Pages
I have setup admin pages for your reference to understand this template better and learn how to use it as intended. I do however recommend password protecting these pages if you would rather your site visitors not to see them.
Class Naming Conventions
The class naming conventions I've used are as user friendly as possible with logical names and a flexible range for your use in extending the themes layout the way you need. For a better understanding, visit the Style Guide page under the Admin folder.
Colors
Updating colors is fairly easy. Most, if not all colors on the template are using a custom color palette. This can be edited by:
- Using the color selector on any element
- Select the swatch you'd like to update
- Click the 'Edit' icon
- Change the hex code to your desired color
- And finally click Save.
Collection Slider
The infinite collection slider is non-native to Webflow. However, there is no custom code involved in making it work.
In order to make increase the amount of slides, you'll need to follow these steps:
1. Duplicate the last 'Lightbox Link' element within the first 'Slide Wrap' as shown in the picture below.
2. Link the 'Lightbox Link' as well as the 'Lightbox Image' with your new image field and alt text.
3. Set the 'Slide Wrap' 2d transform by following this formula
-((100% / amount_of_slides) x 2)
By default, we have 6 slides. Therefore our calculation is -((100% / 6) x 2) which equals -33.3333333334%. You can paste your value into the X value under the 'Move' tab in the '2D & 3D transforms' style.
4. Similar to the previous step, you'll also need to update the Width of the 'Lightbox Link' as well.
The formula for this is (100% / amount_of_slides), which again in this case is (100% / 6), that equals 16.6666666667%.
5. The last slide has the child 'Slide Wrap' with a secondary class 'Last'. You'll need to set the 2D & 3D transform Move X style to the same value from Step 4 but as a negative. In this case that will be -16.6666666667%.
6. Now set the 'Slide Wrap' to (amount_of_slides x 100). By default it is 600%.
7. You'll finally just need to duplicate a 'Phantom Slide' for the amount of slides you have, take away 2. We have 6 slides by default, therefore we should have 4 Phantom Slides.
Note: The last 'Slide' should stay the same as it is. It contains 3 'Lightbox Link' elements. They must be linked to the same collection fields as the first 3 'Lightbox Link' elements in the first Slide > Slide Wrap. This is to assist with a smooth transition in order for the slider to be infinite.
If you were to re-order or change the linked collection fields for any of the first 3 'Lightbox Link' elements in the first Slide > Slide Wrap, you'll need to make sure the ones in the last Slide > Slide Wrap match.
Columns
Column layouts are very powerful and allow you to easily create awesome layouts with ease.
You'll need to have a wrapper element with the class 12 Columns and then whatever layout you're intending on creating would be a multiple of the 12 columns, applied to the child element, with the Column class prepended. For example you could have Column 4 Column and Column 8 Column for a 1-2 split.
In my opinion this is a better option than the Webflow built-in column layout, as it has it's own limitations when creating more complex layouts.
Custom Code
This template uses no custom code whatsoever, with the exception of a no-index meta tag on the Admin pages. This is to prevent Google and other search engines from displaying the pages in search results.