Using the Order property to position a CTA card into a Query Loop
In this video, I will be demonstrating using the Order property to insert a CTA card into a desired positioning in the Query Loop. I will be using Grid 30 from the Alpha Library I will explain how to create a main card and a CTA card, as well as add a query loop to a card. I will also cover styling, spacing, and accessibility.
See the end result here:
https://test.bricksmaven.com/index.ph...
Chapters:
00:00 Introduction
02:12 Let's build Grid 30 of the Alpha template Library
04:15 Setting up the structure
07:00 Adding the classes to the cards
10:20 Styling the Grid Card
21:20 Adding the query loop to the Card
23:04 Adding the clickable parent to the Card
25:07 Adding interactions to the Card
32:02 Overlay interaction
33:16 CTA interaction
38:00 Image interaction
44:28 Add hover interactions to :focus-within
46:18 Styling the CTA Card
50:12 Positioning the CTA Card in the right order
59:29 Fixing the breakpoints
1:00:47 Conclusion
--------------------------------------------------------------------------------------------------------
Get the Alpha template and speed up your development process
If you are interested in getting this block go to www.bricksmaven.com and get yourself a license which will give you access to 500+ blocks. We support ACSS, CORE and vanilla CSS.
Get access to 100+ blocks for Bricks builder for free
Visit Bricksmaven and test the Alpha template for free, You get access to 100+ blocks which you can copy and paste in your projects and use forever. The free gift comes with 3 different version: ACSS, CORE and Vanilla CSS. Try it out today, visit https://bricksmaven.com/#pricing
Get the Automatic CSS framework | https://automaticcss.com/ref/3/ |
Voted #1 Framework For WordPress Page Builders. Automatic.css (ACSS) is consistently voted the best framework for WordPress because it combines innovative features, True Builder Integration™, best practices, unparalleled support, and education.
Get the CORE Framework | https://coreframework.com/ |
Supercharge your web design game with Core Framework's robust toolkit to manage, organize, and reuse your stylesheets. Seamlessly create, customize, and control every aspect of your project with our unique visual GUI.