Resources

Valuable wisdom, helpful information, friendly education, and random musings to help our customers thrive.

Best Practices for Sitefinity Page Building

Written By Smooth Fusion

When best practices are employed, a site built on Progress Sitefinity CMS allows content managers to not only make minor edits, but to quickly create entire new site pages. As you will see in the videos below, when implemented correctly, a site built on Sitefinity is actually fun to maintain. 

It is often challenging for a web development firm to carve out the time necessary to do their own website. But when our team at Smooth Fusion designed and implemented our own www.smoothfusion.com website, we sought to make our site a model that demonstrates the power and flexibility of Sitefinity CMS.

In this series of brief videos, Sitefinity Certified Developer Jeremy Thomas shows how easy it is to create a web page from scratch from the Sitefinity CMS backend.

Introduction

In the introduction, Smooth Fusion Marketing Director Jake Picken will give a brief overview of the video series.

 

Part 1 – Page Template and Creating a Blank Page

In part one, Jeremy will show you around the page template that we use on the Smooth Fusion site. He illustrates how the header and footer are set up and how the template is designed to give unrestricted access to the body of the pages. He will create a new page from scratch and prepare to build out our Culture page.

 

Part 2 – Hero Image, Containers, and Content Blocks

In Part 2, Jeremy begins creating the Culture page by adding the custom widget for the page's hero image. Because our goal for the site was to use out-of-the-box Sitefinity widgets as much as possible, the hero is one of the few custom widgets created for the site.

Jeremy demonstrates how to create the page layout with containers and content blocks. The page begins to come together with the addition of content and a photo for the first sections of the page.

 

Part 3 – Basics of Bootstrap Classes 

In this video, Jeremy shows how to use basic Bootstrap classes to manage spacing as you are building a page. Don’t worry if that sounds complex or technical. While it may seem a little daunting at first, you can get the hang of it. After watching this part of the series once or twice, you will be able use these basic, but powerful, Bootstrap classes yourself. 

 

Part 4 – Columns, Rows, and a Custom Utility Class

In Part 4, you will see the creation of a layout of columns and rows. You will also see how to use a simple custom utility class to generate an attractive box and checkbox quickly.

 

Part 5 – Images, Text, Bullets, and Backgrounds

As the heart of the web page is constructed, we will continue to create content sections, including images, text, and a bulleted list with custom-colored bullets. We will also see how to add a light gray background behind a section of content.

 

Part 6 – Shared Content and Mobile Responsiveness

In the final installment, Jeremy shows how to add shared content blocks and finish up the page. He also gives a quick overview of how webpages are made to be responsive on mobile, changing layout as the screen size changes.

 

We Would Love Your Feedback

Please contact us and provide any feedback, suggestions, or requests for other content. And don't forget about our free Sitefinity tutorials and our free Sitefinity Satellite Newsletter, all provided by Your Sitefinity Experts™ at Smooth Fusion.

 

Smooth Fusion is a custom web and mobile development company and leading Progress Sitefinity CMS Partner. We create functional, usable, secure, and elegant software while striving to make the process painless for our customers. We offer a set of core services that we’ve adapted and refined for more than 275 clients over our 19 years in business. We’ve completed more than 1800 projects across dozens of industries. To talk to us about your project or review our portfolio, send us a message and a member of our team will reach out to you quickly.