How to use the Blog Element in Zuperla

The Blog element is undoubtedly one of the most important elements which most of the users will probably use. Based on that fact, Zuperla really offers multiple options for this element. Let’s see them briefly, starting with the basic styles.

  1. Large Media
  2. Small Media
  3. Masonry
  4. Grid
  5. Carousel

 

Large Media and Small Media


General

Blog Mode: Select your Blog Mode.
Media Area Visibility: Select if you want to enable/disable the media area.
Image Size: For your Large Media you can select your blog image size among Landscape Large Wide Crop, Landscape Medium Crop, Resize (Extra Extra Large), Resize (Large), Resize (Medium Large) and Resize (Medium). For your Small Media you can select your blog image size among Square Small Crop, Landscape Small Crop, Portrait Small Crop, Portrait Medium Crop, Resize (Large), Resize (Medium Large) and Resize (Medium).
Featured Image Priority: If selected, the featured image is displayed instead of the media element.
Auto Excerpt: If you activate it, it adds automatic excerpt to all posts in Large Media style. If auto excerpt is not selected, blog will show all content, a desired ‘cut-off’ point can be inserted in each post with more quicktag. Available only for the Large Media.
Excerpt Length: Type how many words you want to display in your post excerpts.
Read More: It adds a read more button after the excerpt or more quicktag.
Posts per Page: Enter how many posts per page you want to display.
Order By: Select the way you want to display you post among Date, Last Modified Date, Number of comments, Title, Author and Random.
Order: Select if you wish your order post to be Descending or Ascending.
CSS Animation: Select your type of animation if you want this element to be animated when it enters into the browser’s viewport. Note: It works only in modern browsers.
Bottom Margin: You can use px, em, %, etc. or enter just number and it will use pixels.
Extra Class Name: If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Titles and Styles

Post Title Tag: Select your Post Title Tag for SEO.
Post Title Size/Typography: Select your Post Title size and typography, defined in Theme Options – Typography Options.

Extras

Disable Pagination: If you selected it, the pagination will not be shown.
Hide Author: If you selected it, the blog overview will not show the author.
Hide Date: If you selected it, the blog overview will not show the date.
Hide Comments: If you selected it, the blog overview will not show the comments.
Hide Like: If you selected it, the blog overview will not show the like.

Filters

Filter: If you selected it, an isotope filter will be displayed. Enable Blog Filter (Only for All or Multiple Categories). You can select your filter order, style and alignment.

Categories

Exclude Posts: Type the post ids you want to exclude separated by comma ( , ).
Categories: Select all or multiple categories.

 

Masonry and Grid


General

Blog Mode: Select your Blog Mode.
Media Area Visibility: Select if you want to enable/disable the media area.
Image Size: For your Masonry you can select your blog image size among Resize (Large), Resize (Medium Large) and Resize (Medium). For your Grid you can select your blog image size among Square Small Crop, Landscape Small Crop, Portrait Small Crop, Portrait Medium Crop, Resize (Large), Resize (Medium Large) and Resize (Medium).
Featured Image Priority: If selected, the featured image is displayed instead of the media element.
Large Screen Columns: Select your Blog Columns among 2,3,4 and 5.
Columns: Select your Blog Columns among 2,3,4 and 5.
Tablet Landscape Columns: Select the responsiveness of your columns on tablet devices, landscape orientation.
Tablet Portrait Columns: Select the responsiveness of your columns on tablet devices, portrait orientation.
Mobile Columns: Select the responsiveness of your columns on mobile devices.
Excerpt Length: Type how many words you want to display in your post excerpts.
Read More: It adds a read more button after the excerpt or more quicktag.
Posts per Page: Enter how many posts per page you want to display.
Order By: Select the way you want to display you post among Date, Last Modified Date, Number of comments, Title, Author and Random.
Order: Select if you wish your order post to be Descending or Ascending.
CSS Animation: Select your type of animation if you want this element to be animated when it enters into the browser’s viewport. Note: It works only in modern browsers.
Bottom Margin: You can use px, em, %, etc. or enter just number and it will use pixels.
Extra Class Name: If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Titles and Styles

Blog Style: Select you Blog Style between With Shadow and Without Shadow.
Post Title Tag: 
Select your Post Title Tag for SEO.
Post Title Size/Typography: Select your Post Title size and typography, defined in Theme Options – Typography Options.

Extras

Enable Loader: If selected, this will enable a graphic spinner before load.
Disable Pagination:
If you selected it, the pagination will not be shown.
Hide Author: If you selected it, the blog overview will not show the author.
Hide Date: If you selected it, the blog overview will not show the date.
Hide Comments: If you selected it, the blog overview will not show the comments.
Hide Like: If you selected it, the blog overview will not show the like.

Filters

Filter: If you selected it, an isotope filter will be displayed. Enable Blog Filter (Only for All or Multiple Categories). You can select your filter order, style and alignment.

Categories

Exclude Posts: Type the post ids you want to exclude separated by comma ( , ).
Categories: Select all or multiple categories.

 


General

Blog Mode: Select your Blog Mode.
Media Area Visibility: Select if you want to enable/disable the media area.
Image Size: You can select your blog image size among Square Small Crop, Landscape Small Crop and Portrait Small Crop.
Gutter Between Images: Choose yes if you wish to add gutter between your images.
Gutter Size: Type the size you want for the gutter.
Excerpt Length: Type how many words you want to display in your post excerpts.
Posts per Page: Enter how many posts per page you want to display.
Items per Page: Select the number of items you want to display per page.
Order By: Select the way you want to display you post among Date, Last Modified Date, Number of comments, Title, Author and Random.
Order: Select if you wish your order post to be Descending or Ascending.
Bottom Margin: You can use px, em, %, etc. or enter just number and it will use pixels.
Extra Class Name: If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Carousel Layout: Select the layout for your Carousel Element between Classic and Top Navigation with Title/Text.
Navigation Type: Select the type you wish for your navigation.
Navigation Color: Select the background navigation color between dark and light.
Carousel Pagination: Choose if you want your Carousel to have a pagination.
Carousel Pagination Speed: Type your pagination speed in ms.
Slideshow Speed: Type your slideshow speed in ms.
Pause on Hover: If you select it, your Carousel will be paused on hover.

Titles and Styles

Post Title Tag: Select your Post Title Tag for SEO.
Post Title Size/Typography: Select your Post Title size and typography, defined in Theme Options – Typography Options.
Carousel Style: Select the style of your Carousel between Content below Image and Content Inside Image.
Hide Excerpt: If you select it, your blog overview will not show excerpt.

Extras

Hide Author: If you selected it, the blog overview will not show the author.
Hide Date: If you selected it, the blog overview will not show the date.
Hide Comments: If you selected it, the blog overview will not show the comments.
Hide Like: If you selected it, the blog overview will not show the like.

Categories

Exclude Posts: Type the post ids you want to exclude separated by comma ( , ).
Categories: Select all or multiple categories.

Was this article helpful?

Related Articles