Instructions
Instructions to get you started off on the right foot with your new Webflow template.
Solar Template Instuctions
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.
The landing page header
To create the current header effect there are 4 different places the text is in. There is the first line, the second line and then 2 more copies but in a different color for a total of 4 places. They are in div blocks with a class name of 'track'. I have created a video tutorial to make it easier to see how to change the text to whatever you want.
In the video all I am doing is double clicking in the text to highlight and re-type. Depending on how many or how long your new headline is, you may need to adjust the left margin. You can see this be done in near the end of the video tutorial below.
Textured background of Solar
Image Texture
The texure comes from an image. There are several different textures(more to come soon) that can be used. Right now it's the same texture image used across the site but you can mix and match. The texture also can be more versatile by rotating the image or scaling the image bigger by using the 2D & 3D transforms in the styles panel.
You can find the texture images in the assets panel in a folder labeld 'textures'.
Colorizing the Textured Background
You have the ability to colorize the texture. There is an element with a class name 'Texture Color' that you can change the background color to anything.
To use this element you have to turn it's display on by pressing on the block element display in the styles panel.
You can adjust the color in the background section of the sytles panel.
To get a lighter color use the white backgound texture version. This is also in the textures folder in the assets panel.
