I am creating this page to keep a record of what I have learned, and the workflow I have developed, for creating webpages on moorabbinmakerspace.org.au. It may be of use to others who work on the website in future. It should also serve as my personal reminders of what I did.
Starting notes 260515. David Stonier-Gibson, President 2025/26
The starting point
Before I could get properly started I needed help from Rob Brown to “normalise” the “platform”. I find the modern tools confusing, with themes, editors, and conflicts. So Rob got it all in order. Thank you, Rob. I have also had a lot of help from Claude AI, which (who??) seems to be able to hit the nail on the head quite frequently.
The hierarchy of tools is, as far as I can tell:
WordPress /
Astra Theme /
SiteOrigin Page Builder /
SiteOrigin widgets /
SiteOrigin Editor /
SiteOrigin Image /
... etc ..
Other widgets.
The Astra theme defines the top-level page layout elements such as header bar with logo and site menu, footer bar with copyright © etc, colour scheme and font choices. At the time of writing that stuff is way above my pay grade because anything I do there can impact the whole site. (One exception below)
The SiteOrigin Page Builder is one of, as I understand it, several choices of content creation/editing tools.
SiteOrigin Builder lets you design the layout of a page with rows and columns. Each row can contain one or more columns. Each column contains one or more widgets, such as (text) editor, image, and more, including fancy stuff. This allows you to build the layout of a page from variable sized Lego blocks.
Where the magic starts
This process seems a bit blocky-clunky. But the magic comes when the same page gets displayed on huge CAD workstation monitors and tiny phone screens. With careful initial layout design your pages should adapt themselves elegantly to the wildly varying screen sizes.
But not always ...
The very first page I attempted in this system was a candidate home page. I wanted a layout where row consist of a block of text and a paired image, where the image/text order alternates by row, like this:
Text : Image
Image ; Text
Text : Image
Image ; Text
So that's how I laid out the page, and it looked good .... on my large monitor. But what I got on my phone (or phoe format preview, was
Text
Image
Image
Text
Text
Image
Image
Text
So I asked Claude about this, and it came back with a solution that involves a bit of custom CSS code at the Astra top level, and a tint reference in every other row. The trock is to lay ut the page on a wide screen with identical row layouts
