How to Style Individual Elements in a Query Loop With Dynamic Data (Bricks Builder Tutorial)

Using Custom Post Types, Dynamic Data, and Query Loops is a critical aspect of modern web design. However, you'll often run into scenarios where items in the query loop have unique design elements and this proposes a challenge to less experienced designers.
Does this unique styling requirement mean we need to abandon query loops and dynamic data altogether?
Nope! You just need a consistent approach to adding unique styling instructions. One of the best and most straightforward ways to do this is with inline styles and variables.
In this tutorial, I'll show you step by step how to:
1. Create a CPT
2. Create & assign custom fields to the CPT
3. Create a grid of cards that loops through the CPT
4. Populate the cards with dynamic data
5. Control the position and size of unique accent elements using variables and inline styles.
** PRE-REQUISITE & FOLLOW-UP TRAINING **
Creating Grid Layouts: • PB101: L09 - Creating ...
Dynamic Content Management in WordPress: • PB101: L14 - Proper Dy...
Static, Relative, Absolute Positioning: • Relative, Absolute, Fi...
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner-circle/
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **

[@TheClaumigue]

ahahaha this morning I saw him do this live on Matty Eastwood's channel, how cool he turned it into a tutorial

[@ManosGerakakis]

And yes ladies and gentlemen! He does it again! Kevin you are a legend. Thank you for following up on the previous live session where you tried to build this and showing us how to build this step by step. You are constantly making us better designers and developers. Can't thank you enough for what you do. May all the Gods, old and new, bless you!

[@PicSta]

To become a legend, you have to die first. I agree on that he creates legendary tutorials with valuable information or is a living legend 🙂

[@vaughanprint]

@@PicSta Being Irish, Kevin will always dwell in Tír na N'óg but I suspect there might be a bit of Viking in there too, so off to Valhala with him… if he wants.

[@ManosGerakakis]

​@@PicSta Yeap, I agree on what you pointed out. So, let's just say that Kevin's tutorials are legendary.

[@rafikiAli]

Great spin-off from the whole bridge thingy! Great and educational. Thanx!

[@groundpets5101]

I was blown away group in a group 🥳

[@energeiai99]

Your channel is absolutely amazing, great stuff 🎉 thanks

[@Gearyco]

Glad you enjoy it!

[@ST-rq8jw]

I can't explain how thankful I am, really appreciate your work.

[@chrisgreen5711]

Yet another outstanding tutorial Kevin! I can't say how appreciative I am for these. I watched you do this live using Data Attributes and it's so cool we have different ways of doing these things. Thank you for constantly showing us the way 😄

[@DavidWhiteGives]

I watched the live and that was inspirational, this video puts the cherries on top. Thanks Kevin. I find myself watching all your videos and stealing all I can.

[@Gearyco]

💪🏻

[@spacevertex]

This tutorial is bonkers. Are we living in a world where there is no Photoshop? In Photoshop, it would be a breeze, and changes could also be done in a jiffy. This was such a convoluted way of handling things and it shows the folly of using one tool for all needs.

[@ocratest]

The methodology in this tutorial can be applied to other instances, where photoshop may not have a solution, or the positioned elements aren't even images but html content.

[@Gearyco]

Anyone who uses photoshop for this should be fired immediately.

[@spacevertex]

@@Gearyco Small Images on top of larger images in a card design! Is there an invention within the software world where such things can be handled with ease? Image editing software aka graphic design software comes to mind, for graphic design tasks, which this example is, a graphic design task, and Photoshop is the quintessential tool for the task. You fire the designer who uses Photoshop for this task and sensible professionals might fire the developer who has lost his marbles editing images using your convoluted methodology and idiotic ideas thereby wasting time and money.

[@spacevertex]

@@ocratest The focus of this video was images on top of images and thus my comment reflects the absurdity of this approach for placing smaller images on top of larger images, in a card design, using coordinates in ACF fields. It's truly bonkers. No need to justify this idiocy by going on an unrelated tangent, and if you read Kevin’s response, he thinks that his idiotic idea is somehow marvelous and people who don't use his idea need to be fired. Talk about thinking inside the box.

[@groundpets5101]

What I love these types of video, going save this one!!

[@Justin-Bamforth]

Loved this!!!

[@andrewschaeffer4438]

Really cool thanks!

[@eucalyptech]

So many golden nuggets, thank you Kevin 😀

[@barbaranewerla]

Fantastic. Please give us more of this kind of stuff! It is so much needed. Good tutorials to unlock the power of bricks are still rare and it is easy to get stuck just after mastering the basics if you are not a developer...

[@RonnieMbugua]

I still have a lot to learn, but man, this really inspires me! I will keep pushing. Thank you!

[@SiteswithNatalie]

One of the most valuable videos to me as I do love dynamic data content. Thanks @Kevin.

[@davidwalls2304]

Kevin, those data attributes are killer. I really need to wrap my head around how you put those to good use so that I can implement in the future when needed. Great video tutorial.

[@RashaadSallie]

Always great stuff from Kevin - thanks mate

[@timothyhill9938]

Thank you! Great take on the power we have with a good toolset. WP, Bricks, Automatic CSS

[@AmandaLucaseu]

Super useful tutorial Kevin 👍🏻

[@AdoDzeko10]

I was going to rebuild those card from the stream and you came out with a video lol ! Thanks Kevin. Btw, your 4k camera rocks.

[@vaughanprint]

Brilliant and a very clever extra twist to the build off the other day with Mark and Matty. There were a few gotchas in my head that you have addresed here. I'll definitely step through all this again and put together a copy on my local bag of tricks for future reference. I'm currently templating for an artist's catalougue and we have a white hero background for one category of work. There are two or three works though that need a dark background and to avoid making a whole new page template, specifically for these, I am currently applying #postid-xxx %root% {dark style}. Just looking at what you are doing with the custom fields, tokens and attributes, on a much larger scale it is probably the way to go. I will add that the level of detail here is into the relm experts for data entry on each post. So not for the faint hearted and casual clients users.

[@schatten105]

great tutorial. I hope bricks will add dynamic data to the other fields or at least for the css-editor, to config the tokens there instead of using inline-style in this tiny field

[@Gearyco]

It’s html not css so that wouldn’t help. But they could create a better ui for attributes

[@schatten105]

@@Gearyco well also a good idea. Maybe multiple fields for multiple values for the same Attribute. Like a repeater or something

[@innotrends8416]

Thanks Kevin - you're da man - so how would you go ahead and position this for mobiles? Would you add another ACF field?

[@Gearyco]

It’s already mobile responsive.

[@user-eo1vz9lt8g]

Really great tutorial, the best I've seen on this subject. The tutorial the other day with the 4 of you was educational but there was so much going on that it was a bit hard to follow...Question: With your Inner Circle training is it all using ACSS or is it with native Bricks only? Thanks

[@Gearyco]

Every video I do uses ACSS. It’s mission critical. but they are easy to follow along, even if you don’t use it.

[@abdulwaheedorg]

It's really amazing. Could you please explain why the default value of ACF field is not working on 45:10

[@daveden2]

I believe it is because he added the ACF field after he created the post, so the ACF default value did not apply to it.

[@abdulwaheedorg]

@@daveden2 oh I see. I get it now. Thank you so much

[@RashaadSallie]

Hey Kevin.... off topic, why the choice of Arc? Maybe another video of Arc workflow for you?

[@dallaslogic]

Fantastic! How would you handle mobile optimization though?

[@Gearyco]

If you use percentage for placement should be just fine. You a can also use min/max functions.

[@spindreams]

Good tutorial, one thing, in bricks if an image does not have a source, then it won't render any img code so for that specifically you don't technically need to use a Condition.

[@Gearyco]

Good to know, but good fallback just in case and people need to know for other types of fields

[@mio...]

I am a WinOS peasant. The most intriguing part for me was pasting the screenshot in WP Media. How did you do that??

[@DesignRobPearce]

As always, I get why you did this. I do second guess myself that I'm doing 'too much' with ACF sometimes with things like that - haha. What about if one card needed 3, maybe even 4 accents suddenly if they were small. Then I make it into a repeater, etc. and start asking if I'm overcomplicating it simple thing. You can be sure if I build it for 2, the client will ask for 3. I agree with you in the efficiency thing for sure, but you then need to work out the values each time to input yourself for each icon. I question why not just use class values as a dropdown in the backend with readable labels (top, left, right bottom) but the value of classes being accent-img__top, ...left, ...right, ...top, etc. Less fluid positioning than yours sure, but it could result in non-designers making a huge mess of where the accent images all sit. Wouldn't that be simpler for anybody to just update and then chose a value? You can then loop the repeater of those accent images within Bricks and assign the class value chosen.

[@Gearyco]

You’re free to do whatever you want. The video is just an example

[@DesignRobPearce]

@@Gearyco yeah I wasn’t having a dig sorry, more just saying my experience in that sometimes I find I can be ‘too’ clever with looping and ACF :)

[@robbie0872]

How does different breakpoints affect your workflow for something like this? How much does the different sizes change how you set this up?

[@Gearyco]

My example is responsive

[@1anchit]

This is gem honestly. How does get to have the level of this knowledge? Where did you learn this?

[@Gearyco]

Practice :)

[@1anchit]

@@Gearyco I would be happy to have remote work with you as an intern. No payment needed, just projects :D

[@kelvinong8183]

How about the responsive? will it be a problem, the image size got static data in it

[@Gearyco]

Nah, because they’re already small enough. But you can also make them responsive using min or max functions

[@uzzamafroz]

Will components help in these type of scenarios?

[@Gearyco]

Not really. They’ll just add a layer of additional complexity actually.

[@Sadhn90]

name and model of your mic pls @kevin geary

[@Gearyco]

Sm7b