YT Bricks Builder Team Profile Card Layout + Design with Pop-up Model [Video]

Hey everyone, welcome back to the channel and another Bricks Builder design tutorial. In this video, we’re going to create a simple but stylish team profile card layout using Bricks Builder. So, let’s dive right in.

Continue this tutorial by watching the video below –

TRANSCRIPT

Before we get started, let’s take a quick look at the setup we’re working with. This is a simple WordPress website running locally on my computer using Local WP. It uses a clean, vanilla Bricks installation together with my own framework, which includes a range of well-organised utility classes and custom properties.

If you’d like to learn more about the framework, be sure to check out my free WordPress and Bricks Builder Blueprint Course here. You’ll find the link in the description.

OK, let’s get started. Below you will find a list of the class names and structure for this layout –

Class names and structure

Please use these as a guide only –

#section .team {..}
  #container .team__container {..}
     #block .team__sidebar {..}
        #text .text-before {..}
        #heading {..}
        #rich-text {..}
     #block .team__column .columns-4 {..}
        #block .team__card {..} /* viewport interaction fadein 0*/
           #image .team__img {..}
           #block .team__role-wrp
              #text .team__title .fw-700 {..}
              #text .team___role {..}
        #block .team__card {..} /* viewport interaction fadein 300ms*/
           #image .team__img {..}
           #block .team__role-wrp {..}
              #text .team__title .fw-700 {..}
              #text .team___role {..}
        #block .team__card {..} /* viewport interaction fadein 600ms*/
           #image .team__img {..}
           #block .team__role-wrp {..}
              #text .team__title .fw-700 {..}
              #text .team___role {..}
        #block .team__card {..} /* viewport interaction fadein 900ms*/
           #image .team__img {..}
           #block .team__role-wrp {..}
              #text .team__title .fw-700 {..}
              #text .team___role {..}
    

Before we begin designing the section layout, I want to quickly show you that I’ve created a pop-up modal for each team profile.

These are simple pop-ups built with Bricks. If you’d like me to create a separate tutorial explaining how to build them, let me know in the comments, especially if you’re watching this on YouTube or our community platform over at Clique!

OK, now let’s navigate to pages, we’ll edit an existing page with Bricks and create our team profile section from scratch.

By the way, if you’re interested in learning how to build a beautiful and responsive WordPress website with Bricks Builder, then do check out my complete Bricks Builder Design Mastery Course available here. It includes this class-based project that I’m currently working on, as well as a host of resources, including components and templates.

Recommended tutorial

1. Build Series: Building a Modern Pricing Table in Bricks