A Deep Dive into Streamlining the Design Process
A Deep Dive into Streamlining the Design Process
Addressing the Pain Points of the Old Site
Skills: Digital Design, UI/UX, CSS, Wordpress, Elementor, Dynamic Content, Template Build, Typography
Software Used: Figma, Wordpress, Elementor
The previous version of my site was plagued by inefficiencies in backend integration and content updates. While it was dynamic and allowed on-the-fly changes, the user experience (UX) suffered, especially as the content grew. Built in 2018 during my early days with Advanced Custom Fields (ACF), it had become a patchwork of fixes over the years.
Embracing Elementor's Power
Yes, I still use Elementor. While it has its detractors, it remains a powerful page builder for crafting complex sites. Combined with its dynamic features and some excellent plugins, it enables me to build fully functional, dynamically driven websites.
The real challenge lies in structuring the backend within WordPress. After exploring layouts in Figma, I opted for a six-column grid design with content spanning four columns vertically. This grid structure, though new to my own portfolio, offered a clean and organized canvas.
Harnessing the power of ACF, Dynamic Content for Elementor (DCE), and flexible layouts, I built the frontend in Elementor, connecting custom field types to the layout. This approach minimized the need to open individual pages in the builder, a major pain point of the previous version, especially with image-heavy content.
In a departure from traditional methods, I opted to create a single, highly adaptable Elementor template capable of powering all 31 portfolio pages. This streamlined approach was made possible by leveraging the grid layout in conjunction with the dynamic duo of Dynamic Content for Elementor (DCE) and Advanced Custom Fields (ACF). By strategically integrating these tools, I could selectively activate or deactivate content sections within the template, tailored to the specific requirements of each project. This eliminated the need for numerous individual templates, resulting in a more efficient and maintainable website structure.
Mastering the Hero Section Challenge
Each portfolio page demanded a unique hero section with distinct visual elements, ranging from graphical overlays and subtle film grain effects to captivating “Ken Burns”-style animations. Rather than constructing 31 separate hero sections, I devised a clever solution using ACF and DCE. I built a comprehensive hero container incorporating all potential elements and then employed ACF’s conditional logic capabilities through radio buttons and Yes/No fields. This dynamic system allowed me to effortlessly control the visibility and behavior of each element based on the specific requirements of each page. This not only saved significant development time but also ensured a consistent and polished user experience across the entire portfolio.
Efficiency Over Complexity
While some may scoff at Elementor, I found it to be a powerful tool in conjunction with ACF. This combination enabled me to create a sophisticated CMS-style site without delving into complex PHP code. While UX and logical data structuring were still essential, this approach significantly reduced development time.
Conclusion
This new ACF-driven layout holds immense promise for future client projects. It’s a testament to the power of combining the right tools and techniques to achieve efficient, flexible, and visually appealing websites.
