Skip to content

ProUpdated 7 min readView demo

The Post Gallery widget by Atomic Addons shows the first post's featured image as a large background, with that post's category, title, excerpt and meta on a frosted card over it, and the next posts in a scrolling list of thumbnails beside the card. This guide covers adding the widget, choosing the posts and setting up the featured card and the list.

Enable the Post Gallery Widget

Post Gallery is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:

  1. 1

    Go to WordPress Dashboard → Atomic Addons.

  2. 2

    Click the Widgets tab.

  3. 3

    Search for Post Gallery. You can also open the Posts / Dynamic category.

  4. 4

    Turn the Post Gallery widget on.

  5. 5

    Click Save Settings.

Add the Post Gallery Widget

Post Gallery works on any page, post or saved template:

  1. 1

    Open the page in Elementor (Edit with Elementor).

  2. 2

    In the widget panel, search for Post Gallery. The widget sits in the Atomic Addons Pro category.

  3. 3

    Drag it into the page and set it up with the controls below.

  4. 4

    Click Publish (or Update).

Layout

Open the widget and go to Content → Layout:

  1. 1

    Content Max Width: The widest the featured card may grow, from 200 to 1000px. 500px is used on tablets and desktops when it is empty.

  2. 2

    List Max Width: The widest the list of other posts may grow, from 200 to 1000px. 400px is used on tablets and desktops when it is empty.

  3. 3

    Content Position: Where the card and list sit over the image: Top, Center or Bottom. On tablets and desktops they sit at the bottom when nothing is picked.

  4. 4

    Content Text Align: Left, center, right or justified text on the featured card.

  5. 5

    List Text Align: Left, center, right or justified text in the list.

  6. 6

    Image Resolution: Which image size WordPress serves for the background and the thumbnails. Full by default, so the large background stays sharp.

The background image is 580px tall on phones, 540px on tablets and 640px from 1024px wide. On tablets and desktops the card and the list sit side by side; on phones the list sits under the card. When the list holds more posts than fit, it scrolls on its own.

Query

Content → Query decides which posts appear:

  1. 1

    Item Limit: How many posts to show, from 1 to 20. 5 by default.

  2. 2

    Source: Which posts to pick from. The list has your public post types, such as Posts (the default), Pages and, with WooCommerce, Products, followed by three special sources. Manual Selection shows only the posts you search for and pick in Search & Select; they can be of any post type. Current Query shows the posts of the page being viewed — a blog, category, tag, author or search results page — which is what an archive template needs; the editor may not show them until you save and reload. Related shows, on a single post, other posts of the same type by the same author; narrow it with Include By → Terms, and add Exclude By → Current Post to leave out the post itself.

  3. 3

    Include / Exclude: Two tabs, hidden for Manual Selection and Current Query. Include By keeps only posts by the Authors you pick or in the Terms you pick (categories, tags, formats or custom taxonomy terms). Exclude By leaves out Authors, Terms, posts you pick with Manual Selection (in its own Search & Select field) or the Current Post.

  4. 4

    Offset: Skips this many posts from the start of the list. 0 by default.

  5. 5

    Date: All (the default), or only posts published in the Past Day, Past Week, Past Month, Past Quarter or Past Year. Custom adds a Before and an After date; both are inclusive.

  6. 6

    Order By: Title, ID, Date (the default), Author, Comment Count, Menu Order, Last Modified or Random.

  7. 7

    Order: DESC (the default) puts the newest or highest first; ASC reverses it.

  8. 8

    Ignore Sticky Posts: With the Posts source only. On by default, so sticky posts keep their normal place instead of jumping to the top.

Only Featured Image Post leaves out posts without a featured image. Query ID is for developers: it gives the query a name that custom code can hook into through the atomel/query/{your-id} action.

The section also has a Limit field (6 by default). This widget does not use it: the number of posts comes from Item Limit at the top of the section.

With Current Query the page's own query decides which posts show and in what order, so the filters, Offset and order settings are hidden. Current Post works with the Related source, and with the Posts source while Ignore Sticky Posts is on.

The first post becomes the featured post; the rest fill the list. With the default of 5, that is one featured post and four in the list.

Additional Settings

Content → Additional Settings picks what the posts show:

  1. 1

    Title: The post title, linked to the post. On by default.

  2. 2

    Title HTML Tag: The title's markup: H1 to H6, div, span or p. H3 by default.

  3. 3

    Show Text: The featured post's excerpt, on the card only. On by default.

  4. 4

    Text Limit: How many words of the post's content to show, 20 by default; 0 shows the full content. A post with a hand-written excerpt shows that excerpt instead, whatever the limit.

  5. 5

    Ellipsis: Text added after the cut, such as “…”. Shown while Text Limit is not 0.

  6. 6

    Strip Shortcode: Removes shortcodes from the text. On by default.

  7. 7

    Show Category: The post's categories above the title. On by default.

  8. 8

    Show Author: “by” and the author's name, linked to their posts. On by default.

  9. 9

    Show Comments: The comment count, such as “4 Comments”. Off by default.

  10. 10

    Separator: The character printed between the meta items, “·” by default.

  11. 11

    Date: The publish date. On by default.

  12. 12

    Human Different Time: Shows the date as elapsed time, such as “3 days ago”, instead of the date itself.

  13. 13

    Time Short Format: With Human Different Time on: shortens it, such as “5h ago” or “3d ago”.

  14. 14

    Show Time: With Human Different Time off: adds the publish time, with a clock icon, after the date.

  15. 15

    Reading Time: An estimate such as “3 min 20 sec read”, worked out from the post's word count. Off by default.

  16. 16

    Reading Speed: The words per minute the estimate assumes, 200 by default.

  17. 17

    Item Wrapper Link: Makes the whole item clickable, opening its post in the same tab. Off by default.

The meta line shows the author, date, comments and reading time in that order, on the card and on each list item. The widget has no pagination.

Style the Post Gallery

Everything below is on the Style tab. Sections that belong to a part you turned off are hidden.

  • Wrapper — the Overlay Color over the background image and the Margin around the card and list.
  • Featured Image — the background's Height, border, border radius and spacing.
  • Featured Item — the card's background, Glassmorphism (a frosted blur behind the card, on by default) with its Blur Level (10 by default), border, border radius, padding and margin.
  • List Item — Item Gap, List Wrap Padding, and the Border Color and Border Width of the line under each item.
  • Thumbs — the list thumbnails' Size (Width), spacing and border radius.
  • Title — a hover line Style (Underline, the default, Middle Underline, Overline or Middle Overline), and color, hover color, margin, typography and text shadow in Normal and Featured tabs.
  • Text — the excerpt's color, typography and margin.
  • Meta — color, Author Hover Color, separator color, space between and typography in Normal and Featured tabs.
  • Category — the category text in Normal, Featured, Hover and Featured Style tabs: color, background, border, border radius, padding, margin and typography.

Can't find what you need?

Our support team can help with setup questions and anything the docs don't cover yet.

Contact support