Creating a Featured Blog Section in Bricksbuilder in 3 ways | The last one will blow your mind!
In this video, I walk you through the process of creating a featured blog section using three different methods. I found inspiration from a blog section created by Sridhar on BricksSections.com. We'll start by creating two columns using CSS grid & flexbox and then style the cards. Next, we'll add interaction to the cards to make them move up when hovered over. Finally, I'll show you the most efficient way to create the section by adding some code snippets and conditions. Check out the video for step-by-step instructions and grab the code in the description below.
You will learn the following:
How to layout the elements
How to style a blog section card
How to make a card clickable
How to add interactions to a card
How to add the Bricks query loop to a card and also use the offset feature
How to set the featured image and excerpt to display none on other posts except the featured post
Link to Blog section example:
https://brickssections.com/posts-grid-2/
Check out the blog section here:
https://training.bricksmaven.com/temp...
Chapters:
00:00 Introduction
01:00 Different ways to build a 2 column blog section
03:15 Laying out the elements
05:23 Adding the classes
07:20 Example 1 Styling the classes
08:43 Styling the featured Card on the left
11:23 Styling the other post cards on the right
16:15 Making the featured card and other post cards clickable
19:46 Adding Interaction to the Cards
23:50 Example 1 is not the most optimal way
24:28 Example 2 the much better way
32:10 Setting the Featured image and excerpt to display none on the other posts(Long winded way)
34:57 Setting the Featured image and excerpt to display none on the other posts(Shorter way)
37:14 Styling the section on mobile
41:10 Inspecting the DOM to view the results
43:12 Example 3 The most efficient way
43:38 Adding code to code snippets plugin
44:25 Adding conditions to the image and excerpt elements
45:20 End result & 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.