Posts Carousel
You can find “Posts Carousel” element in editing panel of Elementor in “TheGem Blog /Posts” group
Content Tab
Layout
Grid ID
Specify the unique ID for the carousel. You can keep this field empty - in this case the Grid ID will be automatically generated and assigned after saving.
Skin Source
Here you can specify, which design to use for the carousel items. You can select between using the built-in skins/designs for the carousel items or apply the loop item templates made with TheGem Templates Builder. Learn more about Loop Item Builder
Skin
Select between three predesigned style skins: classic, alternative and list style
Columns
Select number of columns to display in posts carousel: for desktop, tablet and mobile. In case of selecting 100% width your carousel will be automatically stretched to the 100% width of the page and you will get an additional option “100% Width Columns” to specify the number of columns for 100% width carousel for screen resolutions greater than 1920px. Please note: 100% width doesn’t appear as 100% width in Elementor edit mode as the element is always limited by section/column’s width settings. However on the front end the carousel will take the full 100% width.
Image Size
You can choose to display thumbnails, generated by theme for posts carousel, or original featured images, uploaded in posts (full size)
Image Ratio
With this setting you can specify the custom image aspect ratio to display in posts carousel. Leave blank to show the original image ratio.
Disable Grid Preloader:
With this setting you can disable carousel preloader.
Query
In this section you can choose posts to be displayed in carousel.
Show
Here you can specify posts of which post type should be displayed in carousel. Posts carousel is compatible with all custom post types, which automatically appear in this control once added to your WordPress instance.
By selecting “Same Taxonomy Items (Related) you can display posts which are related to the current post. In this case next you need to select the “Related by” taxonomy (in case you have created your own custom taxonomy it will automatically appear in “Related by” control.
By selecting “Manual Selection” you can manually select posts from different post types to display in carousel. To manually select posts simply start typing the names of the respective posts in “Select Posts” control.
Source
You can show posts from selected taxonomy terms like blog or product categories, tags etc.
And/or you can manually select posts of the chosen post type by choosing “Posts”/”Manual Selection” in “Source” field. To manually select posts simply start typing the names of the respective posts in “Select Postss” control.
Order By, Sort Order
Specify the sort order of the items in carousel.
Offset
Here you can displace or pass over the first items in carousel by specifying the number of such items to pass over.
Exclude
Using exclude control you can exclude posts from being displayed in carousel. You can manually specify the posts to exclude OR you can exclude the current post (where you are inserting the grid) OR you can exclude posts by taxonomy term – in this case simply start typing for example the name of the blog category, which posts should be excluded from being shown.
Caption
Caption contains title, description, date and categories of post in carousel. It can also include read more button and custom fields.
Caption Position
In posts carousel caption can be shown below image, on image or on image hover. Here you can specify the position of caption.
Hover Effect
Select between multiple different hover effects. You can then customize the colors in the “Style” tab.
Title & Description
Options to show/hide project titles and descriptions in carousel.
Meta
Options to show/hide different post meta elements in carousel. Using Additional Meta control you can specify to show taxonomy or custom fields on or below the image. “Click behavior” helps to determine, what should happen once the page visitor clicks on this additional meta in grid’s post.
Custom Fields
Options to show/hide custom fields in carousel.
Check this example of using custom fields in grid:
https://codex-themes.com/thegem/blocks/custom-fields-extended-ajax-filter/
You can learn more about custom fields in this chapter
Following settings are available:
- Fields Layout: Select between vertical or horizontal (inline) layout for displaying custom fields
- Title: Specify the title/label of the custom field
- Type: You can select between TheGem Custom Fields (see description in chapter “Custom Fields” ), ACF/Toolset custom field groups, taxonomies and project details (for portfolio items, see description in chapter “Portfolio”).
- Select Field/Taxonomy: Choose the custom field or taxonomy to be displayed in the item’s caption
- Field Type: Select between “text” and “number” field type. The “number” field type helps to auto-format the number values when displaying in grid using the current WP Locale (see description on chapter “Custom Fields”).
- Prefix/Suffix: Optionally add prefix/suffix to the “number” value
- Icon: Optionally select an icon for the selected project detail/custom field/taxonomy.
Button
Here you can optionally enable the “Read More” button with the respective settings.
Navigation
This section is for selection of pagination type of posts grid.
Animations
Here you can enable lazy loading animation of posts in posts carousel and select animation effect in “Animation Effect” select box.
Additional Options
This section helps you to make additional adjustments.
Style Tab
Grid Images Style
In this section you can control gaps between posts in carousel and customize items images.
The “Better Thumbnails Quality” control helps to increase the quality of the generated post thumbnails – this could be useful in case of using carousel in fullwidth sections.
In Grid Images Style section you can also enable shadow. By default, shadow is applied only on image container. By activating “Apply shadow on caption container” setting you can enable a common shadow for image container and caption container.
Caption Style
Here you can customize the style and typography of caption elements: title, description, date etc.
Caption Container Style
Settings to customize the appearance of caption container. Note: this section appears only in case if “Caption Position” is set to “Below Image” in Content tab – Caption section.
Preset: here you can select between 4 different color presets for caption container, which can be further customized with additional settings.
Navigation Style
In this section you can customize the look of navigation.
Custom Fields
In this section you can customize the appearance of custom fields in posts carousel.