Blogs: Blog Post Slider

Layout Views

The widget component template

Learn how to do it:

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.
    screenshot of blog post widget placement on a webpage.
  • 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
      screenshot showing edit button on blog post 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
        screenshot of which blog posts to display section
    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.
        screenshot of narrow selection section
    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
      screenshot showing edit button on blog post 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.
        screenshot of blog post limit and paging settings
    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
        screenshot showing sort section of blog post widget
    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
        screenshot of blog post templates
    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
        screenshot showing blog post widget css field

Blog Post Slider

  • Default Title

    Default Summary with no background image and the default button shown below

    Read More

Customizations

Customize with CSS Classes.

Learn how to do it:

How to

  • 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.

    screenshot of blog slide custom css field

    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

Card

Card Color:

Examples below also use uk-position-center and btn-hide

  • No Card:

    Default setting

  • Dark Card:

    Class: uk-overlay-primary

  • Light Card:

    Class: uk-overlay-default

All Card Overlay Classes
DarkLightNo Card*
uk-overlay-primaryuk-overlay-defaultNo class required

* Default setting without a class applied

Card Position:

Examples below also use uk-overlay-primaryandbtn-hide

  • Bottom-Right Card:

    Class: uk-position-bottom-right

  • Top-Center Card:

    Class: uk-position-top-center

  • Left Card:

    Class: uk-position-left

All Card Position Classes
TopBottomLeftRightCenter
uk-position-topuk-position-bottomuk-position-leftuk-position-rightuk-position-center
uk-position-top-leftuk-position-bottom-leftuk-position-top-leftuk-position-top-rightuk-position-center-left
uk-position-top-centeruk-position-bottom-centeruk-position-center-left *uk-position-center-rightuk-position-bottom-center
uk-position-top-rightuk-position-bottom-rightuk-position-bottom-leftuk-position-bottom-rightuk-position-center-right

* Default setting without a class applied

Card Width:

Examples below also use uk-overlay-primaryanduk-position-center and btn-hide

  • 50% Card Width:

    Default Setting

  • 70% Card Width:

    Class: content-width-70

  • 100% Card Width:

    Class: content-width-100

All Card Width Classes for Specific Screen Sizes
PercentageAll SizesSmall,
≥640px wide
Medium,
≥960px wide
Large,
≥1200px wide
30%content-width-30content-width-sm-30content-width-md-30content-width-lg-30
40%content-width-40content-width-sm-40content-width-md-40content-width-lg-40
50%*content-width-50content-width-sm-50content-width-md-50content-width-lg-50
60%content-width-60content-width-sm-60content-width-md-60content-width-lg-60
70%content-width-70content-width-sm-70content-width-md-70content-width-lg-70
80%content-width-80content-width-sm-80content-width-md-80content-width-lg-80
90%content-width-90content-width-sm-90content-width-md-90content-width-lg-90
100%content-width-100content-width-sm-100content-width-md-100content-width-lg-100

* Default setting without a class applied

Background Options

Image Options:

Examples below also use uk-overlay-primaryand uk-position-centerand btn-hide

  • Cover Image:

    Default Setting

  • Contain Image:

    Class: img-contain

  • Fill Image:

    Class: img-fill

All Image Fill Classes for Specific Screen Sizes
Image FillAll SizesSmall,
≥640px wide
Medium,
≥960px wide
Large,
≥1200px wide
Fill Image*img-fillimg-sm-fillimg-md-fillimg-lg-fill
Contain Imageimg-containimg-sm-containimg-md-containimg-lg-contain
Cover Imageimg-coverimg-sm-coverimg-md-coverimg-lg-cover

* Default setting without a class applied

Background Color:

Examples below also use uk-overlay-primaryand uk-position-centerand btn-hide

  • Blue Background with a Diagonal Gradiant:

    Classes: blue-bg  bg-gradiant-diagonal

  • Red Background:

    Class: red-bg

  • Teal Background:

    Class: teal-bg

Content Options

Title Heading:

Examples below also use uk-overlay-primaryand uk-position-centerand btn-hide

  • H2 Heading:

    Class: title-h2

  • H3 Heading:

    Class: title-h3

  • H4 Heading:

    Class: title-h4

All Title Heading Classes for Specific Screen Sizes
HeadingAll SizesSmall,
≥640px wide
Medium,
≥960px wide
Large,
≥1200px wide
h1*title-h1title-sm-h1title-md-h1title-lg-h1
h2title-h2title-sm-h2title-md-h2title-lg-h2
h3title-h3title-sm-h3title-md-h3title-lg-h3
h4title-h4title-sm-h4title-md-h4title-lg-h4
h5title-h5title-sm-h5title-md-h5title-lg-h5
h6title-h6title-sm-h6title-md-h6title-lg-h6
Hide Titletitle-hide

* Default setting without a class applied

Summary Font Size:

Examples below also use uk-overlay-primaryand uk-position-centerand btn-hide

  • Small Summary:

    Class: summary-small

  • Medium Summary:

    Class: summary-medium

  • Large Summary:

    Class: summary-large

All Summary Size Classes for Specific Screen Sizes
HeadingAll SizesSmall,
≥640px wide
Medium,
≥960px wide
Large,
≥1200px wide
Smallsummary-smallsummary-sm-smallsummary-md-smallsummary-lg-small
Medium*summary-mediumsummary-sm-mediumsummary-md-mediumsummary-lg-medium
Largesummary-largesummary-sm-largesummary-md-largesummary-lg-large
Hide Summarysummary-hide

* Default setting without a class applied

Button Color:

Examples below also use uk-overlay-primaryand uk-position-center

  • Teal Button:

    Class: btn-teal

    Read More
  • Blue Button:

    Class: btn-blue

    Read More
  • Red Button:

    Class: btn-red

    Read More
All Button Color Classes
btn-default*btn-redbtn-graybtn-gray-lightbtn-white
btn-blackbtn-bluebtn-orangebtn-greenbtn-teal
btn-coolgray3btn-primarybtn-secondarybtn-infobtn-danger
btn-warningbtn-success   

* Default setting without a class applied

Button Size:

Examples below also use uk-overlay-primaryand uk-position-center

  • Small Button:

    Class: btn-small

    Read More
  • Large Button:

    Class: btn-lg

    Read More
  • Block Button:

    Class: btn-block

    Read More
All Button Size Classes
btn-smallbtn-largebtn-block

Button CTA Text:

Examples below also use uk-overlay-primaryand uk-position-center

  • Read Article Button:

    Class: btn-read-article

    Read Article
  • Learn More Button:

    Class: btn-learn-more

    Learn More
  • Find Out More Button:

    Class: btn-find-out-more

    Find Out More
All Button CTA Classes
btn-read-more*btn-read-articlebtn-learn-morebtn-find-out-morebtn-hide

* Default setting without a class applied

Content Style/Color:

Examples below also use uk-overlay-defaultanduk-position-centerandbtn-hide

  • Center Text:

    Classes: text-center  content-black

  • Teal Text:

    Class: content-teal

  • Blue Text:

    Class: content-blue

All Content Color Classes
content-redcontent-graycontent-gray-lightcontent-white*content-black
content-bluecontent-blue-lightcontent-tealcontent-teal-lightcontent-orange
content-orange-lightcontent-greencontent-green-lightcontent-gray-1content-gray-2
content-gray-4content-gray-5content-gray-6content-gray-7content-gray-8
content-gray-9content-gray-acontent-gray-bcontent-gray-ccontent-gray-d
content-gray-e    

* Default setting without a class applied

All Content Alignment Classes
text-left*text-righttext-center

* Default setting without a class applied

Stacking CSS Classes

  • Title Text:

    uk-overlay-default  uk-position-center-right  content-width-70  content-black  btn-hide   summary-large/code>  text-center

  • Title Text:

    uk-overlay-primary  uk-position-center  content-width-100  content-width-sm-80  content-width-md-60  btn-red   btn-learn-more text-center

    Learn More

Training

Create and Edit Blogs

How to

  • Create a Blog

    Create a Blog

    1. Click the Content navigation menu item and then select Blogs

      screenshot showing blogs under blogs menu
    2. Click the Create a Blog button
      Screenshot of 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. screenshot of create a post button
    3. Add a title. This will be displayed as your blog post title
      screenshot showing title field
    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.
      screenshot showing the formatting toolbar
    5. Add a summary

    6. screenshot of blog post summary
    7. Add a featured image
      1. Under the Related Media section click the plus symbol 
      screenshot showing the plus symbol
    8. Click Upload an image from your computer or Select an image from your library
    9. Click the Publish button

    Blog post example showing featured image, blog post title, and summary:

    Blog post example showing featured image, blog post title, and summary:
  • Add Categories and Tags

    Adding categories/tags allows the user to click on a desired category/tag to filter the content on the page. It can also filter specific items to be displayed on a page. You can add multiple categories and tags to content items such as lists, blogs, events, and images.
    screenshot showing categories and tags sections

    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* (see note below), or select show all categories to select from the category list 
      screenshot showing categories options
      *NOTE: Any new category created should be saved under the department's parent category. Email sitefinity@utmb.edu for assistance in organizing new categories.

    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.
      screenshot of tag selection options
  • 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

    screenshot of credit source fields

  • 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
      screenshot of blog post redirect 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 
        screenshot of blog slide upload button
      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.
        Screenshot of blog slide title and summary fields

    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". 

    screenshot of blog slider with no background image
  • 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.

    screenshot of blog slide custom css field

    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.
      screenshot showing the ellipses button
    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.
      screenshot of blog post schedule date and time selectors

Add Blog Posts to a Page

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.
    screenshot of blog post widget placement on a webpage.
  • 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
      screenshot showing edit button on blog post 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
        screenshot of which blog posts to display section
    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.
        screenshot of narrow selection section
    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
      screenshot showing edit button on blog post 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.
        screenshot of blog post limit and paging settings
    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
        screenshot showing sort section of blog post widget
    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
        screenshot of blog post templates
    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
        screenshot showing blog post widget css field
  • 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
      screenshot showing edit button on blog post 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.
        screenshot of single item settings
    3. You can also add custom CSS classes to the article under the More options section. View the blog posts classes and examples

Explore Other Blog Options:

On this page: