Circles and Rings Color
To change the colors and gradients of the rings and circles throughout the website just click and stylize them here. The best thing about classes is the new style will take affect the element with that class across the rest of the website.
< Click on the circle here,
Change the circle gradients here >
Change the circle gradients here >
< Change the border color of these rings here
Change the Circle Badge Link gradient colors in the background section of the styles panel.
Change Background Colors
The main background color is stylized in the body class. The body class's background color is set to Lavish Black. You can change this in the style panel.
Each section class is set to transparent unless it has a second class added to it to make the background a different color.
CMS Content Management System
There are 3 CMS collections built for the Lavish template. They are for client testimonials, gallery and employee profiles. To learn more about CMS on Webflow go HERE.
Columns
Lavish is built using the 12 column system where the width of the screen, no matter the size, is split into 12 equal columns. The 12 column system is based on Bootstrap’s 12 column grid system. Using this system has more flexibility to create dynamic layouts and easily made to be fully responsive across all screen sizes. The length of the screen is split into 12 equal columns covering 100% width. So one column equals 8.33% and six columns equals 50%. This makes for all kinds of different layout options.
Column Classes
The column has a class of ‘Column’ and then a second class added to adjust the size. The second class starts with ‘Desk’ which stands for desktop. Desktop is the base breakpoint.
‘Desk’ is followed by a number representing how many columns it’s taking up. Desk 4 is a class where the column takes up 4 columns of space.
‘Desk’ is followed by a number representing how many columns it’s taking up. Desk 4 is a class where the column takes up 4 columns of space.
Column Tablet and Mobile Sizes
The column classes Desk 8 through Desk 12 are their relative sizes (Desk 8 is still 66.66%) on the tablet breakpoint. Then on the mobile breakpoint the columns take up the full width at 100%. Mobile viewport size is usually too small to have anything wider than a 1x1 block. It is best practice to have elements stack one by one in the mobile screen breakpoint.
< Desk 8 - Desk 12
The column classes Desk 1 through Desk 7 are full width at a 100% at the tablet breakpoint and the mobile breakpoint.
Flexbox is a Row
Columns are wrapped inside of a flex container. The flex container has a class named 'Flexbox'. Flexbox is the parent element to the column element making the column a child element. Using the flex layout aligns all the child elements horizontally or vertically.
Flexbox Tablet and Mobile Responsiviness
Flex layout on Webflow has a spot where you can adjust the space between the columns and rows. Since Flexbox acts as a row the space around the elements inside is setup horizontally. At smaller viewport screens the columns inside of Flexbox will stack vertically and therefore space around the columns need to be setup vertically. On tablet and mobile breakpoints I've added space in the row section of the flex layout styles(refer to images below).
Implementing a Column
Start by adding a div block and giving it a class of Flexbox.
Make sure the Flexbox is inside a container element with a class ‘Container’
Add a div block inside of Flexbox and give it a class of ‘Column’
Then give the Column a second class to determine the size of the column.
If you want only one column taking up just 5 columns that contains content in this row, you don’t have to add more columns to fill up to 12. It can just stay as is right now and it will remain its column size. That being said let’s fill up this row to show the spacing possibilities. I’m going to add a second column taking up 2 columns with a class of Desk 2 and a third column with a class of Desk 5.
Now we can add content to the columns. I've added a heading and a paragraph to the most left column and a picture to the right column. The middle column is blank and provides space between content.
