When you select any of these templates, a shortcode will populate on the page. Below is what each of those shortcodes do and how to customize them...

Photo Slider

[posts style="carousel-images" type="1"]


See the full article here on how to create the feed/posts for the photo slider. Once you have created the feed, you need to replace the 'type' number in the shortcode with the Feed ID.

To find the Feed ID number in the URL (Website > Your Feed).

  1. Navigate to your feeds. Features > Feeds & Blogs

  2. Open the Feed you want to include in your smart code

  3. In your browser navigation bar review the URL. At the end of the URL you should see "ID=#" the number at the end of that ID is your Feed ID.

E.g. [posts style="carousel-images" type="1"] would change to [posts style="carousel-images" type="7"]

Photo Sliders automatically sort by 'date published.' If you wish to sort by post sequence.

[posts style="carousel-images" type="1" orderby="sequence" order="asc"]


Text Slider (Quotes)

[posts style="carousel-text" type="2" limit="6"]

A text slider is created the same way a photo slider is. The only difference being that instead of uploading images, you use the 'Headline' and 'Summary' fields.

Screen shot of the Givecloud Admin panel displaying the Edit Banner page

An example of a site hosted on Givecloud with the Headline area highlighted.

Scrolling Posts

[posts style="marquee" type="3" limit="6"]

Scrolling posts are used to populate a snippet/series of posts within your blog that automatically scroll, similar to a photo or text slider - e.g. if you wanted to feature 3 or 4 blog posts on your home page. In addition, it populates the feature image, blog title and description.


You need to swap out the 'type' number for the feed ID as explained above under 'Photo Slider' and then set the 'limit' to however many posts you want to display.

[posts style="marquee-images" type="3" limit="6"]

This populates a slider of blog posts but only displays the feature image (when clicked on, it takes you through to the individual blog post). So you need to swap out the 'type' number for the feed ID as explained above under 'Photo Slider' and then set the 'limit' to however many posts you want to display.

Posts Grid

[posts style="grid" type="2" limit="6"]

This lists out blog posts in a grid. It populates the grid 4 cards/posts wide.

So you need to swap out the 'type' number for the feed ID as explained above under 'Photo Slider' and then set the 'limit' to however many posts you want to display.

Scrolling Products

[products style="marquee" limit="6" categories="23" orderby=""]

This is used to list out products, for example, if you wanted to feature certain products on your page.


You can either use the above shortcode to list out products within a category/categories by entering the category IDs (Features > Website > Categories and click into your category and find the category number in the URL)

An example Category page with the Category ID highlighted in the browser navigation bar.

or you can use the SKU number to specify specific products

Ex.

[products style="marquee" codes="20E00FC,20E00FD,20E00FE"]

You can get the codes from the SKU section on the product page in the admin section (Features > Sell & Fundraise > Items and click into each product you want to include)

Screenshot of Givecloud Admin Item section with the Code (SKU) position highlighted.

Products Grid

[products style="grid" limit="6" categories="23" orderby=""]

This lists out blog products in a grid. It populates the grid 4 cards/posts wide.


You can either use the above shortcode to list products within a category/categories by entering the category IDs (Features > Website > Categories and click into your category. Copy the number at the end of the URL).

You can use the below to specify certain products. You can get the product IDs from the URL on the product page in the admin section (Features > Sell & Fundraise > Items and click into the product and copy the number at the end of the URL)

[products style="grid" codes="20E00FC,20E00FD,20E00FE"]

Social Sharing

This shortcode allows you to add social sharing links to your blog or page.

[sharing_links]

If you wish to adjust the title or information included in the social sharing link, add 'title' to the shortcode, and this provides some customization.

[sharing_links title="page title or content"]

Did this answer your question?