Items to take care
- Team CPT name should be “Team”.
- Custom field for Designation should be “member-position”.
- Firelight Lightbox plugin shuld be installed.
- Register “Team Member First Word” block in child theme ACF file.
Team Type Popup 2
The above block is copied from the site: https://clgwmdev.wpenginepowered.com/universal-components-library/
Pattern HTML
<!-- wp:group {"metadata":{"name":"Team Members"},"className":"team-grid","style":{"spacing":{"padding":{"top":"var:preset|spacing|30"},"blockGap":"var:preset|spacing|50"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group team-grid" style="padding-top:var(--wp--preset--spacing--30)"><!-- wp:query {"queryId":1,"query":{"perPage":3,"pages":0,"offset":0,"postType":"team","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[],"format":[],"disable_pagination":true,"include_posts":[],"meta_query":{}},"namespace":"advanced-query-loop"} -->
<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"className":"whole-box-link","style":{"spacing":{"blockGap":"0"}}} -->
<div class="wp-block-column whole-box-link"><!-- wp:group {"metadata":{"name":"Team Member Image"},"className":"team-member-image","layout":{"type":"constrained"}} -->
<div class="wp-block-group team-member-image"><!-- wp:post-featured-image {"style":{"border":{"radius":"8px"}}} /-->
<!-- wp:acf/first-word {"name":"acf/first-word","mode":"preview"} /--></div>
<!-- /wp:group -->
<!-- wp:post-title {"level":4,"isLink":true,"className":"fancybox-iframe","style":{"elements":{"link":{"color":{"text":"var:preset|color|five"}}},"spacing":{"margin":{"bottom":"5px","top":"var:preset|spacing|15"}}},"textColor":"five"} /-->
<!-- wp:acf/member-position {"name":"acf/member-position","mode":"preview"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->
Pattern CSS
.team {
position: relative;
}
.first-word {
background: rgba(28, 87, 167, 0.70);
position: absolute;
top: 0;
margin-block-start: 0 !important;
width: 100%;
height: 100%;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--wp--preset--color--one);
font-size: 20px;
font-weight: 600;
opacity: 0;
transition: all 0.3s;
}
li.team-member:hover .first-word,
li.team-member:focus-within .first-word {
opacity: 1;
}
.first-word h4 {
position: relative;
padding: 125px 0 0;
width: 80%;
text-align: center;
color: var(--wp--preset--color--one);
}
.first-word h4::before {
content: "";
background: url("/wp-content/uploads/2025/07/arrow-circle.png") no-repeat;
display: block;
width: 108px;
height: 108px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
li.team:hover .first-word, li.team:focus-within .first-word {
opacity: 1;
}
.team a::after {
content: '';
inset: 0;
position: absolute;
z-index: 10;
}
