Learn to Build One Column SiteFarm Pages
Create visually appealing single column home and landing pages
- 2 Part Video Tutorial on Creating One Column Layouts and Components
- Custom Component Building
- Code Snippets
- Professional Design Tips and Tricks
- Tutorial Length: 1HR
- Mimic UCDavis.edu design elements
Layout Columns is now a web component so the internals are now hidden away in a Shadow DOM. So if you want to style the internals you should use CSS ::part(). So coloring the background now looks like:
The comprehensive value in this article is found in the video tutorial, please watch Single Column Layouts Part 1 and 2 to get the full value of this article. The videos have been embedded at the top of this page for quick access, but you will find useful code snippets farther down the page to help you duplicate the features from the tutorial.Jump to code snippets
What to Expect From this Tutorial
Prerequisites to Doing Advance Page Design
In the videos I show how to duplicate some of the layouts and components found on the UCDavis.edu home site. That site is fully customized and managed by a team with both development and design professionals. You can duplicate much of what you see using the tools in SiteFarm, but you will need some beginner to intermediate HTML and CSS skills to pull off these type of layouts.
To learn more about HTML and CSS go to W3 Schools Website
- Basic HTML training
- Basic CSS training
We also talk about the design decisions that go into making such great layouts as those seen on the main UC Davis webpage and why it is so successful. Once you know why it looks good, you can apply those principals to your own page designs.
- Optimal Line Lengths
- Visual Rhythm
- Alternating dark and light fields going down the page is a hallmark on single column, edge to edge, page design.
- Consistency in alignment of text and images
- Visual appeal of odd number of columns in a row
- Hero Banner
- Link Grid/Priority Links/Vertical Focal Links
- Centered Teaser (Basic Block)
- Full Width Custom Block (Basic Block)
- Ranking Block (Basic Block)
- Full width end of page graphic (Basic Block)
The highlights being how to use the Basic Block to create components like these:
When you start building websites, especially for UC, you take on the responsibility of making sure everyone can access and consume your content.
- Check your colors
- Check mobile
Tutorial Code Snippets
Custom Full Width Block
As explained in the tutorial, the
.custom-fwb__body class names will depend on what you name your custom layout classes.
Here is the code used in the tutorial to center a weighted underlined block title.
Footer Graphic Block
And finally here is the code used in the tutorial to eliminate the white space between our end of page graphic and the footer.
- Pattern library