Team Type Popup

Items to take care

  • Team CPT name should be “Team”.
  • Custom field for Designation should be “member-position”.
  • Firelight Lightbox plugin shuld be installed.
  • Divider block plugin is used in this pattren.

Pattern HTML

<!-- wp:group {"metadata":{"name":"Team Section"},"className":"team-grid","layout":{"type":"constrained"}} --> <div class="wp-block-group team-grid"><!-- wp:query {"queryId":4,"query":{"perPage":4,"pages":0,"offset":0,"postType":"team","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[],"format":[],"disable_pagination":true,"tax_query":{"relation":"OR","queries":[{"id":"1524c61c-5cb8-4e7b-bf7b-f948a5d69ae0","include_children":true,"operator":"IN"}]},"meta_query":{},"include_posts":[]},"namespace":"advanced-query-loop"} --> <div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"grid","columnCount":4}} --> <!-- wp:columns --> <div class="wp-block-columns"><!-- wp:column {"className":"whole-box-link"} --> <div class="wp-block-column whole-box-link"><!-- wp:post-featured-image {"isLink":true,"className":"fancybox-iframe","style":{"border":{"radius":{"topLeft":"5px","topRight":"5px"}}}} /--> <!-- wp:group {"style":{"spacing":{"blockGap":"10px","padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}},"border":{"radius":{"bottomLeft":"5px","bottomRight":"5px"}}},"backgroundColor":"sixth","layout":{"type":"constrained"}} --> <div class="wp-block-group has-sixth-background-color has-background" style="border-bottom-left-radius:5px;border-bottom-right-radius:5px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"style":{"spacing":{"blockGap":"20px"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} --> <div class="wp-block-group"><!-- wp:divider-block/divider {"width":"3px","height":"50px","color":"#FFC829","position":"left"} --> <div class="wp-block-divider-block-divider"><div class="divider-block-divider" style="margin-right:auto;margin-left:0;width:3px;height:50px;background-color:#FFC829" aria-hidden="true"></div><style> @media (max-width: 980px) { .divider-block-divider { width: 100% !important; margin-left: auto !important; margin-right: auto !important; } } </style></div> <!-- /wp:divider-block/divider --> <!-- wp:group {"style":{"spacing":{"blockGap":"5px","margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} --> <div class="wp-block-group" style="margin-top:0;margin-bottom:0"><!-- wp:post-title {"level":5,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"fontSize":"paragraph-1"} /--> <!-- wp:acf/member-position {"name":"acf/member-position","mode":"preview"} /--></div> <!-- /wp:group --></div> <!-- /wp:group --></div> <!-- /wp:group --></div> <!-- /wp:column --></div> <!-- /wp:columns --> <!-- /wp:post-template --></div> <!-- /wp:query --></div> <!-- /wp:group -->

Pattern CSS

body .wp-block-query li.wp-block-post figure img { height: 268px; object-fit: cover; object-position: top; } .team-grid .wp-block-query .whole-box-link > .wp-block-group.has-background { padding-left: 20px !important; padding-right: 10px !important; height: 120px; } .team-grid .wp-block-query .whole-box-link > .wp-block-group.has-background > .wp-block-group { gap: 15px; } p.position { margin-top: 0; line-height: 1.2; font-size:15px; } .team-grid .divider-block-divider { border: none; clear: both; margin: 0px auto; }