Embedded Files
⚠️ GUIDE NOTE: Pardon the dust! This guide still under construction. ⚠️ If there is any edits you see, please notify Nick for Edits. ⚠️
On the home page there is two sizes implemented.
The desktop at 1920 wide, and the mobile at 340 wide.
Below is the sizing, and the terms used for each block.
DYNAMIC*
DYNAMIC*
The desktop version is a dynamic page. So the text and the picture will size to the page. This is a AUTO button. Because of this its best to create these into thirds.
Left, Center, Right for where the text could go.
*THIS IS A OPTION.
All images are able to be made without the website generating the text, if we dont design to have this setup like so. In that case, everything below is not necessary in the build.
RULE OF THIRDS
RULE OF THIRDS
When using the dynamic function, it is important to build the Hero Image using the rule of thirds. This will help keep 75% of the image full, while the other is set for the text of that image.
We are able to set the font to be set to the Left, Center, or to the right.
TEXT POSITIONS
TEXT POSITIONS
In Dynamic mode, There are two text positions. The top row and bottom row. The top in the example is the Heading, the smaller text is called the Caption. These are able to flip.
GRADIENT
GRADIENT
This is the best practice to use for allowing the font to come forward. As you can see in the original image there's not enough contrast for the white text, so the gradient is placed so that where the text goes the contrast is more extreme allowing the text to be seen, yet the image still stand out.
Page updated
Report abuse