Building a section to display a process is pretty routine in web design. Unfortunately, most web designers skip essential best practices to ensure maintainability and scalability in a section like this. The end result is that adding a step, or re-ordering steps, is a royal pain in the ass!
Imagine you have 7 steps and have to add a new step between #1 and #2. If you haven't followed best practices, you'll have to manually re-number every single card. An in an alternating layout, you'll have to manually change how the content and media alternate on every card. And if there are alternating design accents, you'll have to manually change all those, too.
Every. Single. Time. Every change, every removal of a step, or every addition of a step requires a ton of manual labor.
In this training, I will teach you how to build this section so that you can add a new step, remove a step, or re-order steps in seconds. You can even generate the entire process section with a single query loop.
The numbering, alternating content/media, and alternating accent elements are all self-adjusting!
Of course, there are a ton of other golden nuggets along the way, like creating slanted gradients, slanted images, gradient divider lines, pseudo-shadows, and more.
Enjoy!
** 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...
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
Негізгі бет Auto-Counting Process Cards (CSS Counter) in Bricks + Much More! Full Page Build!
Пікірлер: 100