I’ve deployed hundreds of design updates to my blog yesterday. After somewhere north of a hundred hours spent carefully crafting the User eXperience (UX) design by building some sophisticated WordPress components, reverse engineering WordPress and JetPack code, tweaking HTML code, writing 424 lines of CSS code including some pretty advanced stuff, and implementing the Elementor Pro page builder and theme builder, I’ve finally been able to get the kind of near pixel perfect design that I wanted to achieve by migrating off of Blogger and onto WordPress. It just took way too much time and energy, but it’s finally a lot closer to the design I really wanted.
I hope to find the time to write some detailed articles on each of the design areas that I’ve been able to implement. For now, here’s a summary of some of the major improvements.
Landing Pages
I’ve wanted to have fully customizable landing pages for each major node on the site map, and now I can do it. Finally. Blogger had absolutely no way to do this (and a bunch of other stuff), and could only offer very crude ways to navigate a site. WordPress out of the box at least offered much more configurable User eXperience (UX) design capabilities, but does not do a good job at deep customization. For that I needed to implement a sophisticated page and theme builder tool, and after dozens of hours of research and testing I chose Elementor Pro.
Here is an example of the Agile landing page, before with simple WordPress based category driven archive page, and after the new fully customized landing page.
BEFORE
AFTER
Before and After Slider
The images below use the cool new WordPress v5.5 image compare slider to interactively show the differences between the before and after images above. Just click and drag the vertical slider up and down. The before is the image on the top, so drag up to transform it to the after image.
Post Tiles
The post tiles that display on post list pages, called archive pages in WordPress terminology, were one of the most frustrating things for me. I wanted complete design control over how these display. I’ve had to research and test over a dozen different WordPress plugins and blocks to get what I wanted. And all of them stink, because you get little to no control over the design styling, and even something as seemly basic as what order the fields display in. Even the Posts widget built in to Elementor Pro couldn’t do it. Which is totally bananas to me, because Elementor is marketed as giving you complete control over your design with pixel perfect precision. But I’ve discovered through lots of pain and wasted time, that is NOT true in quite a few areas.
Finally an Elementor support technician, after many tickets to them, suggest that maybe a third party plugin that extends Elementor might be able to do it. And it could !!! Although I wasted tons of hours, I finally found a solution for fully customizing the post skin, with Elementor Custom Skin.
BEFORE
AFTER
Post Page Design
My requirements for the page design for posts, was similar to that of post tiles. I wanted complete control over the layout of how and where fields display. This is another area that is extremely frustrating in WordPress. Typically this design, like post tiles, is controlled by the theme that you use. And if you don’t like it, you’re SOL. This again is where the theme builder features of Elementor Pro helped me overcome these kinds of limitations.
BEFORE
AFTER
Table Of Contents
Having an automatically generated table of contents was another big reason to migrate off of Blogger, and to WordPress. Unfortunately WordPress does not include this functionality, but there are lots of third party plugins, blocks and widgets that do. It took dozens of hours to research and test several of them to use when I launched the WordPress implementation of this site back in Nov 2019. And dozens more hours to re-design it.
I’ve been using the LuckyWP Table of Contents plugin. And I decided to continue to use it in the re-design, even though it is partially functionally redundant because I’ve also added Elementor’s Table of Contents widget. I decided to continue to use it because it adds anchors for each heading, supporting deep linking, and I have used those a few times in previously published content. So I want to maintain that capability.
I’ve added Elementor’s Table of Contents widget with a dramatic color design and a sticky feature that always keeps it on the left side of the web page when you scroll down. Elementor’s widget has some features, and some bugs, that LuckWP does not. It can dynamically expand as you move through the page content, and it can highlight the section you’ve clicked on or scrolled in to. Although that is the buggy parts. It does not seem to work consistently. However, even though it is buggy, the bugs aren’t a deal breaker. The essential functionality of being able to click on headings and have those with children headings expand when you click, does work consistently. And that’s enough to make it useful. But I do hope that Elementor fixes the bugs and adds support for all the design I had to do by hand with CSS code because the widget only supports simple styling. Which is a massive contradiction for a product that claims to be a pixel perfect design tool.
Elementor
LuckyWP
Category, Tag, Author Pages – WordPress Archive
In WordPress they call the template used to display lists of posts the Archive. It’s used to display lists by category, tag, author, date, search results, etc. So this Archive template design is based on the Post tile design above.
BEFORE
AFTER
Widget Sidebar
Once you switch to using Elementor Pro’s Theme Builder templates, the standard WordPress widget sidebars can’t be used. So I completely replaced the right widget sidebar with an Elementor template.
It effectively acts like a page part that I add into other templates and pages. That way I have only 1 right sidebar design, that is used in many places. This approach allows me the same one place to make design changes, that WordPress’s built in widget customizer does. I’ve used this design approach in multiple places, to make the page parts reusable and I can update the design in one places, and it will update the resulting web pages many many places.
BEFORE
AFTER
Hover, Animation and Transition Effects
Throughout the site I’ve designed hover animations on links, that are customized to every single place there is a link that can be clicked. Those had to be done with a lot of custom CSS code. And that required a lot of reverse engineering of HTML code to get all the CSS code right. Elementor is capable of doing a small amount of the link hover effects that I wanted, but most required hand coding with CSS and/or was just easier to do in a single place via CSS code instead of having to do it with design properties buried in a bunch of different places in Elementor.
There are also entrance animations used everywhere to slide into view the post tiles, content and sidebars. That was able to be done with Elementor’s design features. And since it was only needed in a few places, was straightforward to do inside Elementor, instead of outside via hand written CSS code.
Try it out by simply clicking and mousing around the site.
And There’s More
There are lots and lots of other small design improvements all over the place. I basically spent dozens and dozens of hours going over every pixel of the WordPress and the site to tweak the crap out of everything that I could. And I still have more I want to do. But I had to stop somewhere and get a critical mass of it deployed to production.
For example, Elementor Pro’s Theme Builder can replace every part of what a WordPress theme does. And with better designed results. Things like the site’s menu, header, footer, and other basic WordPress templates like search and 404 pages can be designed. So those things are next, and I hope to be able to eventually eliminate the WordPress theme entirely and replace all of it with Elementor Pro’s Theme Builder templates.