Custom Post Types

This shortcode allows adding a section with posts to the page.

How To Add Custom Post Types Widget To Your Page

  1. Click the   icon to create a Section
  2. Set your Column structure 
  3. Right-click to Edit, Duplicate, Copy, Delete, etc.
  4. Insert Widget using drag and drop inside your Columns.

5. Choose Widget style (Grid, Custo Slider, Mosaics, or Masonry) in the Layout section.

Grid Layout:

Custo Slider Layout:

Masonry Layout:

Mosaics Layout:

6. Customize widget and add content in  Content Section. Here you can also customize content Typography.

Content Settings:

1. Grid Layout

Skin - Please, select a skin for your post types.

Use the custom font for title? - Turn on the switcher if you want to customize the title typography.

Use the custom font for terms? - Turn on the switcher if you want to customize the term typography. It works for skins that have terms.

Use the custom font for price? - Turn on the switcher if you want to customize the price typography.

Image Size Settings:

Image original size - Select the image size here.

Filters:

Add filters? - Turn on the switcher to add filters on the top.

All item text - Please, add the text for filtering all items.

Enable Centered Style? - Turn on the switcher if you want to make the centered style of the post types.

Use the custom font for filter? - Turn on the switcher if you want to customize the text typography filters.

Custom color for filter active - Choose the color for active filter from the color palette.

Pagination:

Add pagination - Turn on the switcher if you want to add pagination to the section with the post types. Notice: Do not use pagination and load more options together.

Load More:

Add load more? - Turn on the switcher if you want to add a "load more" option. Notice: Do not use pagination and load more options together.

Load more type - Please, select the load more type - button or infinity scroll.

Button name(static) - Here you can enter the text for the static button name.

Button name(loading) - Here you can enter the text for the loading button name.

Layout - Please, select the button layout.

Style - Here you can select the button style (dark or light).

Size - Here you can select button size (small or large).

Type - Here you can select the button type (reverse or transparent).

Box shadow - This option allows you to add the box shadow to the button.

Enable Full Width - Turn on the switch if you want to display a full-width button.

Data Settings:

Data source - Please, select the content type for your grid.

Terms - Please, select the content type for your grid.

Hide posts that have not main thumbnails? - Turn on the switcher if you want to hide posts that have not main thumbnails.

Total items - Set max limit for items in a grid or enter -1 to display all (limited to 1000).

Offset - Here you can enter the number of grid elements to displace or pass over.

Order by - Select order type. If "Meta value" or "Meta value Number" is chosen then meta key is required.

Sort order - Here you can select the sorting order.

Excerpt Length - Set the excerpt length or leave blank to set default 55 words.

Narrow data source - Please, enter categories, tags, or custom taxonomies.

Exclude - Exclude posts, pages, etc. by title.

Content Settings:

Element tag for title - Here you can select the title tag.

Item per row - Here you can enter the number of posts by default.

Spaces - Here you can enter the spaces between the default posts.

Item per row(lg)  - Here you can enter the number of default posts on devices width <1200px.

Spaces(lg) - Here you can enter spaces between the posts on devices with a width of <1200px.

Item per row(md)  - Here you can enter the number of default posts on devices width <991px.

Spaces(md) - Here you can enter spaces between the posts on devices with a width of <991px.

Item per row(sm)  - Here you can enter the number of default posts on devices width <768px.

Spaces(sm) - Here you can enter spaces between the posts on devices with a width of <768px.

Item per row(xs)  - Here you can enter the number of default posts on devices width <480px.

Spaces(xs) - Here you can enter spaces between the posts on devices with a width of <480px.

Image Height - Here you can enter height relative to image width (percentage). Value between 30-100. You can use this option only for masonry layout and grid layout.

How to customize typography you can check in Typography Settings Category:

2. Custo Slider Layout

Skin - Please, select a skin for your post types.

Use the custom font for title? - Turn on the switcher if you want to customize the title typography.

Use the custom font for details? - Turn on the switcher if you want to customize the details typography.

Use the custom font for size and color for stars? - Turn on the switcher if you want to customize the size and color for stars.

Use the custom font for price? - Turn on the switcher if you want to customize the price typography.

Data Settings:

Data source - Please, select the content type for your grid.

Terms - Please, select the content type for your grid.

Hide posts that have not main thumbnails? - Turn on the switcher if you want to hide posts that have not main thumbnails.

Total items - Set max limit for items in a grid or enter -1 to display all (limited to 1000).

Offset - Here you can enter the number of grid elements to displace or pass over.

Order by - Select order type. If "Meta value" or "Meta value Number" is chosen then meta key is required.

Sort order - Here you can select the sorting order.

Excerpt Length - Set the excerpt length or leave blank to set default 55 words.

Narrow data source - Please, enter categories, tags, or custom taxonomies.

Exclude - Exclude posts, pages, etc. by title.

Content Settings:

Image Height - Here you can enter height relative to image width (percentage). The value is between 30-100.

Slider Options:

Change slider options? - Turn on the switcher if you want to change the slider settings.

  • Arrows - Turn on the switcher if you want the arrows to be displayed.

  • Arrows color - Select the color for arrows from the color palette.
  • Arrows font size - Enter arrows font size with units.
  • Pagination - Turn on the switcher to display the pagination.
  • Loop - Turn on the switcher to display the loop effect.
  • Overflow visible - Turn on the switcher if you want to make overflow visible.
  • Simulate Touch - Turn on the switcher if you want to display a simulation touch.
  • Centered Slides - Turn on the switcher if you want to make centered slides.
  • AutoPlay - Here you can enter the auto play rate (in ms). 0 - automatic shutdown.
  • Speed - Here you can enter the speed (in ms).
  • Number of slides - here you can enter the number of slides by default.
  • Number of slides (lg) - Here you can enter the number of default slides on devices width <1200px.
  • Slide count (md) - Here you can enter the default slider count for devices with a width of <991px.
  • Number of slides (cm) - Here you can enter the default number of slides on devices with a width of <768px.
  • Number of slides (xs) - y 
  • Slide spaces - Here you can enter the spaces between the default slides.
  • Spaces (lg) - Here you can enter spaces between slides on devices with a width of <1200px.
  • Spaces (md) - Here you can enter spaces between slides on devices with a width of <991px.
  • Spaces (cm) - Here you can enter spaces between slides on devices with a width of <768px.
  • Spaces (xs) - Here you can enter slides between devices on widths <480px.

How to customize typography you can check in Typography Settings Category:

3. Masonry Layout

Skin - Please, select a skin for your post types.

Use the custom font for title? - Turn on the switcher if you want to customize the title typography.

Use the custom font for terms? - Turn on the switcher if you want to customize the term typography. It works for skins that have terms.

Use the custom highlight typography in the last word in title? - Turn on the switcher if you want to customize the highlight typography in the last word in the title.

Add box shadow? - Turn on the switcher if you want to add the box-shadow to the posts.

Use excerpt typography? - Turn on the switcher if you want to customize the excerpt typography.

Use quote text typography? - Turn on the switcher if you want to customize the quote text typography.

Use quote author typography? - Turn on the switcher if you want to customize the quote author typography.

Images size:

Image original size - Select the image size here.

Filters:

Add filters? - Turn on the switcher to add filters on the top.

All item text - Please, add the text for filtering all items.

Enable Centered Style? - Turn on the switcher if you want to make the centered style of the post types.

Use the custom font for filter? - Turn on the switcher if you want to customize the text typography filters.

Custom color for filter active - Choose the color for active filter from the color palette.

Pagination:

Add pagination - Turn on the switcher if you want to add pagination to the section with the post types. Notice: Do not use pagination and load more options together.

Load More:

Add load more? - Turn on the switcher if you want to add a "load more" option. Notice: Do not use pagination and load more options together.

Load more type - Please, select the load more type - button or infinity scroll.

Button name(static) - Here you can enter the text for the static button name.

Button name(loading) - Here you can enter the text for the loading button name.

Data Settings:

Data source - Please, select the content type to display 

Terms - Please, select the terms to display

Display post only with thumbnails? - Turn on the switcher if you want to display the post only with thumbnails.

Total items - Set max limit for items in a grid or enter -1 to display all (limited to 1000).

Offset - Here you can enter the number of grid elements to displace or pass over.

Order by - Select order type. If "Meta value" or "Meta value Number" is chosen then meta key is required.

Sort order - Here you can select the sorting order.

Excerpt Length - Set the excerpt length or leave blank to set default 55 words

Narrow data source - Please, enter categories, tags, or custom taxonomies.

Exclude - Exclude posts, pages, etc. by title.

Content Settings:

Element tag for title - Here you can select the title tag.

Item per row - Here you can enter the number of posts by default.

Spaces - Here you can enter the spaces between the default posts.

Item per row(lg)  - Here you can enter the number of default posts on devices width <1200px.

Spaces(lg) - Here you can enter spaces between the posts on devices with a width of <1200px.

Item per row(md)  - Here you can enter the number of default posts on devices width <991px.

Spaces(md) - Here you can enter spaces between the posts on devices with a width of <991px.

Item per row(sm)  - Here you can enter the number of default posts on devices width <768px.

Spaces(sm) - Here you can enter spaces between the posts on devices with a width of <768px.

Item per row(xs)  - Here you can enter the number of default posts on devices width <480px.

Spaces(xs) - Here you can enter spaces between the posts on devices with a width of <480px.

Image Height - Here you can enter height relative to image width (percentage). The value between 30-100. You can use this option only for masonry layout and grid layout.

How to customize typography you can check in Typography Settings Category:

4. Mosaics Layout

Mosaics Skin - Select skin for your post types.

Mosaics Columns - Select the number of columns the posts to be displayed.

Use the custom font for title? - Turn on the switcher if you want to customize the title typography.

Use the custom font for terms? - Turn on the switcher if you want to customize the term typography. It works for skins that have terms.

Images size:

Image original size - Select the image size here.

Pagination:

Add pagination - Turn on the switcher if you want to add pagination to the section with the post types. Notice: Do not use pagination and load more options together.

Load More:

Add load more? - Turn on the switcher if you want to add a "load more" option. Notice: Do not use pagination and load more options together.

Load more type - Please, select the load more type - button or infinity scroll.

Button name(static) - Here you can enter the text for the static button name.

Button name(loading) - Here you can enter the text for the loading button name.

Data Settings:

Data source - Please, select the content type to display 

Terms - Please, select the terms to display

Display post only with thumbnails? - Turn on the switcher if you want to display the post only with thumbnails.

Total items - Set max limit for items in a grid or enter -1 to display all (limited to 1000).

Offset - Here you can enter the number of grid elements to displace or pass over.

Order by - Select order type. If "Meta value" or "Meta value Number" is chosen then meta key is required.

Sort order - Here you can select the sorting order.

Excerpt Length - Set the excerpt length or leave blank to set default 55 words

Narrow data source - Please, enter categories, tags, or custom taxonomies.

Exclude - Exclude posts, pages, etc. by title.

Content Settings:

Element tag for title - Please, select the tag for the title.

How to customize typography you can check in Typography Settings Category:

Advanced Settings:

  1. Margin: Set the section Margin.
  2. Padding: Set the section Padding.
  3. Z-index: Set the Z-Index. 
  4. CSS ID: Set a CSS ID for your section.
  5. CSS Classes: Set CSS Classes for your section.

Motion Effects

  1. Sticky (Pro only): Set your section as Sticky, and choose between Top or Bottom. 
  2. Scrolling Effects (Pro only): Set Scrolling Effects to On to choose from a variety of animations and interactions that can occur when the user scrolls through the page. 
  3. Entrance Animation: Click the dropdown to choose an animation.

Background

The following options can be set independently for both the normal and hover states.

  1. Background Type: Choose between Classic or Gradient

Border

The following options can be set independently for both the normal and hover states.

  1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  2. Border Radius: Set the border-radius to control corner roundness
  3. Box Shadow: Adjust box-shadow options

Positioning

  1. Width: Select the width of the element, choosing from Full Width (100%), Inline (auto), or Custom. 
  2. Custom Width: Only available if Custom is chosen. Use the slider to adjust the width of the element within the column.
  3. Vertical Align: Only available if Full Width (100%) or Inline (auto) is chosen. Select to display the element at the Start, Center, or End.
  4. Position: Select the position of the element, choosing either Default, Absolute, Fixed, or Custom. Absolute positions an element absolutely to its first positioned parent. Fixed positions an element relative to the user’s viewport. 

If either Absolute or Fixed is selected, the following options also become available.

  1. Horizontal Orientation: Sets the horizontal reference point for the absolute positioning, with choices of either Start or End.
  2. Offset: Changes the horizontal reference point by the amount of the offset
  3. Vertical Orientation: Sets the vertical reference point for the absolute positioning, with choices of either Start or End.
  4. Offset: Changes the vertical reference point by the amount of the offset

Responsive

  1. Reverse Columns: Slide to reverse the order of your columns (Great for Mobile).
  2. Visibility: Show or Hide your section on Desktop, Tablet, or Mobile