2a: Home
Last updated
Last updated
Let’s start with the Home page. Click its name or hover over it and click edit to begin editing the page:
We are using the almost brand new WordPress block editor on this site. In the section on Adding Pages, we’ll walk through adding new blocks and give a better introduction to what ones are available. For now, we’re just going to worry about modifying the ones that are already on your existing pages.
At any point, if you want to view the page, click View Page up top. Now, you may want to do this in a new tab if you are in the middle of working on something, which you can do by either right clicking on it or holding ctrl or ⌘ when clicking it (Windows vs. Apple):
To preview your work in progress, click the preview link:
The very first item is not actually part of the page content – it’s the page title:
Hopefully you won’t need to edit this ever or at all, but if you do, be aware that it will change references to the title throughout the site, such as in the Menu or in your list of pages. It may even change the URL to the page, which could be a problem. So edit it when needed, but leave it intact when this can be avoided.
The first block creates a carousel using a third-party plugin. Here in the page editor, all you have to do is select which slider you want to show. But let’s take a quick look at how you could update this carousel if you wanted to. In the main admin menu, select Soliloquy:
From here, you would hover over the slider that appears at the top of your homepage – JAC profile pics – and click Edit. Once in here, you can drag and drop new photos you want to feature, select ones that have already been uploaded (“Select From Other Sources"), and/or remove photos that are already in use (click X on the photo in question).
The next section is just a styled paragraph:
Click anywhere inside and edit the text like you would in, e.g., Word or Google Docs. You have some styling options, such as bold and italic. Just select the text you want and click the appropriate icon.
There are additional, block-wide styling options along the righthand side of the screen (provided you are on a medium-to-large sized screen; on mobile, it would be different). Here you can set the text size (from presets or a custom size), and/or background and foreground colours (again, from presets or a custom colour):
A quick note, if that settings panel on the right hand side isn’t showing for you when you have a block selected, click its icon up top – the gear icon:
The next block is just a ‘Separator’ – a line that is useful in breaking up content and communicating to users where one section ends and another begins:
The separator has some modest settings you can try, though this site hasn’t made use of them at the time of this writing:
Deleting blocks
Let’s say you wanted to get rid of this (or any block, for that matter). Just click on it and hit delete. Made a mistake? Use your standard “Undo” shortcut (ctrl + z or ⌘ + z, Windows vs. Apple).
Moving blocks
Let’s say you just wanted to move it up or down. Just click those arrows on the lefthand side in the appropriate direction.
Other options (duplicating, e.g.)
There are a few more options on every block. Just click the menu option (three dots at righthand side) to access these:
Next is a columns block. These can be the trickiest to navigate, and I’ll explain why in a moment. Editing within a column is easy enough though. Here, let’s say you want to update the video being shown. Just click on the video and then click the pencil icon to edit the YouTube URL that the video ‘lives’ at:
Incidentally, there are empty columns on either side just to reduce the width of the video so that it doesn’t get too large – that’s why this section is the way it is.
The tricky part can be modifying the block. Not the column content itself, but the section that creates the columns. For example, you might want to delete the whole section or maybe change the number of columns – this is when you’d need to modify the block. Here’s what you would need to do.
First, let’s say you haven’t selected anything yet. You might see something like this:
When you hover over an element or a column, you should see an indication that an item is clickable, such as the line here:
Click on it and you should see something like this:
See that dotted line surrounding the whole section? Click that and you should now be able to modify the entire block. Now you can change its appearance, whether adjusting its width or the number of columns, or delete or move the whole thing thing:
The next sections are just more columns containing text (including headers, which let you pick what level heading) and a pullquote (which is editable in quite a similar way to the paragraph option above). You should be comfortable with these by now.
In between the following headers, we wanted a little empty space to spread things out for good flow. You can edit the size of this (or delete or so forth) if you want:
Next we have a block for the form from the WPForms plugin. Like the Soliloquy slider, this is a third-party plugin block, and if you want to edit the form you would select WPForms from the menu:
As of this writing, there is only the one form in use, the newsletter signup form. And, most likely, it’s not going to be modified often or perhaps even ever. But if you do want to edit it, here’s how: Once you've selected it, you will see a variety of field types along the side that you can add. You can drag and drop any of those into place on the form, and then click on it to set its specific options:
There are a few buttons near the bottom of the page. When you click on one, you’ll see you can edit the button text and the linked URL in the block itself, and set a number of options and styles in the panel along the side:
The last section on the home page is for custom HTML, to add a ‘code snippet’ provided by Twitter to embed a Twitter feed. You’ll rarely need a custom HTML block except for instances like this, where you are embedding a block of code provided by an external service provider. There’s no customization available for this block, since there‘s no reason to be. It just outputs the rendered version of whatever code you input:
