Example of one column layout we will be building
Example of what we will be building in this tutorial.

Learn to Build One Column SiteFarm Pages

Create visually appealing single column home and landing pages

Quick Summary

  • 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

 

 

 

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

Design Perspective

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.
  • Balance
    • Consistency in alignment of text and images
    • Visual appeal of odd number of columns in a row

Components Addressed

  • 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:

Teaser Feature Screenshot
Full width custom block example
Rankings type custom block
Custom footer graphic

Accessibility Responsibility

When you start building websites, especially for UC, you take on the responsibility of making sure everyone can access and consume your content.

Tutorial Code Snippets

Custom Full Width Block

Full Width Custom Block Example

As explained in the tutorial, the .custom-fwb and .custom-fwb__body class names will depend on what you name your custom layout classes.

Rankings Block

Rankings type custom block

Here is the code used in the tutorial to center a weighted underlined block title.

Footer Graphic Block

Custom footer graphic

And finally here is the code used in the tutorial to eliminate the white space between our end of page graphic and the footer.

Media Resources

Primary Category

Secondary Categories

Design & Theming Front End Development Site Building Tips, Hints, Best Practices

Tags