Visual Design Archives - Cosmic Whispers Design

Customize in WordPress

I recently had a really great question on an editor’s group I belong to. The questioner is managing her own WordPress site, which is great, and should be easier than it is, I think, but changes aren’t always visible to all users, I’ve noticed.

When Features Move . . .

The questioner just wanted to change the copyright year for the content on her site, that year or set of years that you often see at the bottom (the footer) of the site layout. Unfortunately for her, WordPress had made a change over the last year or so, I think it’s been, to move a lot of layout settings to a new feature called Customize.

Customize is nice because it shows all of the theme’s features and functions (menus, widgets, color options etc.) in one place, while also showing a mockup of what the site looks like (you can see what your page looks like with the new settings before making those changes visible to the public—but you can’t change the content of pages or posts in this space). This is a feature that gets closer to what a page builder or visual composer tool can do, where you can edit all of a page’s content while looking at it as if you were a visitor rather than using a behind-the-scenes editor screen.

If you’re a WordPress user who set up a static CV-type site and then didn’t make changes for some time, you can end up missing out on any announcements telling you that customizations would be going to a new “system.” In the case of our questioner, I just gave her the path on the WordPress dashboard to get to Customize (Appearance/Customize), and she figured out the rest by going through the options on the left panel. Problem solved!

The Challenges of Evolution

As WordPress has evolved in the past several years, I have noticed it building up individual features (widgets come to mind) and then finding them a bit clunky for non-geeks to work with. I see them slowly working their system closer to some of the drag-and-drop page builder content management systems like SquareSpace or Wix. My guess is that the downside may be a loss of flexibility for theme designers and users looking to make specific customizations that might not be accommodated by a system that “assumes” too much to start with.

I still like the overall balance of ease-of-customization and customization possibilities with WordPress, but I am also curious about what we might lose in their evolution toward what looks to be a full visual composer format. I like to learn new systems, though. 🙂

We shall see!

Squarespace vs. WordPress

Visual Design

I’ve been working with the WordPress.org content management system to design websites since at least 2012. I began with my own and my husband’s jewelry site. I’ve been happy with the ability to control some of the tech aspects without having to learn PHP code to design from scratch. After I discovered Studiopress premium themes, I had plenty of clean, well-designed sites to choose from (the quality of free themes varies too much). I also found that I had more choices and control by using the .org version of WordPress and setting up my web hosting and domain registration at other locations.

I stayed away from WordPress.com because a) “free” came with ads I had no control over, and b) fewer themes and plugins to work with. The business premium version (commerce-equipped) is rather pricey for what you get in my opinion, because you still have to have a certain amount of geek to you to use the back end features to create page layouts and edit content. You are better off comparing prices for different web hosts, picking one, and then using the WordPress.org software as your basic website management system. Most web hosts make it easy to install WordPress.org for your website.

Page Builders

But WordPress is not the only content management system on the planet. There are simpler ones called “page builders” that make it a bit easier to make changes to the site without all that extra “backend” stuff. You just have to pick a plan that has some of the features you need (security enhancements, search engine analytics, ecommerce/shop features, photo galleries, etc.).

Some page builders are better than others, though (have more features, easier to use). Weebly and Wix are common page builders. I haven’t been that impressed with the options available or the quality of the layouts for either one of these, but some folks swear by them and some web hosts use Weebly in particular as a basic website builder for their customers. You’ll just see very simple layouts and not as many choices for colors or site feature layouts.

Separate page builder systems are also available to work on top of WordPress to make it easier to edit pages while you can see the final layout at the same time (a “visual composer” view of things). Sometimes these products are plugins, and sometimes they are theme framework systems.

And speaking of page builder-style systems, WordPress is moving swiftly in that direction themselves with their new block editor, which came out a year or so ago, I think. The “blocks” of various sizes and types and can be nested inside of each other to make groups of elements, very much like traditional page builder systems. But you still have to play with these features in a separate editing screen, except for a few things on the home page.

I have been finding that some of my site design clients get overwhelmed with WordPress, though. The new block editor adds even more pressure to figure out block layouts for text and images or product descriptions and testimonials. WordPress has plugins now that offer “readymade” layouts (Atomic Blocks is one), but users can still find the system a bit much to keep track of.

Squarespace

Since I find other page builders too restrictive and lacking in aesthetic design, I thought I’d look at one that has an excellent reputation among artists—Squarespace. I’ve always been impressed with the beauty of the layouts when I see that someone has used Squarespace, but I wondered what restrictions there might be to this system.

Squarespace is like WordPress.com in that it is both a content management system and a web host at the same time. You can’t go over to GoDaddy or Hostgator and get a Squarespace website (but you can get a WordPress.org one, though). Squarespace is a one-stop shop (except for website name registration). This is simpler, of course, but not necessarily cheaper. WordPress.com offers some more features for a $25/month ecommerce business plan than Squarespace does for the same level ($26/month).

Editing text is easy to do right on the displayed page

The main advantages of Squarespace seem to be the beauty of their theme layouts and the ease of customizing right on the page as your customer would see it. Insert new images, add or edit text blocks without going to a separate screen. You still don’t have as many theme or plugin feature options as the whole WordPress.org world, but it’s a lot less complicated to work with. I can see that my tutorials with Squarespace will be shorter and simpler for clients. Also, updates to the system are invisible; you don’t need to make a point to manually update separate themes or plugins, for example, because Squarespace owns all the parts.

So, WordPress.org for some cost saving options and lots of control over all aspects of your site; Squarespace for a one-stop site design space with automatic updates and an easier editing interface.

I won’t be abandoning my WordPress.org home since I want the flexibility that the system provides. In a budget pinch, one can also use something like GoDaddy’s basic page builder with a short tutorial. I can see using Squarespace as a more aesthetically pleasing option for clients who want an easier way to take care of their own sites.

Let me know what your favorite website building tools are. I’d love to know!

Atomic Block Layouts

Visual Design

I know some folks are still yearning for the simplicity of the classic WordPress editor and maybe even the use of widgets to create containers to put bits of content in (I always found widgets a bit awkward and restrictive depending on the theme).

With the new “Gutenberg” block editor, I’m slowly discovering a new kind of simplicity that restricts the number of external plugins I have to use to create different content layouts. I can use special layouts to put structures like testimonials, team members, media and text combinations or product/service descriptions directly onto a page. Granted there are plugins with fancier features and premium goodies, but I’m liking the simplicity of these layout alternatives, which can be simply added to the page or post itself.

Atomic Blocks

In order to take advantage of the new WordPress block editor functionality and extend it beyond the very basics, we do still need one plugin. It’s called Atomic Blocks, and it manifests in a couple of areas in the editor interface. After you install and activate Atomic Blocks, a whole new collection of blocks appears in the basic block library.

In the Block Library

The basic block library is what you access whenever you hit the plus button. WordPress has some basic blocks in this library, and other plugins have added their own block functionality. Just hit the encircled + in the top left of the WordPress editor for a page or post, or where they appear at the top or bottom of another block when you move your cursor around.

The preset blocks are organized into categories (not always that intuitive, by the way, so look around), and the ones you used recently get into the “Most used” section automatically. When WordPress first introduced the block editor, there weren’t many of these, but plugin developers have created their own to make it easier to insert functions (like Ninja Forms, for example). By the way, I created the above side-by-side screenshot display using a block called . . . “Columns”! I’ve been struggling to build tables (there’s a block for a traditional table with a header row, also) for several years with the classic WordPress editor (even the plugins weren’t that great). It’s so nice to have a basic functionality like this more easily and freely available, and also able to adjust to different screen sizes.

Atomic Blocks in the Library

Here you can see the AB Layouts function button (which is also at the top of the editor screen—more on that in a minute), along with a number of individual functional blocks. Note that each of these is focused on an individual structure or function; for example, the AB Testimonial just gives you an individual block to put one testimonial in—it doesn’t structure multiple testimonials into a group display or slide show.

This set of block functions allows you to build truly customized layouts, starting with the AB Container and then adding other blocks inside it. So you can build your own testimonial layout if you want to explore AB Blocks’ nesting capabilities. I also like being able to make buttons automatically. I used to have to do my own HTML to create button shapes and sizes.

AB Layouts Selector

Layouts allow you to let the AB people build some common nested groups of blocks into preset layouts (they keep adding more when they update the plugin, I’ve noticed). Just choose either the Layouts button on the top bar of the WordPress editor screen, or hit the plus symbol and choose AB Layouts from the Atomic Blocks section. The Layout Selector has three tabs: Sections, Layouts, and Favorites. Favorites is empty until you click on the heart at the bottom level of a layout, when that layout will be added. Below is a three-image overview of the Sections tab first, then more specialized layouts in the Layouts tab.

Each of these layouts has settings that show up in the right panel of the WordPress editor to help you customize the functions available (like colors, column sizes, etc.). I like this system because it helps me learn how to make my own custom layouts and provides some more common possibilities without having to re-invent the wheel.

I have noticed that one can get a bit lost in the “nest” of blocks-within-blocks where clicking in just the right spot to get the controls of a block becomes difficult. Keep in mind that you can always go to a specific level in a nested group of blocks by clicking on that level in the breadcrumb trail at the bottom of the WordPress editor.

Note the series of terms separated by arrows: click on one to see the top left controls for different block levels.

In the image, I selected an individual image block in the Columns block. By clicking on Column or Columns, I could move out to see the top left controls and right pane controls for each level.

What About Page Builder Themes?

Page builder themes are cool. They’ve been around as an alternative for the original very basic WordPress editor for a number of years. They give you a set of elements (like the blocks here) that are already set to look like the way the WordPress post or page will look when you view it. More intuitive, yes, but often with more restrictions (only certain sizes and shapes to fit into a group of predetermined layouts). The better ones are also not free of charge.

I don’t use free themes or page builders in any case because I like the clean code and layouts of premium theme creators. I use Studiopress themes. They have made a commitment to work with the basic WordPress interface without creating a true page builder environment. Again, I like the simplicity of their approach.

But you may not, and there are many other site designers who want something with its own page builder interface. I’ve heard lots of good things about Elegant Themes, and especially their Divi theme, which a lot of professional WordPress site designers use. Pricing is similar to what I invested in Studiopress themes (over $200US). Great if you are designing as a business and have lots of sites to create.

If you only have one site of your own to take care of, though, that kind of investment may not be practical. So if you just want to play with all the possibilities in the WordPress block editor, then AB Blocks and Layouts are an extremely cost-effective way to access block functionality. I hope my little intro has allowed you to get started if you lean in the site DIY direction.

Of course if you’d like to invest in an individual tutorial with me or want me to build your site, I’d be happy to oblige. Just let me know!

Making Content Changes to Your Site

Visual Design

This is a WordPress-versus-your-static-custom-coded-site comparison. I just finished tweaking a client’s site because the web host made a change that caused it to not display at all. Between her web host and me, we got her original site back up, and I made a small update to the content on one of the pages. All great and everything, but having to go into the client’s previous designer’s old HTML code took longer than if she’d had a WordPress site, which she could have updated herself without paying me to do that part. 🙂

Your Old HTML Site

I still remember back in the day as a freelance book indexer having a great professional build me a nicely designed website to make me visible to potential clients. It was a review of my services and a resume of my experience. Worked fine. But that was 1997. A lot of freelancers who aren’t into all the blogging stuff think that their static CV-type website will work just fine in 2019. It’s the same information, it’s still visible, or so it seems. Why not just have a designer come in and tweak it or update content once in a while?

Unfortunately, no. A lot has changed since 1997, and especially since the early 2000s. And it’s not about fancy site designs with big images and weekly blog articles. What’s happened is that most of the old sites from the 1999 to 2010 period in particular have become invisible to search engines, partly because search looks for actively changing sites with lots of visitors, and partly because Google likes sites that look good on mobile devices.

But, maybe you have a thriving freelance business based on reputation and referral and don’t feel a need to modernize your website. It’s just not that critical to your business. Fair. But with a more modern site based on a content management system like WordPress or Squarespace, or even Wix or Weebly, you could actually make content updates yourself. Save time, save money in the long run. And also make yourself more visible.

Your WordPress Website

I’m going to use WordPress as a content management system example, because I prefer its wealth of capabilities, but you can also make simple sites with other systems like Squarespace, Wix, Weebly, or even the very basic systems that most web hosts have as standard features.

Your upfront costs for a WordPress site will be the time and money for help in getting the site set up and your content moved. If you want to maintain everything yourself, one or more tutorials might be a good idea, and then you’ll be able to add new projects to your portfolio or update resource documents for your colleagues, or even write articles for your profession if you are so inclined.

Keeping everything up to date is as easy as checking into your site once a month and clicking on the updates function. Maybe once every five years you can look at a redesign, but if you are not looking to expand your client base by a whole lot or become a blogging influencer in your field, you’ll be fine for that long with just updating content (you don’t have to have a blog), and maybe asking for a brief tweak or troubleshoot a small issue with a professional designer.

Meanwhile, your site will look cool, stay technically updated so you don’t have display problems with your web host changes something, and updating will be easy and much more efficient. Three wins!

As you can guess, I’d love to help you update your site from 2000 or so and empower you to maintain it if you so choose. I can also check in on your site regularly if you like. Let’s set up a conversation!

Buttons, Buttons, Set Up My Buttons

Plugins, Tutorials, Visual Design

Used to be in WordPress that creating your own clickable button meant fiddling with the theme’s style sheet tags and coding. Or you might be using an outside scheduling system that has button code for you to copy and paste, but it’s the wrong color or font style or button size.

What to do? You now have a couple of options in the new block editor for WordPress.

Basic Button Block in the New Editor

The Gutenberg editor in WordPress already has a button block to use. When you are writing or editing a post or page, just

click at the end of a block/paragraph before the one where you want to add something, and choose the + from the top left corner of your edit screen, or
click on the + at the top or bottom of the block/paragraph you are in

You will see a series of block names with dropdown arrows to see more. In the Layout section, you will find the button block. Click on that and a button block will appear. You can add text for your button (like “Submit” or “Count me in!” or “Register”) and create a link underneath to one of your other pages or to another website. Most of the time, you will be sending people to a contact page or to your shop page.

NOTE: If you are trying to make your scheduling system’s button look more like the rest of the ones on your site, then choose a simple link option to the calendar rather than trying to embed a scheduling button on your site. Then you can use the link on your own button.

Alignment

When you hover in your block, or if you choose the little dotted area on the left of your block between the arrows, you’ll see options pop up to change the format of your block, including alignment (see below). With this basic block, you have left, center, and right align options. Keep in mind that, like other blocks in WordPress, if you choose left or right alignment, text from the paragraph below will move to flow alongside the button.

Button Settings

With that button block selected, look at the settings area to the right of your post or page text (see above). If you don’t see any settings there, click on the gear icon at the top right of your edit screen, and it will appear. The “Block” tab will be active if you’ve clicked on a specific block. Settings for your button block include Styles, which shows you options for shapes for your block, and Colors for background and text of your button.

Button Styles

Styles available will depend your theme, but will always include one with rounded corners, one with squared corners, and one where the button is an outline and the inside is white or the color of your page background.

Button Colors

Color settings start with some basic colors, which may or may not match the ones you are using in your theme. If they don’t, you can change them by choosing Custom Color. You will need to know the hexidecimal (six-digit) letter/number combo for your theme color (e.g., #cc0000). It might already be set in the Customize/Color settings in your theme, but if a designer put your colors in for you, ask them for a short list of color codes they used for your site. Then you can have the numbers available to paste into elements like your button.

After you set custom colors here for one block, they will automatically become the defaults for any new blocks you create for your site.

Now, publish or update your page or post and your button should be both beautiful and functional!

Introducing Atomic Blocks

Atomic Blocks is a new plugin made for the WordPress Gutenberg editor. It works similarly to the default Button block but has some extras.

Just use the + option in a block or at the top left of the screen and scroll through to the Atomic Blocks section. Choose the AB Button.

Alignment

The AB Button’s alignment options (located in the same place at the top left of the block itself) do work a little differently from the default block feature: the text does not wrap around it if it’s left or right aligned. I like this layout better for a button. This way I can have my button on the left, for example, and it will stand alone in the paragraph without the text coming around to hug it.

Button Settings

The AB Button has style and color settings like the default WordPress Button block (see above). The color settings work the same way, but this block has some extras for you to consider.

First, it allows you to make the link from the button open a new window or tab on the user’s browser. That’s convenient for buttons that go to other sites, for example. The tab for your site will remain easy to get back to without using the back arrow on the browser.

Button Styles

In the Styles area, the AB Button has more shape options and also allows you to change the size of the button, which the default WordPress button doesn’t do.

Depending on how much customizing you want to have, either the WordPress button block or the AB button block will make creating buttons much easier for website owners.

You can download a free PDF of this tutorial here.

Button blocks make me very happy as a site designer. 🙂 And if making your own buttons is something you’d like to delegate, just contact me and I’ll make them for you!

Theme Updates: Lessons Learned

Visual Design

Two things today, based on my two latest WordPress website update projects:

Theme misfit
Reverse engineering the theme demo

Potomac Indexing Theme Change

Sometimes, you have to cut your losses and let go. Such was the case here. I began with PI in Author Pro theme from Studiopress, which is getting a bit old at two years. I wanted to update to take advantage of the new blocks available with the Gutenberg editor and freshen up the site.

I went over to my Studiopress themes (lots to choose from) and picked Corporate Pro. Seemed like a good choice because PI is a small LLC with four partners. It’s not about one person’s creative efforts, so “corporate” seemed like a good choice.

After I installed and activated the Corporate theme, though, it didn’t want to cooperate with my ideas for laying out content on the front page or for the usual color changes to borders and such that I do in my extra CSS (Cascading Style Sheet).

Studiopress has two types of themes in their portfolio: created by Studiopress developers directly, and created by third-party developers. Third-party (“community”) developers (like the one for the Corporate Pro theme) don’t always follow the clean organization of the homegrown StudioPress style sheets. I tried valiantly to find things like where the color for the border below the header was controlled. The style code that took care of that was buried somewhere, maybe in two different areas. It could have been in the introductory “baseline normalize” section of the style sheet, which I like to leave alone since it affects multiple parts of the site at once. I would have preferred that style to be more accessible, but it’s just the way the developer chose to build his/her theme.

Breakthrough Pro (click here to go there)

In the end, after spending a bit too much time on Corporate Pro tweaking, I looked for a true Studiopress theme and found Breakthrough Pro. Very nicely organized style sheet (they have tables of contents!) that I was able to tweak more easily.

Cosmic Whispers Theme Update

I always get excited when Studiopress updates a child theme! The update for Authority Pro included a big shift in how objects are displayed on the front page. Studiopress decided to reduce the number of widget areas (to almost none) and favor Atomic Blocks (a plugin). Atomic Blocks are layout functions to create full-width containers, customizable multi-column sections, and more customizable on-the-spot configurations of images and text. WordPress started the blocks thing when they created the new editor (Gutenberg, they call it), and Atomic Blocks is a powerful extension of that idea.

Even though this was an upgrade of a theme I was already using, the functional change from widget areas to blocks was a bit of a challenge. At first, I installed and activated the theme the way I usually do, without importing any of the demonstration content. Bad idea in this case. I now lost the widget areas I’d been used to displaying things in, and without the demo content, I couldn’t see how they were using the new blocks to create the look. After fiddling around for a bit with the skeleton of the theme I got smart.

I re-installed the theme and imported the demo content. Now I had pages with content laid out using the new blocks. The code view in the WordPress editor showed me what was going on “behind the scenes.” Reverse engineering time! I learned to use container blocks of different widths (because I could see the options right away on the page as I edited) and easy-to-add button blocks to create a consistent look for each panel on the front page. My own images and button colors replaced the demo and I was ready to go.

Authority Pro (new) (click here to go to the site)

In the end . . .

I know my theme replacement/upgrade process is going to be lots more efficient now that I’ve learned these two lessons. And I’m liking the blocks idea now that I’ve become more familiar with its potential.

Let me know how you are getting along with WordPress’s editor, and if you need help tweaking something, I’ll be here!