{"id":1932,"date":"2024-07-10T06:55:17","date_gmt":"2024-07-10T06:55:17","guid":{"rendered":"https:\/\/helpcenter.greyd.io\/2023\/11\/20\/highlight-a-post-in-query-loop\/"},"modified":"2024-12-26T18:27:42","modified_gmt":"2024-12-26T17:27:42","slug":"highlight-a-post-in-query-loop","status":"publish","type":"post","link":"https:\/\/helpcenter.greyd.io\/highlight-a-post-in-query-loop\/","title":{"rendered":"How can I have several layouts \/ designs in one post overview?"},"content":{"rendered":"<p>With the Post Overview or Query Loop block, you can flexibly display posts &#8211; as a table, grid or list. In combination with Conditional Content, you can also visually highlight individual posts and\/or work with different layouts within one post overview. To do this, simply add the Conditional Content block twice in your query loop. <\/p>\n<p><\/p>\n<p><b>Example 1<\/b>: Alternating Layouts &#8211; Video \/ Text left or right<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/653f9c96f74d440dadd6d202\/file-LjiTiARGfD.png\" style=\"width: 525px;max-width: 100%\" \/><\/p>\n<p>To make your query loop alternate two different layouts, select &quot;index of the current post&quot; as your condition. In one of your conditional content blocks select &quot;is even&quot; and in the other &quot;is odd&quot;. Then place the respective post templates (one with the video on the left and one with the video on the right) within your conditional content container.<\/p>\n<figure style=\"width: 317px;max-width: 100%\" class=\"\">\n        <img decoding=\"async\" alt=\"List View for Example 1\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/653f9bd60e14eb127e0f16e7\/file-FfCl4zGhRA.png\" \/><figcaption>List View for Example 1<\/figcaption><\/figure>\n<p><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/668e30005908935e8481834c\/file-VPq6idv4U2.png\" style=\"max-width: 100%\" \/><\/p>\n<p><\/p>\n<p><b>Example 2:<\/b> Highlighting one post in a post overview<\/p>\n<p>According to the same principle you could also use different post templates &#8211; one with and one without a background color. To use the colored template for the second post of your post overview, select &quot;index of the current post is \/is not 2&quot; as your conditions.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/668e30405940934e140f5c1b\/file-lztijeuFqS.png\" style=\"width: 246px;max-width: 100%\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>With the Post Overview or Query Loop block, you can flexibly display posts &#8211; as a table, grid or list. In combination with Conditional Content, you can also visually highlight individual posts and\/or work with different layouts within one post overview. To do this, simply add the Conditional Content block twice in your query loop. [&hellip;]<\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"greyd_block_editor_preview":[],"footnotes":""},"categories":[1],"tags":[199,200,178,177,67,173,174,175,201,176,33,34],"topics":[578,582,580],"class_list":["post-1932","post","type-post","status-publish","format-standard","hentry","category-general","tag-abwechselnd","tag-alternate","tag-condition","tag-conditional","tag-dynamic-content","tag-hervorheben","tag-highlight","tag-kachel","tag-layout","tag-post-overview","tag-post-ubersicht","tag-query","topics-design","topics-greyd-blocks","topics-templates-post-types"],"lang":"en","translations":{"en":1932,"de":2700},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/posts\/1932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/comments?post=1932"}],"version-history":[{"count":1,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/posts\/1932\/revisions"}],"predecessor-version":[{"id":4725,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/posts\/1932\/revisions\/4725"}],"wp:attachment":[{"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/media?parent=1932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/categories?post=1932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/tags?post=1932"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/topics?post=1932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}