Sitefinity How-tosLearn how to create content

How to buttons

Images

Images basics

How to

Expand All

Optimize images for the web
Image File Type Options
There are three main file types we’ll want to focus on for saving images, optimized for the web: GIF, JPG and PNG. Each file type has its own strengths and weaknesses and it is very important to know and keep these in mind when saving an image. Here are a few details:
- GIFs are not for high-quality images, but you can use animated GIFs
- JPGs can be optimized to a very small file size while keeping the high quality of an image
- PNGs are typically used when a transparent background is needed
Saving Images Properly
Large images on a web page take longer to load. By “large”, we are referring to file size rather than the dimensions of an image, i.e. the value in KB, MB, GB etc. Users expect a webpage to load in under 2 seconds, and most will abandon a page that takes more than 3 seconds to load. It’s important that your images are small enough to ensure a speedy site. There are three things you can do to properly optimize your images for your web site:
1. Make the image the proper proportions and dimensions
  You will need to determine what is the largest size your image will be in all responsive views (i.e. phone, tablet or desktop).
2. Save the image “for the web”
  It is possible to reduce the size without reducing the quality of the image on a screen. This requires changing the image resolution down to 72 PPI without losing the proper final dimensions or proportions and then compressing the image.
3. Compress the image
  You can do this with Photoshop or other online tools like www.tinyjpg.com, www.tinypng.com or https://pixlr.com/e/. The goal is to get large “hero” images under 100KB, and images smaller than 800px wide under 50KB. The smaller the file size, the less data people have to load on the browser.
Upload images to a gallery
1. Click the Content navigation menu item and then select Images
2. Click the Upload images button
3. Drag and drop images or click the Upload images from your computer button to select images.
4. Add alternative text. Alt text (alternative text) is a word or phrase that can be inserted as an attribute in an HTML (Hypertext Markup Language) document to tell website viewers the nature or contents of an image.
5. Select the pencil icon to either select an existing gallery or create a new one.
6. Click the Upload and Publish button when finished.

Lists

Quickly get the information you need to use the List Widget. Learn more about Sitefinity Widgets

Create and Edit Lists

How to

Expand All

Create a List and List items
Create a List
You can create multiple lists with multiple list items within each list.
1. Click the Content navigation menu item and then select Lists
2. Click the Create a list button
3. Type a title and click the Create button
After you have created a list, you can now create list items.
Create List items
1. Within a list, click the Create a list item button
2. Add a title. This will be displayed as your list item title
3. Click the Publish button
Add content to a list item
Within the edit view of a list item, you have the option to use the formatting toolbar and/or edit the HTML by selecting the </> option on the far right of the toolbar.
Examples of how this content displays on a page:
- Expandable List
- Link Card Icons w/ Content
Add Categories and Tags
This allows you to filter what is displayed on a page. You can add multiple categories and tags.
Adding Categories
1. Click the plus symbol under the Categories section.
2. Begin typing a category name to choose a predefined category, select create a category, or select show all categories to select from the category list
Adding Tags
1. Click the plus symbol under the Tags section.
2. Begin typing a tag name to create a new tag or select a predefined tag. You can also select Show all tags to search through the predefined tags.
Make a list item a link
1. Within the edit view of a list item, under the Custom fields section, type or paste the hyperlink into the Hyperlink field.
Add icons to list items
1. Copy the class name inside the quotation marks from the selected icon available in the Font Awesome online library
2. Within the edit view of a list item, paste the class name into the Icon field under the Custom fields section of the list item
Need to add an icon to the HTML code? View the icons style guide
Add Modal box content to a list item
This content will display inside a modal box when the list item is selected.
1. Within the edit view of a list item, under the Custom fields section, you must add # into the Hyperlink field.
2. Add content to the ModalBoxContent field. You can format content similar to the content area of a list item.
Add an image to a list item
1. Within the edit view of a list item, under the Related media section click the plus symbol.
2. Click Upload an image from your computer or Select an image from your library
Images can also be added to the content and modal box fields.
Scheduling to publish and/or unpublish
Within the edit view of a page or content item, you can schedule a post to publish and/or unpublish on a specific date.
1. Click the ellipses button (...) on the top-right of the page. Then select Schedule publish/unpublish from the drop-down menu.
2. Type or select the date and time you would like to publish the page or item. You can also type or select the date and time you would like to unpublish. Click the Save changes button when complete.

Always click the Publish, Save as Draft or Schedule when you are finished editing a list item or page to save your work.

See the Web Style Guide for HTML lists.

Blogs

See the various layout templates for the Blog posts widget component.

Create and edit Blogs

How to

Expand All

Create a Blog
Create a Blog
1. Click the Content navigation menu item and then select Blogs
2. Click the Create a Blog button
3. Type the blog title and click the Create button
Create a Blog post
After you have created a Blog, you can now create blog posts.
Create blog posts
1. Within the selected blog, Click the Create a post button
2. Add a title. This will be displayed as your blog post title
3. Click in the content area. You have the option to use the formatting toolbar and/or edit the HTML by selecting the </> option on the far right of the toolbar. Type and format the content.
4. Add a summary
5. Add a featured image
  1. Under the Related Media section click the plus symbol
6. Click Upload an image from your computer or Select an image from your library
7. Click the Publish button
Blog post example showing featured image, blog post title, and summary:
Add Categories and Tags
This allows you to filter what is displayed on a page. You can add multiple categories and tags.
Adding Categories
1. Click the plus symbol under the Categories section.
2. Begin typing a category name to choose a predefined category, select create a category, or select show all categories to select from the category list
Adding Tags
1. Click the plus symbol under the Tags section.
2. Begin typing a tag name to create a new tag or select a predefined tag. You can also select Show all tags to search through the predefined tags.
Crediting author(s) and citing source
1. Within the edit view of a blog post, under the Custom fields section, type in the author and/or article source information.
  - Author: Set the author's name. e.g. - John Doe
  - Article Source Name: Name of the external source where the original article was published
  - Article Source Publish Date: Date the external article was originally published
  - Article Source URL: add the website URL
Redirect post to another webpage
Within the edit view of a blog or news post, you can redirect a post to another webpage. Note that any content in the content area will not display on a webpage.
1. Under the Custom fields section, paste the URL in the Redirect URL field
Create a Blog slider
Within the edit view of a blog post, you can add blog slider content that can be displayed on a page.
1. Add a blog slider image
  1. Under the Related Media section click the Blog Slide Background Image plus symbol
  2. Click Upload an image from your computer or Select an image from your library
2. Add the Blog Slide Title and Blog Slide Summary.
  1. Under the Custom Fields section add the title and summary if applicable. Keep both short.
Blog slide example displayed on a webpage with default settings: If no content has been added to the Blog Slider fields in the edit view of a blog post, the slider will use the blog post Title and Summary fields, have a dark gray background, the text will be white with no card background behind the text and the button will be a transparent "read more".
Customize Blog slider with CSS
Within the edit view of a blog post, CSS classes can be applied to affect the look of the individual slide, image, or content of a blog post.
Under the Custom fields section add classes to the Blog Slide Custom CSS field. Multiple CSS classes can be added but must be separated by a space. CSS classes can be found below.
Blog slide CSS classes
Classes with "sm" text will only affect small screens (smaller than 640px).
Classes with "md" text will only affect medium screens (641px to 1007px).
Classes with "lg" text will only affect large screens (1008px and larger).
Card overlay color
- uk-overlay-default (White transparent background)
- uk-overlay-primary (Dark transparent background)
Card overlay placement
uk-position-top
uk-position-left
uk-position-right
uk-position-bottom
uk-position-center
uk-position-top-left
uk-position-top-center
uk-position-top-right
uk-position-center-left (default)
uk-position-center-right
uk-position-bottom-left
uk-position-bottom-center
uk-position-bottom-right
Slide Background Image Handling
img-fill
img-sm-fill
img-md-fill
img-lg-fill
img-contain
img-sm-contain
img-md-contain
img-lg-contain
img-cover (default)
img-sm-cover
img-md-cover
img-lg-cover
img-hide
Content title text size, style and heading structure
title-h1 (default)
title-sm-h1
title-md-h1
title-lg-h1
title-h2
title-sm-h2
title-md-h2
title-lg-h2
title-h3
title-sm-h3
title-md-h3
title-lg-h3
title-h4
title-sm-h4
title-md-h4
title-lg-h4
title-h5
title-sm-h5
title-md-h5
title-lg-h5
title-h6
title-sm-h6
title-md-h6
title-lg-h6
title-hide
Content summary text size
summary-large
summary-sm-large
summary-md-large
summary-lg-large
summary-medium (default)
summary-sm-medium
summary-md-medium
summary-lg-medium
summary-small
summary-sm-small
summary-md-small
summary-lg-small
summary-hide
Content text alignment
- text-left (default)
- text-right
- text-center
Content text color options
content-red
content-gray
content-gray-light
content-white (default)
content-black
content-blue
content-blue-light
content-teal
content-teal-light
content-orange
content-orange-light
content-green
content-green-light
content-gray-1
content-gray-2
content-gray-3
content-gray-4
content-gray-5
content-gray-6
content-gray-7
content-gray-8
content-gray-9
content-gray-a
content-gray-b
content-gray-c
content-gray-d
content-gray-e
Card Overlay width (%-based)
content-width-30
content-width-sm-30
content-width-md-30
content-width-lg-30
content-width-40
content-width-sm-40
content-width-md-40
content-width-lg-40
content-width-50 (default)
content-width-sm-50
content-width-md-50
content-width-lg-50
content-width-60
content-width-sm-60
content-width-md-60
content-width-lg-60
content-width-70
content-width-sm-70
content-width-md-70
content-width-lg-70
content-width-80
content-width-sm-80
content-width-md-80
content-width-lg-80
content-width-90
content-width-sm-90
content-width-md-90
content-width-lg-90
content-width-100
content-width-sm-100
content-width-md-100
content-width-lg-100
Button text options
btn-read-more (default)
btn-read-article
btn-learn-more
btn-find-out-more
btn-hide
Button color and size options
btn-default (default)
btn-red
btn-gray
btn-gray-light
btn-white
btn-black
btn-blue
btn-orange
btn-green
btn-purple
btn-teal
btn-coolgray3
btn-primary
btn-secondary
btn-info
btn-danger
btn-warning
btn-success
btn-large
btn-small
btn-block
Background color + gradients
red-bg
gray-bg (default)
gray-light-bg
gray-mid-bg
gray-dark-bg
blue-bg
blue-light-bg
teal-bg
teal-light-bg
orange-bg
orange-light-bg
black-bg
white-bg
gray-1-bg
gray-2-bg
gray-3-bg
gray-4-bg
gray-5-bg
gray-6-bg
gray-7-bg
gray-8-bg
gray-9-bg
gray-a-bg
gray-b-bg
gray-c-bg
gray-d-bg
gray-e-bg
bg-gradiant (default)
bg-gradiant-horizontal
bg-gradiant-diagonal
bg-gradiant-bright
bg-gradiant-bright-horizontal
bg-gradiant-bright-diagonal
Scheduling to publish and/or unpublish
Within the edit view of a page or content item, you can schedule a post to publish and/or unpublish on a specific date.
1. Click the ellipses button (...) on the top-right of the page. Then select Schedule publish/unpublish from the drop-down menu.
2. Type or select the date and time you would like to publish the page or item. You can also type or select the date and time you would like to unpublish. Click the Save changes button when complete.

Always click the Publish, Save as Draft or Schedule when you are finished editing a blog post or page to save your work.

News

See the various layout templates for the News widget component.

Create and Edit News

How to

Expand All

Create a News Item
Unlike Blogs, you can only have one News Feed with multiple news items.
1. Click the Content navigation menu item and then select News
2. Click the Create a News Item button
3. Add a title. This will be displayed as your news post title
4. Click in the content area. You have the option to use the formatting toolbar and/or edit the HTML by selecting the </> option on the far right of the toolbar. Type and format the content.
5. Add a summary
6. Add a featured image
  1. Under the Related Media section click the plus symbol
7. Click Upload an image from your computer or Select an image from your library
8. Click the Publish button
Add Categories and Tags
This allows you to filter what is displayed on a page. You can add multiple categories and tags.
Adding Categories
1. Click the plus symbol under the Categories section.
2. Begin typing a category name to choose a predefined category, select create a category, or select show all categories to select from the category list
Adding Tags
1. Click the plus symbol under the Tags section.
2. Begin typing a tag name to create a new tag or select a predefined tag. You can also select Show all tags to search through the predefined tags.
Crediting author(s) and citing source
1. Within the edit view of a news post, under the Custom fields section, type in the author and/or article source information.
  - Author: Set the author's name. e.g. - John Doe
  - Article Source Name: Name of the external source where the original article was published
  - Article Source URL: add the website URL
Redirect post to another webpage
Within the edit view of a blog or news post, you can redirect a post to another webpage. Note that any content in the content area will not display on a webpage.
1. Under the Custom fields section, paste the URL in the Redirect URL field
Scheduling to publish and/or unpublish
Within the edit view of a page or content item, you can schedule a post to publish and/or unpublish on a specific date.
1. Click the ellipses button (...) on the top-right of the page. Then select Schedule publish/unpublish from the drop-down menu.
2. Type or select the date and time you would like to publish the page or item. You can also type or select the date and time you would like to unpublish. Click the Save changes button when complete.

Always click the Publish, Save as Draft or Schedule when you are finished editing a news post or page to save your work.

Events

See the various layout templates for the Events widget component.

Create and Edit Events

How to

Expand All

Create a Calendar & Event
Create a Calendar
1. Click the Content navigation menu item and then select Events
2. Click the Create a calendar button
3. Add the calendar title and color. Refer to the web color guide for UTMB brand colors. Click the Create button when finished.
Create an Event
1. Click the Content navigation menu item and then select Events
2. Click the Create an event button. You can click the < All calendars link to change the calendar first, if you have multiple calendars.
3. Type the event title.
4. Click in the content area. You have the option to use the formatting toolbar and/or edit the HTML by selecting the </> option on the far right of the toolbar. Type and format the content.
5. Add a summary
6. Type or select the Event start and Event end date and time. If it is an all-day event, you can check the All day box.
7. Add categories and tags
  This allows you to filter what is displayed on a page. You can add multiple categories and tags.
8. Add location information
  - Street
  - City
  - Country
  - State
  - How to find us
  - Venue
  - Postal Code
9. Add contact information
  - Email
  - Website
  - Contact name
  - Cell phone
  - Phone
10. Add an image
  - Under the Related media section click the plus symbol. Select or upload an image.
11. Click the Publish button

Content BlocksShared

See the various layout templates for the Content blocks widget component.

Create Shared Content Blocks

How to

Expand All

Create a Shared Content Block
You can create content blocks that can be shared on multiple pages.
1. Click the Content navigation menu item and then select Content blocks
2. Click the Create a content block button
3. Add a title. The title will not display on the page.
4. 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 the text a subscript and a superscript
  - Add a horizontal rule
  - Remove formatting
5. Optional: Add Categories and tags to filter what is displayed on a page. You can add multiple categories and tags.
6. Click the Create button when finished

Forms

See the various layout templates for the Forms widget component.

Create and Edit Forms

How to

Expand All

Create a Form
1. Click the Content navigation menu item and then select Forms.
2. Click the Create a form button
3. Add a title and click the Create and go to add fields button.
Add form fields
Within the edit view of a form, you can add common form fields to a form
1. On the right side menu, click the Content tab, click the Common Controls drop-down menu. Click, hold and drag a form field onto the Body section of the form, and then release the form field.
2. Customize each form field by clicking Edit on the form field widget.
3. Required for all UTMB Sitefinity forms: Add a CAPCHA before the Submit button on the form.
Form layout options
Within the edit view of a form, you can organize form fields by using various layout elements.
1. On the right side menu, click the Layout tab, click the Grid widgets drop-down menu. Click, hold and drag a grid widget onto the Body section of the form, and then release the grid widget. The example shows the grid-6+6 grid widget which divides the section into 2 columns.
2. There are several layout options. Be sure to experiment with the various layout options to find the layout that works best for the form. Learn more about layouts.
Form settings
Within the edit view of a form, you can update the form settings.
1. On the right side menu, click the Settings tab.
2. Settings options
  - Restrict who can submit form entries
  - Create a custom "After submission" message or redirect to another page
  - Send a confirmation email to the form respondent
  - Send email notification that a new form has been submitted

Feature Box

See the various layout templates for the Feature Box widget component.

Create a Feature Collection

How to

Expand All

Create a Feature Collection
1. Click the Content navigation menu item and then select Feature Box
2. Click the Create a featurecollection button
3. Add a title.
4. Optional: Add buttons (maximum of 5 buttons)
  1. Check the Show Navigation Menu checkbox
  2. Enter in the button fields needed per button:
    Button Title
    Button Link
    Button CSS Class
    Button Icon
    Button Image
5. Click the Publish button when complete.
Create a Feature box
After you have created a Feature Collection, you can create Feature boxes. Each feature collection can have multiple feature boxes.
1. Click the Feature Collection title.
2. Click the Create a featurebox button
3. Add a title, slide caption (optional), and a hyperlink (optional)
4. Optional: Add Categories and tags to filter what is displayed on a page. You can add multiple categories and tags.
5. Add an image. All images in a Feature collection must be cropped to the same dimensions.
6. Click the Publish button when complete.