Create a website with the Timer Bootstrap template: Create and setup the pages | MVC

Header

The Home page contains a header with information about the designer. To create this header, use a Content block widget and paste the required HTML in the widget.

In the Header section of the Home page, there is a View works button that takes you to the Latest Works section. In the Bootstrap Timer template this is achieved with the help of the JavaScript method scrollingTo(), which takes the value of the data-section attribute and tries to get an element that matches the selector. In the original template, this selector is the ID of the element. Since Sitefinity CMS grid widgets do not have IDs and you replaced all IDs with CSS classes in step 5 of the Setup page templates section, you use the .sf-works for the data-section attribute of the View works button.

About me

The About me section consists of some text and an image.

To accomplish this design:

1. Place a section grid widget.
2. In the widget designer, in the section property, set sf-about.
3. Place a container grid widget and then another grid-6+6 grid widget in it.
   The two columns of grid-6+6 grid widget have col-sm-6 CSS classes, so click Edit and add the classes to the Column 1 and Column 2 properties.
   The layout is now complete.
4. Drop two Content blocks widgets in each column:
   1. The Content block widget in the first column contains text and simple markup with classes.
   2. The Content block widget in the second column contains an image and some markup.
      Via the Insert image tool of the Content block widget. Add the image.

      NOTE: You do not use the Image widget in this case because some additional markup around the image is required. The easiest way to add the markup is to do it directly in the Content block widget.

Latest works

1. The Latest works section consists of artworks with title, image, and details information.
2. Add a section grid widget and set the CSS class required as you did in the previous step.
3. Place a container grid widget in the section grid widget.
4. To add new items and modify existing ones, create a dynamic module called Artwork, with content items "works" and with the following fields:
   1. Title
      Type: Short text
   2. Information
      Type: Long text
   3. Description
      Type: Short text
   4. Image
      Related media (images, videos, files)
5. Create a few module items in the Artwork module under Content » Artwork.
6. Modify the List and Details templates of the module to suit the design.

   NOTE: Every custom module has a List and Detail widget templates automatically created under Design » Widget Templates. Template names are List.work (List.[name-of-content-item]) and Detail.work (Detail.[name-of-content-item]), respectively.

7. To modify the default List or Detail view or to create new views:
   1. Create a folder with the name of the content item work (not the content type) in <root>/ResourcePackages/BootstrapTimer/Mvc/Views/.
   2. Inside the <root>/ResourcePackages/BootstrapTimer/Mvc/Views/work folder, add the templates following the naming convention. For more information, see Naming conventions.
8. To modify the List view, in <root>/ResourcePackages/BootstrapTimer/Mvc/Views/work add a .CSHTML file List.work.cshtml after the name of the content item (work).
   To create another list or detail template, create a .CSHTML file and follow the naming convention List or Detail + [name-of-the-template] + .cshtml. The [name-of-the-template] is displayed in the widget designer as a template option for the works widget.
9. Create List.WorkList.cshtml in <root>/ResourcePackages/BootstrapTimer/Mvc/Views/work and modify its markup.
10. Drop a works widget to the page and open its designer.
    Choose WorkList list template and configure it to open single items on the Artworks details page.

Offer from me

For the last section:

1. Place a section grid widget and a container grid widget in it.
2. Setup the CSS classes.
   This section consists of two rows with 3 column elements on each row. The elements have col-md-4 col-lg-4 col-xs-12 classes assigned. Again, use the default grid widgets that come with -md classes and manually add the other resolution classes through the grid widget designer.
3. Complete the layout with Content block widgets in each column element.

1. Create the page and place a works widget.
2. Create a new Detail template in the same manner as you created a List view. For details, see the Latest works section.
3. Configure the works widget to use it. For details, see the Latest works section.

1. In the global-page-header section of the Content block widget, edit the page title.

   NOTE: You added the Content block widget on the page template and marked it as Editable on pages in the last step of the Setup page templates article.

2. Setup the next section with a section grid widget and place another container grid widget in it.
3. Configure the widgets as required to suit the design of the page:
   1. The section has two columns, so place a grid-6+6 grid widget in the container grid widget.
   2. Since the first column contains an image, use the Image widget to upload the image to Sitefinity CMS libraries and add it to the page.
   3. Add the img-responsive class through the Image widget designer.

      NOTE: All static content, for example, text, that is not part of any module can be placed directly in the Content block widget.

4. Setup the next section with a section grid widget:
   1. Set the about-feature clearfix CSS classes.
   2. Place a Content block widget and add the section HTML in the HTML view of the widget editor.
5. Setup the next section with a section grid widget and place another container grid widget in it.
   Configure the widgets as required.
6. For the Meet the team section, create a module Team with content items "teammembers" and fields:
   • Title (Name)
     Type: Short text
   • JobTitle (Job Title)
     Type: Short text
   • ShortInfo (Short info)
     Type: Long text
   • Facebook
     Type: Short text 
   • Twitter
     Type: Short text
   • LinkedIn
     Type: Short text
   • Google (Google+)
     Type: Short text
7. Create a List template.
   Change its markup and configure the template. For details how to do this, see the Latest works section.

1. Setup the What we love to and the Our happy clients sections in a similar way as you did with the sections on other pages. For details, see the About section above.
2. To configure the list with featured artworks on this page:
   1. Navigate to Content » Artwork.
   2. Mark all featured works with tag Featured.
   3. Place a works widget on the page and narrow the items to be displayed to the ones with tag Featured.
   4. In the List settings tab, set 4 items to be displayed and configure the list template.
   5. In the Single item settings tab, configure single items to be displayed in the Artwork details page.

This page contains an image gallery with artworks.

1. In the <root>/ResourcePackages/BootstrapTimer/Mvc/Views/ImageGallery folder, create a custom Gallery template List.WorksGallery.cshtml and modify its markup.
2. In Content » Images, create a new Artworks album.
   Configure the Image gallery widget to display images from this selected gallery only.

Blog full

The Blog full page displays the full list of blog posts, with a text excerpt. Some blog posts have related artworks. To relate artworks to blogposts via related data:

1. In the Blog posts module, in Custom Fields for posts, add a custom field from type Related images.
   This field is used for the header image.
2. Some blog posts may have related artworks, so create another custom field ArtWork from type Related data and data type works.

   NOTE: You can add tags to posts, for example, business and people.

Next, create the page:

1. Create Blog full page and place a Blog posts widget on it.
2. Under <root>/ResourcePackages/BootstrapTimer/Mvc/Views/BlogPost/, create a List template and modify its markup.
3. Configure the Blog posts widget to use the BlogPostList template and to open single items in Blog details page.

Blog details

1. Place a Blog posts widget on the page.
2. Under <root>/ResourcePackages/BootstrapTimer/Mvc/Views/BlogPost/, create a Detail template of the Blog posts widget.
   Add a template for the related artworks in the folder.
3. Navigate to Content » Artwork » Pages where items like this are published and move Artwork details page on top.
   Thus, related artworks of a blog post are displayed on the Artwork details page.

Each blog post detail template contains a social share option. To enable it:

1. Open the Social share widget designer and navigate to Edit » Advanced » Modal.
2. Set EnableSocialShare to True.
3. To change the template of the Social share widget, under <root>/ResourcePackages/BootstrapTimer/Mvc/Views/ create a SocialShare folder.
   Copy the SocialShare.cshtml from <root>/Mvc/Views/SocialShare and paste it in the new folder.

   NOTE: To enable more social sharing options, navigate to Sitefinity CMS Administration » Settings » Social sharing and select the options you require.

To enable comments for blogs:

1. Navigate to Administration » Settings » Advanced » CommentsModule » Commentable types.
2. In <root>/ResourcePackages/BootstrapTimer/Mvc/Views/Comments, create custom comments templates.

   NOTE: When modifying the template, make sure to keep the Sitefinity CMS comments features, such as sorting and comments count. In addition, you can enable the captcha feature from Administration » Settings » Advanced » CommentsModule » UseSpamProtectionImage.

Blog left sidebar

The specific sections for this page are the Search section, Categories section, and Recent posts section.

For Search section:

1. Use a Search box widget.
   Create a new search index for blog posts in Administration » Search Indexes.
2. In the <root>/ResourcePackages/BootstrapTimer/Mvc/Views/SearchBox folder, create a new Search box widget template.
   Change the markup as required:
   1. Configure the SearchBox widget to use the created search index.
   2. Configure the SearchBox widget template to display results on the Blog left search page.

For the Categories section:

1. Use a Categories widget.
2. Create a custom CategoriesSidebarList template, as you did for widgets in previous sections. For details, see the Latest works section.

For Recent blog posts section:

1. Use a Blog posts widget.
2. Create a new template BlogPostSimple.
3. Configure the widget to:
   • Show only 3 items in total.
   • To sort posts so that last published are on top.
   • To open single item in Blog details page.
4. Drag a Blog posts widget and configure it to open single items in Blog details page as you did for the Blog full page.

Blog left search results

To create this page:

1. Make a duplicate of the Blog left sidebar page.
2. Change the Blog posts widget with a Search results widget.
3. Navigate to Content » Blogs and in the Actions menu for the Blog item, open Title and Properties.
4. Set the Default page property to Blog » Blog details.
   As a result, blog posts from the Search result widget are displayed in the Blog details page.

The Contact page contains a Contact form. You create the other sections with section + container grid widgets and Content block widgets:

1. In Content » Forms, create a Contact with me form and call it ContactWithMe.
2. To change the markup of the fields of the form, in the <root>/ResourcePackages/BootstrapTimer/Mvc/Views/ folder, create the following folders:
   • ParagraphTextField
   • TextField
   • SubmitButton
3. Copy the corresponding templates from <root>/Mvc/Views/.
4. Change the markup as needed.
5. in the Form widget designer, in Settings tab page, customize the message that is displayed upon form submission.