Dec 19, 2019
You’ve successfully installed and configured Sitefinity and may have watched our Getting Started video. Now, you want to get past the basics discussed in this first video and get down to the real action - learn how to design your Sitefinity website.
Designing a template is one of the key tasks you have to deal with when starting a website project. Fortunately, with Sitefinity, this is an easy and straightforward task – at your disposal you have a powerful set of tools that help you create any type of design and at the same time allow end users to have control and flexibility over modifying layout and templates.
In this video we’re going to take a closer look at what templates are – not just page templates but widget templates as well. To show you how these work together and complement each other, let’s log in to one of our sample projects - a website called Quantum.
Whenever you create a brand new page, Sitefinity gives you a number of templates to choose from that works best for your website goals. You can pick one of the templates that come out-of-the-box with Sitefinity, or, alternatively, one of the custom templates that come with the Quantum project. Actually, this is quite a common scenario – you may have to create new templates to suit your needs. Now, select the Quantum template and you will be redirected to the page Edit screen.
You can see that this new page is already styled and that there are a few widgets in place, such as Navigation, Search box, and Language selector. Additionally, there are some styles that are already applied – for example, the background right here. The design and the prepopulated widgets are there because they have been set on the underlying template that this new page is based on.
You can still interact with and modify the editable sections of the layout, such as this content section, to better fit your page context and to create new content and functionality on each page. At the same time, the overall design remains consistent thanks to the original page template and its shared but predefined design, layout elements, and widgets. If you need to, you can explicitly make the widgets editable on pages as well.
So, pages are structured with the help of content widgets and layout elements and their look and feel is always based on a page template that predefines their style. Page templates are the primary tool that you’re going to use to establish the design and the custom look and feel of your website or even throughout the different websites, created within your project.
You might wonder where these page templates originating from. You will find them in the Design section, where you will also see statistics about the pages that are based on each template. Let’s go to the Quantum template. When you click and edit it, you can see that the drag and drop editor looks almost exactly the same as the one you just saw in the page editing screens. This time, however, all the layout elements are editable – none of them are locked, plus you can add new ones from my toolbox and rearrange the layout altogether. Apart from the page editor, you can see that there is some styling and structure that’s coming from elsewhere. If you were to strip out all the layout elements and content widgets, added while in the page editor, you’ll still be left with 3 boxes, or, placeholders. Once you follow through the template hierarchy, you’ll notice that the so-called “base template” is actually itself based on another file that is stored on our file system. This is the actual layout file which defines the general structural division of pages into section and links to different CSS and JavaScript files needed by the pages.
An ASP.NET developer will see something familiar here. This is because the layout file is actually based on a standard .cshtml file. In such a file, you define your own markup, wrapper divs, controls, and placeholders that will be then an indispensable part of Sitefinity templates and pages. Additionally, you can link to different resources, such as globally used styles and scripts. Thus, by leveraging the ASP.NET technology, Sitefinity enables simplified and efficient application development by letting you take full control of the generated markup. The default, or, built-in templates and resources used within the markup, are shipped within a resource package. Currently, out-of-the-box, Sitefinity is shipped with the Bootstrap 4 package, which is based on one of the most popular front-end frameworks Bootstrap, thus making use of its beautiful styles and rich capabilities. Thanks to Bootstrap, all of the Sitefinity built-in MVC widgets are mobile-first, convention-based, and responsive by default.
Now that we have page templates all clarified, let’s check what else we have on this page. If you have already played around with the page editor and dropped some widgets on the page canvas, you’ll notice that the widgets you dropped from the toolbox have different styling from the widgets preconfigured by the page template design. The reason is that besides defining page design and layout with page templates, you can change the look and feel of pages by using different widget templates.
Widget templates are the files that define the structure and properties of the widget and how the content that the widget “represents” is to be displayed. To check out the available widget templates for each widget, you can simply click Edit and then check the Template dropdown. For the content widgets, such as News and Blog Posts, you can explore the List and Single Item settings tabs. For example, if you are configuring a Blog post widget settings, List mode means when a user is viewing a list with all available blog posts, and Detail mode is when you are displaying the contents of a particular blog post.
To try it out, let’s drop a News widget. In its List settings, you can see 4 options. These are actually the default template and 3 custom templates, created in advance just for the Quantum site. Go ahead and select the different options to check out how the way your news items are displayed immediately changes. You can do the same for the details view – once you change the template, the appearance of the blog post details view changes in accordance to the markup and style defined in the newly selected widget template.
If you want to learn how to create your own page and widget templates, go on to the next video and take it a step further - we’ll work in Visual Studio and create our own templates from scratch.