This is part of a series of posts I wrote about migrating a number of WordPress sites I run from a single multi-site setup to separate single site configurations. Along the way I also switched to a more modern, and configurable, theme and a theme manager/editor.
- Migrating to a Single Site Setup
- Learning Elementor
- Wouldn’t It Be Nice if WordPress and Elementor Were Better Structured?
A key learning, for me, about WordPress, Elementor and themes is that their relatively “loose” structure allows for an enormous amount of creative development. Not just in how content is displayed. But also in the kinds of tools that can be built to work within the environment. Before I ran across it I had no idea something like Elementor could fit so nicely, and be so powerful, within the WordPress environment.
But there are always trade-offs. The very looseness which makes all that creativity possible is at the heart of how challenging and frustrating it can be to do things within WordPress. I want to set a sidebar. Where do I do that? WordPress -> Settings? The current theme’s customization interface? The WordPress -> Appearance -> Widgets area? The correct answer — at least when using the Astra Pro theme — is the last one.
But remembering that is not intuitive. In fact, while writing these articles — being drafted only a day or so after I practiced what I’m preaching by redesigning five sites — I spent about 15 minutes digging around WordPress trying to find where the sidebar was defined.
Even more counter-intuitively, setting how much space I want the sidebar to occupy (% of width) isn’t done on the widget page. It’s done within the theme’s customization interface. Probably because theme’s don’t “own” the widget management area; they just use it, and may add specific widgets to it. But they do “own” the space that a sidebar widget takes up.
There’s a related issue that I struggle with within Elementor. I want to decrease the gap between widgets within a column or section. How do I do that? It’s not a setting on the widget itself. Instead, it’s a setting on the column or section object…and since those are, by design, unobtrusive on the Elementor canvas it’s easy to forget to go look in them for settings.
On a deeper level you see the same complication within CSS itself. HTML defines how the content of a webpage, say, is displayed. Subject to the styling rules present either in the HTML itself or one or more CSS files.
But which “style setting” governs? I can’t tell you how many times I’ve copied over HTML and CSS stuff, made one tweak — which I didn’t think would make any significant visual change — and found the page displaying radically differently. Because it turns out that tweak affected some, but not all, of the subsidiary structural elements.
If I didn’t already have gray hair it’d be enough to give me a whole bunch :).
I doubt there’s much that can be done about this because changing it would likely eliminate a lot of the flexibility that’s so important to all the tools and whatnot that are out there.
But here’s one small suggestion: perhaps tools like Elementor could display some kind of “contextual styling information” when you click on an element. Something that would tell you what style settings are affecting the element and where they’re coming from. The Chrome developer window does something comparable, and it’s often extremely helpful in tracking down why something isn’t looking right.