Sitefinity How-tosLearn how to add content to a page

How to

• Add Image widget to a page

  Within the edit view of a page, you can add the image widget to a page.
  

  1. On the right side menu, click the Content tab, click the Content drop-down menu and find the Image widget. Click, hold and drag the Image widget onto the desired part of the page, and then release the image widget
     
• Add an image using the Image widget
  1. After you have added the image widget to a page, click the Edit button on the widget
     
  2. You can either upload an image from your computer or select a preloaded image. Review how to upload images to a gallery.
     • Upload an image from your computer
       1. Click the Upload image link in the upper-right-hand corner of the screen
          
       2. Click the Select image from your computer link to select a photo or simply drag and drop an image.
          
       3. Select where to store the uploaded image, add a meaningful title and alternative text and click the Upload button
          
       4. You can adjust the title and alternative text if needed. Do not adjust the image size on this screen. All cropping and image optimization should be done before it is uploaded to Sitefinity. Click the Save button when complete.
          

How to

• Add List widget to a page

  Within the edit view of a page, you can add lists to a page. You must create a list first.

  1. On the right side menu, click the Content tab, click the Content drop-down menu and find the List widget. Click, hold and drag the List widget onto the desired part of the page, and then release the list widget
     

   

• Selecting a List widget template to be displayed on a page
  1. In the edit view of the page, click edit on the list widget.
     
  2. Click the List items drop-down menu under the Templates section
     
  3. Select the desired list widget template.
  4. Click the Save button when complete.

  List widget template examples:

  Accordion List | Anchor List | Expandable List | Expanded List | Link List | Link Card List | Panel List | Simple List | Tabs List

• Filtering list items with Categories & Tags

  You must add categories or tags to a list item before you can apply them to the list widget.

  1. In the edit view of the page, click edit on the list widget.
     
  2.  Under the Filter list items by section click the words Categories to filter by categories or Tags to filter by tags.
     
  3. Click the Select button
  4. Search for and select the desired category or tag name. You can select multiple categories and tags.
     
  5. Click the Done selecting button.
  6. Click the Save button when complete.
• Add CSS Classes to a List widget on a page
  1. In the edit view of the page, click edit on the list widget.
     
  2. Click More options and insert CSS classes in the CSS classes field. Multiple CSS classes can be added but must be separated by a space. List widget helper classes can be found on the Sitefinity Cheatsheet. 
     

How to

• Add Blog widget to a page

  Within the edit view of a page, you can add the blog post widget and display blog posts.
  

  1. On the right side menu, click the Content tab, click the Content drop down menu and find the Blog posts widget. Click, hold and drag the Blog post widget onto the desired part of the page, and then release the blog post widget.
     

  
• Selecting which Blogs to display

  Within the edit view of a page, you can select which blog post(s) to display.

  1. After you have added the blog post widget to a page, click the Edit button on the widget
     
  2. Under the Content tab, select which blog posts to display
     • From all blogs: This is the default setting. This will display all blog posts from all blogs on the website. 
     • From selected blogs only: you can specify which blogs to display
     • From currently open blog: do not use this setting
     • Selected blog posts: you can select one or more individual blog posts to display
       
  3. Narrow selection further
     • All published blog posts: This is the default setting. This will display all published blog posts.
     • Selection of blog posts: you can add filters for categories, tags, and/or published dates. You must add categories and/or tags to the blog posts before you can add the filter to the blog post widget.
       
  4. Click the Save button when finished.
• Customize Blog posts settings

  Within the edit view of a page, you can customize how blog posts display.

  1. After you have added the blog post widget to a page, click the Edit button on the widget
     
  2. Under the List settings tab, select the paging and limit settings.
     • Use paging: This is the default setting with up to 20 items per page displaying. You can edit the number of items displayed.
     • Use Limit: You can limit the number of items displayed.
     • No limit and paging: Shows all published items at once. This setting is not recommended.
       
  3. You can sort blog posts with these settings:
     • Last published on top: This is the default setting. Sorts the latest articles that have been published in descending order by date.
     • Last modified on top: Sorts the latest articles that have been edited and saved in descending order by date.
     • By Title (A-Z): Sorts by the title field of the blog post.
     • By Title (Z-A): Sorts by the title field of the blog post.
     • As set manually: Sorts by the the order of the blog posts in the blog. You can manually reorder blog posts.
     • As set in advanced mode: Do not use this setting
       
  4. Select the list template
     • Blog post list: This is the default setting. Displays the blog post title, date, time, author, summary, and featured image
     • Blog post slider: Displays the blog slide title (if this field is empty, it will display the blog post title), blog slide summary (if this field is empty, it will display the blog post summary), and the blog slide background image. See the Create a Blog slider how-to for more information about these fields.
     • Blog title date: Displays blog post title, date, time, author, and featured image
     • Blog title date full content: Displays blog post title, date, time, author, content, and featured image
     • Blog title date summary: Displays the blog post title, date, time, author, summary, and featured image
     • Blog title only: Displays the blog post title and featured image
       
  5. Add CSS classes
     •  Insert CSS classes in the CSS classes field. Multiple CSS classes can be added but must be separated by a space. View the blog posts classes and examples. 
       
• Customize how the blog post article displays

  Within the edit view of a page, you can customize how blog post articles display and select the page that it opens in. You must create a separate page with the blog post widget on it first.

  1. After you have added the blog post widget to a page, click the Edit button on the widget
     
  2. Under the Single item settings tab, select the page that the full article opens in.
     • Auto-generated page: This is the default setting and will open the article within the same page. This setting is not recommended.
     • Selected existing page: Select the article page with the blog post widget on it.
       
  3. You can also add custom CSS classes to the article under the More options section. View the blog posts classes and examples. 

How to

• Add News widget to a page

  Within the edit view of a page, you can add the news widget and display news posts.
  

  1. On the right side menu, click the Content tab, click the Content drop-down menu and find the News widget. Click, hold and drag the News widget onto the desired part of the page, and then release the news widget
     
• Selecting which News items to display

  Within the edit view of a page, you can select which news post(s) to display.

  1. After you have added the news widget to a page, click the Edit button on the widget
     
  2. Under the Content tab, select which news to display
     • All published news: This is the default setting. This will display all news. 
     • Selected news: you can specify which news items to display
     • Filtered news: you can add filters for categories, tags, and/or published dates. You must add categories and/or tags to the blog posts before you can add the filter to the blog post widget.
       
  3. Click the Save button when finished.
• Customize News widget settings

  Within the edit view of a page, you can customize how news items display.

  1. After you have added the News widget to a page, click the Edit button on the widget
     
  2. Under the List settings tab, select the paging and limit settings.
     • Use paging: This is the default setting with up to 20 items per page displaying. You can edit the number of items displayed.
     • Use Limit: You can limit the number of items displayed.
     • No limit and paging: Shows all published items at once. This setting is not recommended.
       
  3. You can sort news items with these settings:
     • Last published on top: This is the default setting. Sorts the latest articles that have been published in descending order by date.
     • Last modified on top: Sorts the latest articles that have been edited and saved in descending order by date.
     • By Title (A-Z): Sorts by the title field of the blog post.
     • By Title (Z-A): Sorts by the title field of the blog post.
     • As set manually: Sorts by the order of the blog posts in the blog. You can manually reorder blog posts.
     • As set in advanced mode: Do not use this setting.
       
  4. Select the list template
     • News list: This is the default setting. Displays the news item title, date, time, author, summary, and featured image
     • News title date: Displays news item title, date, time, author, and featured image
     • News title date full content: Displays news item title, date, time, author, content, and featured image
     • News title date summary: Displays the news item title, date, time, author, summary, and featured image
     • News title only: Displays the news item title and featured image
     • News top five_01: See examples on the News widget page
     • News top five_01_small: See examples on the News widget page
     • News top five_02: See examples on the News widget page
     • News top five_02_small: See examples on the News widget page
     • News top five_03: See examples on the News widget page
     • News top five_03_small: See examples on the News widget page
       
  5. Add CSS classes
     •  Insert CSS classes in the CSS classes field. Multiple CSS classes can be added but must be separated by a space. View the news widget classes and examples. 
       
  6. Click the Save button with complete.
• Customize how the news article displays

  Within the edit view of a page, you can customize how news articles display and select the page that it opens in. You must create a separate page with the news widget on it first.

  1. After you have added the news widget to a page, click the Edit button on the widget
     
     
  2. Under the Single item settings tab, select the page that the full article opens in.
     • Auto-generated page: This is the default setting and will open the article on the same page. This setting is not recommended.
     • Selected existing page: Select the article page with the news widget on it.
       
  3. You can also add custom CSS classes to the article under the More options section. View the news widget classes and examples. 

How to

• Add Events widget to a page

  Within the edit view of a page, you can add the Events widget and display events on a page.

  1. On the right side menu, click the Content tab, click the Content drop-down menu and find the Events widget. Click, hold and drag the Events widget onto the desired part of the page, and then release the events widget
     
• Customize how the event details display

  Within the edit view of a page, you can customize how the selected event details display and select the page that it opens in. You must create a separate page with the events widget on it first.

  1. After you have added the Events widget to a page, click the Edit button on the widget
     
  2. Under the Single item settings tab, select the page that the event details open in.
     • Auto-generated page: This is the default setting and will open the event details on the same page. This setting is not recommended.
     • Selected existing page: Select the page with the events widget on it.
     
     
• Selecting which Events to display

  Within the edit view of a page, you can select which event(s) to display.

  1. After you have added the event widget to a page, click the Edit button on the widget
     
  2. Under the Content tab, select which events to display
     • All Events: This is the default setting. This will display all events. 
     • Events by date:
       • upcoming events
       • current events
       • past events
     • Selected events: you can select one or more events to display
       
  3. Narrow selection further
     • Calendar: If you have multiple, you can select one or more calendars
     • All published events: This is the default setting. This will display all published events.
     • Selection of events: you can add filters by specific calendars, categories, and/or tags. You must add categories and/or tags to the events before you can add the filter to the events widget
       
  4. Click the Save button when finished.
• Customize Events settings

  Within the edit view of a page, you can customize how events display.

  1. After you have added the events widget to a page, click the Edit button on the widget
     
  2. Under the List settings tab, select the paging and limit settings.
     • Use paging: This is the default setting with up to 20 items per page displaying. You can edit the number of items displayed.
     • Use Limit: You can limit the number of items displayed.
     • No limit and paging: Shows all published items at once. This setting is not recommended.
       
  3. You can sort events with these settings:
     • Last published on top: Sorts the latest events that have been published in descending order by date.
     • Last modified on top: Sorts the latest events that have been edited and saved in descending order by date.
     • By Title (A-Z): Sorts by the title field of the event.
     • By Title (Z-A): Sorts by the title field of the event.
     • By Start date (oldest on top): This is the default setting. 
     • As set manually: Sorts by the order of the events in the events list. You can manually reorder events.
     • As set in advanced mode: Do not use this setting
       
  4. Add CSS classes
     • Insert CSS classes in the CSS classes field under the More Options field. Multiple CSS classes can be added but must be separated by a space. View the events classes and examples.
       
• Add Calendar widget to a page

  Within the edit view of a page, you can add a calendar on a page.

  1. On the right side menu, click the Content tab, click the Content drop-down menu and find the Calendar widget. Click, hold and drag the Calendar widget onto the desired part of the page, and then release the calendar widget
     
• Customize how the Calendar event details display

  Within the edit view of a page, you can customize how the selected event details display and select the page that it opens in. You must create a separate page with the events widget on it first.

  1. After you have added the Calendar widget to a page, click the Edit button on the widget
  2. Under the Single item settings tab, select the page that the event details open in.
     • Auto-generated page: This is the default setting and will open the event details on the same page. This setting is not recommended.
     • Selected existing page: Select the page with the events widget on it.
     
     
• Selecting which Calendar to display

  Within the edit view of a page, you can select which calendar(s) to display.

  1. After you have added the calendar widget to a page, click the Edit button on the widget
     
     
  2. Under the Content tab, select which events to display
     • All Events: This is the default setting. This will display all events. 
     • Events by date:
       • upcoming events
       • current events
       • past events
     • Selected events: you can select one or more events to display
       
  3. Narrow selection further
     • Calendar: If you have multiple, you can select one or more calendars
     • All published events: This is the default setting. This will display all published events.
     • Selection of events: you can add filters by a specific calendar, categories, and/or tags. You must add categories and/or tags to the events before you can add the filter to the events widget
       
  4. Click the Save button when finished.
• Customize Calendar settings

  Within the edit view of a page, you can customize how a Calendar displays.

  1. After you have added the calendar widget to a page, click the Edit button on the widget
     
     
  2. Under the List settings tab, you can select what day of the week to start on.
     • Monday
     • Sunday: this is the default setting
       
  3. You can change the default view and allow users to switch between views:
     • Month: Displays the current calendar month
     • Week: Displays a full week view with times
     • Work Week: Displays a Monday through Friday week view with times
     • Day: Displays the current day view with times
     • Agenda: Displays the current day view with event details
     • Timeline: Displays a timeline for the current day
       
  4. Allow users to filter by Calendar
     • The default setting is to allow users to filter by Calendars. Select the text "Allow users to filter by Calendar" to not allow this setting.
       
       

How to

• Add Content Block widget to a page

  Within the edit view of a page, you can add the content block widget on a page.
  

  1. On the right side menu, click the Content tab, click the Content drop-down menu and find the Content blocks widget. Click, hold and drag the Content blocks widget onto the desired part of the page, and then release the widget.
     
• Edit a Content Block
  1. After you have added the content block widget to a page, click the Edit button on the widget.
     
  2. Click in the content area to add content. Format content using the formatting toolbar and/or edit the HTML by selecting the </> option on the far right of the toolbar. Formatting options include:
     • Make the text a paragraph, quotation, heading, bold, or italic
     • Change the text color
     • Create an unordered and ordered list
     • Indent or outdent text
     • Create a link
     • Add an image
     • Create a table
     • Align content
     • Make text a subscript and a superscript
     • Add a horizontal rule
     • Remove formatting
       
  3. Click the Save button when finished
• Duplicate, Share or use a Shared Content Block
  1. After you have added the content block widget to a page, click the More button on the widget
     
  2. More options include:
     • Delete: This deletes the content block
     • Duplicate: This duplicates the content block
     • Share: This will create a shared content block. Learn more about shared content blocks.
     • Use Shared: You can select a shared content block that has already been created
     • Permissions: You can set permissions on who can see and edit the content block

How to

• Add a Form widget to a page

  Within the edit view of a page, you can add the form widget on a page.

  1. On the right side menu, click the Content tab, click the Content drop-down menu and find the Form widget. Click, hold and drag the Form widget onto the desired part of the page, and then release the widget.
     
• Select the Form to display
  1. After you have added the form widget to a page, click the Edit button on the widget
     
  2. Select a form.
     
  3. Click the Save button when complete.

How to

• Add Feature box to a page

  Within the edit view of a page, you can add the Feature box widget to a page.

  1. On the right side menu, click the Content tab, click the Feature Box drop-down menu and find the FeatureBoxes widget. Click, hold and drag the FeatureBoxes widget onto the desired part of the page, and then release the FeatureBoxes widget
     
• Selecting which Feature boxes to display

  Within the edit view of a page, you can select which feature boxes to display

  1. After you have added the FeatureBoxes widget to a page, click the Edit button on the widget
     
  2. Under the Content tab, select which feature boxes to display
     • From all featurecollections: This is the default setting. This will display all feature boxes from all feature collections on the website. 
     • From selected featurecollections only: This will display all feature boxes from a selected feature collection
     • From currently open featurecollection: Do not use this setting
     • Selected featureboxes: you can select one or more individual feature boxes to display
       
  3. Narrow selection further
     • All published featureboxes: This is the default setting. This will display all published feature boxes.
     • Selection of featureboxes:  you can add filters for categories, tags, and/or published dates. You must add categories and/or tags to the feature boxes before you can add the filter to the feature boxes widget.
       
  4. Click the Save button when finished.
• Customize Feature box settings
  Within the edit view of a page, you can customize how feature boxes display.

  
  

  1. After you have added the feature box widget to a page, click the Edit button on the widget
     
  2. Under the List settings tab, select the paging and limit settings.
     • Use paging: This is the default setting with up to 20 items per page displaying. You can edit the number of items displayed. This setting does not work.
     • Use Limit: You can limit the number of items displayed.
     • No limit and paging: Shows all published items.
       
  3. You can sort feature boxes with these settings:
     • Last published: This is the default setting. Sorts the latest feature boxes that have been published in descending order by date.
     • Last modified: Sorts the latest feature boxes that have been edited and saved in descending order by date.
     • By Title (A-Z): Sorts by the title field of the feature box.
     • By Title (Z-A): Sorts by the title field of the feature box.
     • As set manually: Sorts by the the order of the feature boxes in the feature collection. You can manually reorder feature boxes.
     • As set in advanced mode: Do not use this setting
       
  4. Click the Save button when finished.

Sitefinity Core Videos

• Sitefinity - Adding Content to Pages 11/20/15