Building an Editorial Timeline in Bricks
In this video I will guide you through the process of building an editorial timeline. I'll explain the creative design and subtle interactions involved. Throughout the video, I'll address some issues and provide solutions, such as fixing the timeline content and ensuring proper positioning of elements. By the end, you'll have a fully functional and visually appealing editorial timeline. Watch the video to learn and take action on creating your own timeline!
See the live version here:
https://training.bricksmaven.com/temp...
Chapters:
00:00 Introduction
01:20 Setting the Structure
03:46 Adding Classes to the Elements
06:07 Styling the Elements
08:12 Styling the Card
15:00 Setting up the Timeline
18:35 Positioning the Cards on the Timeline
23:45 Adding a line under the date using the ::before Psuedo Element
42:38 Adding a interactive line as you hover over the Card
47:24 Styling the Breakpoints
58:00 Browser testing in Lambdatest
01:03:04 Final thought and 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