Blog List

With this element you can add blog lists to your page.

Check this demo pages showing different blog list style presets available in TheGem:

https://codex-themes.com/thegem/blog/classic-list/blog-list-default/
https://codex-themes.com/thegem/blog/styled-lists/blog-list-styled-1/
https://codex-themes.com/thegem/blog/styled-lists/blog-list-styled-2/
https://codex-themes.com/thegem/blog/blog-list/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Blog List” element in editing panel of Elementor in “TheGem Blog / Posts” group

Content Tab

Query

In this section you can choose posts to be displayed in list.

Show

Here you can specify posts of which post type should be displayed in list. Blog list 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 list. 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 list.

Offset

Here you can displace or pass over the first items in list by specifying the number of such items to pass over.

Exclude

Using exclude control you can exclude posts from being displayed in list. You can manually specify the posts to exclude OR you can exclude the current post (where you are inserting the list) 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

Here you can enable or disable displaying of different content elements in each post in list. Also you can enable or disable “Read More” button, specify its text and optionally add icon to this button.

Pagination

This section is for selection of pagination type of blog list.

Items per page

select, how many blog posts should be visible in list on one page.

Pagination

enable/disable pagination for blog list.

Pagination Type

select type of pagination:

  • Numbers: classic numbered pagination
  • Load More Button: additional items will be loaded by clicking on load more button
  • Infinite Scroll: additional items will be automatically loaded while scrolling down

In case “Load More Button” type is selected, you can further specify the button text and optionally add some icon to load more button. You can automatically stretch this button to content fullwidth by activating “ Stretch to Full Width” or add separator to the left and to the right of the load more button by activating “Separator” control.

Social Sharing

Here you can enable social sharing button to be shown in blog post in list as well as select social networks where the post can be shared.

Animations

Here you can enable lazy loading animation of blog posts in blog list and select animation effect in “Animation Effect” select box.

Additional Options

Enable or disable highlighted appearance of sticky posts.


Style Tab

Depending on the chosen skin, selected in Content tab – Layout section, the sections in Style tab vary.

Image Style

Customization options for image appearance. Here you can also customize the hover effect in “Hover” tab. You can also specify, if you wish to show icon on hover and customize its appearance

Image Container Style

Various settings to customize the appearance of image container. Each image is situated inside the container; here you can specify border, radius, paddings, background of the container.

Caption Style

Here you can customize the style and typography of caption elements: title, description, date etc.

Caption Container Style

Set of settings to customize the appearance of caption container. Note: This section appears only if “Masonry” layout is selected for blog grid.

Pagination Style

In this section you can customize the look of number pagination. This section appears only in case if “Numbers” pagination type has been selected in Content tab – Pagination section.

“Load More” Button Style

Here you can customize the look of load more button. This section appears only in case if “Load More Button” pagination type has been selected in Content tab – Pagination section. Here you have presets for button style (flat, outline) and button size and many other additional customization settings. In case you have enabled separator in Content tab – Pagination section, here you can also choose between 4 different style presets and further customize its size, weight and color

“Read More” Button Style

Here you can customize the appearance of “Read More” button

Sharing Style

This section contains settings to customize the look of sharing button (in case sharing button has been enabled in Content tab – Social sharing section)

Sticky Post Container Style

This section appears only if “Ignore sticky posts” setting has been disabled in Content tab – Additional options section. Here you can customize the look of the sticky post container, making it look different from other posts.

Sticky Post Caption Style

This section appears only if “Ignore sticky posts” setting has been disabled in Content tab – Additional options section. Here you can customize the look of the sticky post caption, making it look different from other posts.