In this tutorial, you create a responsive Sitefinity CMS website from scratch using the Timer Bootstrap template and the Feather framework. The tutorial is primarily aimed at frontend developers, as it showcases how easily and quickly to create any Sitefinity CMS site using intuitive methods for developing UI components.
You create a responsive design, utilizing frontend packages, built-in and custom widgets, widget and page templates, and various styling options.
The Timer site is an online business card for a web designer who presents his artwork and projects. The goal of the site is to showcase the designer’s work and background and encourage visitors to provide him with feedback and contact him.
You can view the site on a variety of devices - desktop computers, tablets, and smartphones, as it is designed using responsive web design methods. Each page on the site is associated with different topic of the designer’s work. You have a number of options to view artworks and their details:
In addition, you can filter and browse the designer’s blog posts and contact him via a Contact us online form.
This Timer site is based on the popular frontend framework Bootstrap and the free Bootstrap Timer template.
By using the Bootstrap framework, you can build a responsive, mobile-first design and project by taking advantage of Feather resource packages.
The BootstrapTimer project consists of two parts:
Similar to any Sitefinity CMS site, the Timer site is organized by pages and a page templates. The page template is based on the Bootstrap framework, backed by Feather resource packages. For details, see Feather: Base page templates on layout files. The Timer template is applied on the default page template. Several Sitefinity CMS pages are created just to serve or preview specific content – About, Service, Blog, and so on.
All pages contain section widgets and custom grid widgets that require them to be added to one or more templates, depending on whether these widgets are used in all pages or just a few. The templates are based on the default page template.
The Timer site has fixed navigation to make browsing the site by topics easier and the search capabilities faster. You modify the Bootstrap navigation to serve the purposes of the site.
As this navigation is part of every page, you drag the Feather Navigation widget on the page template itself.
The work of the designer is represented via Artwork items in the Artwork custom module in Sitefinity CMS. Each item has related details, such as title, information, short description, and image. You modify the List and Details templates of the module to reflect your design requirements and site purpose.
You display items with the works custom widget, in combination with Feather Content block widgets. Since there are specific styling and appearance requirements, you replace the template of the widget with a custom one. For details, see Feather: Modify widget templates. Artworks are displayed via a couple of lists.
You also display artworks via a custom ImageGallery template and configure the Feather Image gallery widget to display images from this gallery.
The Blog posts module has custom fields, for example for related images or artworks. For more details, see Content relations. Blog post details are populated in the corresponding fields and by a Detail template. Each blog post detail template contains a social share option via the Feather Social share widget. In addition, you also enable comments for the blogs.
Back To Top