Instructions
Instructions to get you started off on the right foot with your new Webflow template.
Side Blog Template Instructions
12 Column Layout
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 width of the screen is split into 12 equal columns covering 100% width. Learn more about the 12 column grid system.
Tabs
This website has a more dynamic tab link componant with an image added to it. The tab image is a circle and to replace the image, click on it and go to the settings panel in the right then go down to 'replace image'. Images needed to be added to the assets panel in the left to be used on the site. Learn more about Webflow images here.
The tabs in the image above shows the scrollbar becuase the tabs scroll sideways. There is already code in the page's settings that stylize the scrollbar to fit the design of this webiste. Note that you only see the styles from the code on the published site (sideblog.webflow.io) but not in preview mode in the designer.
The CMS of SideBlog
To have more dynamic content I created a multi-reference CMS. Since there are muli-reference componants I utilized the CMS conditions and filters features in the settings panel.
The filter effects the CMS list and the condition effects the CMS item. Learn more about filters and conditions from Webflow.
Exhibit A
Exhibit B
Tip
When you click on any element in the designer and it becomes outlined in a blue square it is directly editable right there. If the element becomes outlined in a purple square it can only be edited in the CMS. Learn more about Webflow CMS here.