WordPress Full Site Editing Tutorials & Resources - Speckyboy https://speckyboy.com/topic/full-site-editing/ Resources & Inspiration for Creatives Tue, 18 Feb 2025 16:10:29 +0000 en-US hourly 1 https://speckyboy.com/wp-content/uploads/2024/03/cropped-sdm-favicon-32x32.png WordPress Full Site Editing Tutorials & Resources - Speckyboy https://speckyboy.com/topic/full-site-editing/ 32 32 10 Free WordPress Block Themes That Utilize Full Site Editing https://speckyboy.com/free-wordpress-block-themes-full-site-editing/ https://speckyboy.com/free-wordpress-block-themes-full-site-editing/#respond Mon, 02 Dec 2024 07:49:54 +0000 https://speckyboy.com/?p=137439 A collection of free WordPress block themes that utilize full site editing (FSE). All themes are easy to customize and offer a lot of flexibility.

The post 10 Free WordPress Block Themes That Utilize Full Site Editing appeared first on Speckyboy Design Magazine.

]]>
Block themes have ushered in a new era for WordPress. Through the use of full site editing (FSE), they put every facet of a website’s design within reach. There’s no need to open up your code editor, as you can point-and-click your way to a fully custom design.

But before we get too far into the weeds, it’s worth noting that block themes are fundamentally different than the classic WordPress themes you’re used to. They’re specifically built to work with FSE and the Gutenberg block editor. Think of them as an entirely separate category of theme.

Now that we have those details out of the way, it’s time to start looking at themes! Block themes are a growing segment, and therefore, it will take time for their numbers to approach the massive quantity of classic themes on the market.

Still, there are plenty of compelling options. And the fact that these themes are fairly simple to customize means that you have a lot of flexibility. If a particular design element doesn’t fit your needs, you can always start from scratch.

To help get you started on your journey, here are ten free WordPress block themes that are worthy of your consideration.

Tove Multi-Purpose Block Theme

Free to Download | Demo | WordPress Hosting

Among the earliest block themes on the market, Tove provides plenty of design possibilities. Take advantage of multiple header and footer layouts, or create your own. 40+ block patterns cater to restaurants and cafés but can be repurposed for other business types. Built for speed, the theme weighs in at just a shade over 200 KB in size.

Tove WordPress Theme Preview

Skatepark Modern Event Theme

Free to Download | Demo | WordPress Hosting

If bright colors are your thing, Skatepark could be the right block theme for you. The theme sports minimal aesthetic, bold fonts, and utilizes the duotone image effects found in the block editor. It’s a good fit for small brochure-style sites or one-page virtual event flyers.

Skatepark WordPress Theme Preview

Stewart Minimal Blogging Theme

Free to Download | Demo | WordPress Hosting

Stewart will help to bring your blog into the FSE era. It shifts the focus towards content, with the site’s navigation stored within a left sidebar. Photography has room to shine with this no-frills layout.

Stewart WordPress Theme Preview

Twenty Twenty-Two

Free to Download | Demo | WordPress Hosting

If you’re looking to experiment with a block theme, Twenty Twenty-Two offers a great starting point. The 2022 default theme was released alongside WordPress 5.9 and takes full advantage of FSE. It also includes dozens of unique block patterns to make quick work of custom layouts.

Twenty Twenty-Two WordPress Theme Preview

Frost Minimal Multi-Purpose Theme

Free to Download | Demo | WordPress Hosting

Frost has quickly become one of the more complete block theme packages available. With dozens of included block patterns, it can power virtually any type of website. Simple and clean, the theme is practically begging for your personal touch.

Frost WordPress Theme Preview

X3P0 – Reflections Theme

Free to Download | Demo | WordPress Hosting

Not every website needs to be complicated. When all you’re looking for is a one-page profile, X3P0 – Reflections makes it a breeze. Enter your information, customize the look, and be on your way. Sometimes simple is better!

X3P0 – Reflections WordPress Theme Preview

Bricksy Modern Block-Based Theme

Free to Download | Demo | WordPress Hosting

Want to build a highly-detailed visual experience? Bricksy includes those little touches that can make all the difference in your designs. WooCommerce support means that you can add some elegance to your shop as well.

Bricksy WordPress Theme Preview

Blockbase Simple Block Theme

Free to Download | Demo | WordPress Hosting

Automattic’s Blockbase is a universal theme, which means it can work with both FSE and the legacy Customizer. Either way, it’s an intentionally barebones entry. The theme provides the basic foundation for your site without any opinionated design. This allows for a smoother customization experience.

Blockbase WordPress Theme Preview

Alara Vintage Block Theme

Free to Download | Demo | WordPress Hosting

Alara utilizes strong typography and a vintage color scheme. You’ll also find a wide variety of block patterns, including headers, calls to action, cover images, and even full-page layouts. What’s more, several free child themes are available in the WordPress theme directory.

Alara WordPress Theme Preview

Elyn Clean & Modern Block Theme

Free to Download | Demo | WordPress Hosting

Get your project off to a clean start with Elyn. This free WordPress block theme makes great use of photography, along with big, beautiful type. There’s overall professionalism here that could serve a variety of small-to-medium sized organizations on a budget quite well.

Elyn WordPress Theme Preview

A New Way to Build Custom WordPress Websites

Customizing a WordPress theme has traditionally been a mixed bag. Themes could be tweaked via code, a bespoke settings panel, or the official Customizer. Because of the multitude of options, it was hard to know how to access various elements. It tended to change from theme to theme.

Love it or not, block themes and Full Site Editing bring a universal interface to the process. In theory, this should make customizing your site’s colors, header, or blog post layout a more straightforward experience. The result is that themes have a better shot at reaching their potential as multipurpose tools.

The examples above offer a promising start. Whether you’re looking to build from the ground up or improve an established look, there is a block theme to match.

WordPress Block Theme FAQs

  • What Are WordPress Block Themes?
    WordPress Block Themes are themes built specifically for the WordPress Block Editor (Gutenberg). They allow for more flexible and intuitive design customization using blocks.
  • Who Should Use WordPress Block Themes?
    Anyone building a website with WordPress, especially those who enjoy the versatility and ease of the Block Editor, will find block themes highly beneficial. They’re great for bloggers, businesses, and developers.
  • Why Choose a Block Theme for Your WordPress Site?
    Block themes offer a more integrated and seamless design experience with the Block Editor, making it easier to customize layouts and add content with a drag-and-drop interface.
  • How Do Block Themes Improve Website Building in WordPress?
    They provide a unified, block-based approach to site building, allowing you to visually construct pages and posts with varied layouts and functionalities.
  • Can Block Themes Be Easily Customized Without Coding Skills?
    Yes, the main advantage of block themes is their ease of customization without needing to write code. You can adjust layouts, add various content elements, and change styles using blocks.
  • Do Block Themes Work With All WordPress Plugins?
    While block themes are compatible with many plugins, it’s important to check compatibility with specific plugins, especially those that significantly alter editing or display functions.

The post 10 Free WordPress Block Themes That Utilize Full Site Editing appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-wordpress-block-themes-full-site-editing/feed/ 0
Understanding Essential WordPress Terms & Concepts https://speckyboy.com/word-wordpress-terminology-crossroads/ https://speckyboy.com/word-wordpress-terminology-crossroads/#respond Tue, 12 Nov 2024 11:59:26 +0000 https://speckyboy.com/?p=154159 WordPress tends to struggle with messaging. Could it harm its long-term future? What could be done to create a more user-friendly vocabulary?

The post Understanding Essential WordPress Terms & Concepts appeared first on Speckyboy Design Magazine.

]]>
WordPress isn’t like other content management systems (CMS) on the market. Sure, there are other free and open-source options. But they don’t have nearly as big of a market share.

That leaves WordPress to compete with commercial offerings. Platforms such as Shopify and Wix come to mind.

Again, these systems can’t match WordPress’ market share. But they do have an advantage in marketing muscle. They have the resources to create a seamless campaign. They can speak to their targeted audience with clarity.

WordPress tends to struggle with messaging. You can see it at both the macro and micro levels. It covers big things like defining what the platform does and who it’s for. And it also happens with individual features.

The result is confusion – even among seasoned users. It also makes things harder for those who teach others. There’s a lack of consistency. Not to mention frequent changes to the terminology we use.

How much does this impact WordPress? Could it harm the software’s long-term future? And what can be done to create a more user-friendly vocabulary? Let’s take a deeper look at the words that define WordPress.

Who Are We Speaking To?

WordPress is an incredibly flexible platform. We can use it in a variety of ways. Thus, it appeals to both technical and non-technical users.

This appeal is both a blessing and a curse. On the bright side, WordPress continues to thrive in part because it offers so many possibilities.

But the words we use to describe WordPress don’t apply universally. A conversation among developers is bound to be more technical. Some terms are likely to confuse everyday users.

Yet it seems like developer speak is the dominant language in WordPress. We use exclusionary terms that are difficult for others to understand. You see it in the core software and third-party themes and plugins.

Perhaps this stems from where WordPress and its ecosystem come from. Many developers are responsible for both building and promoting products. Most aren’t marketers by trade.

Product descriptions and documentation tend to be written by developers. As such, developer speak is likely to be used. The content isn’t as user-friendly as it could be.

It's important to avoid technical jargon when describing WordPress features.

An Ever-Changing WordPress Core

The past decade has brought significant change to WordPress. The advent of the Block and Site editors has impacted content creation and website design.

Each of these items has undergone a descriptive overhaul. The Block Editor was initially referred to as “Gutenberg,” for example. The name was derived from the Gutenberg project, which oversees this and other features.

As for the Site Editor, it’s also a part of the Gutenberg project. But the feature was initially called “Full Site Editing.”

The names were eventually changed. They now more accurately reflect what each feature does. These are positive and well-intentioned moves. But the cat was already out of the bag, so to speak.

We now see these terms used interchangeably. This may not impact veteran WordPress developers very much. But what about new users? Do they understand that the Site Editor is the same as Full Site Editing? And what to make of the differences between block themes and classic themes?

We’ve created an unnecessarily confusing situation. And there is plenty of blame to go around. For instance, writers like myself have added fuel to the fire.

The terminology surrounding the Block and Site Editors can be confusing.

How Do We Fix the WordPress Word Scramble?

Here comes the difficult part. How do we use terminology that everyone can understand?

I think it starts with the WordPress project. Feature names should be reflective of what they do. But they should be named and described in the simplest of terms.

Perhaps this sounds like no big deal. But WordPress contributors have a lot on their plates. There’s only so much time to argue about names.

We did see a lot of thought put into this recently, however. The Command Pallete feature that shipped with WordPress 6.3 underwent a name change. Project contributors debated the merits of the original name (Command Center). They realized that it might be taken out of context and addressed the issue.

The creation of user-friendly terms will trickle down to the community. Writers will use it in their tutorials. And product makers will use it in their marketing efforts.

The community also has a responsibility. We must speak to WordPress users in plain language. We must limit the use of developer terms.

A little guidance would also help. WordPress has a developer-focused glossary of terms and a user-focused Semantics page. We should study them.

But perhaps we can educate product makers on methods for creating user-friendly marketing and documentation materials. That’s not necessarily a responsibility of the WordPress project.

Still, it could help to make the platform easier to understand. And it’s a part of keeping WordPress on top for the long term.

Simplfying WordPress terminology starts with its open source project.

A User-Friendly Experience Starts with Words

The words we use matter. They can be the difference between friendly advice and an insult. People use them to form opinions.

What people read about WordPress will impact their decision to use it. If the software sounds confusing, they may head elsewhere. They may never fire up a demo to see for themselves.

It behooves all of us to think about how we talk about WordPress. Are we keeping new users in mind? Or are we losing them with technical jargon?

The impact may not be immediate. But by simplifying our language, we can attract more users than we lose. That’s highly important for the future of the project and its ecosystem.

The post Understanding Essential WordPress Terms & Concepts appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/word-wordpress-terminology-crossroads/feed/ 0
When Website Builder Tools Get in the Way of Best Practices https://speckyboy.com/website-builder-get-in-the-way/ Wed, 06 Nov 2024 17:57:59 +0000 https://speckyboy.com/?p=170780 Website builders aim to simplify the design and build processes. But they take control of the output, and there's no guarantee they'll employ best practices.

The post When Website Builder Tools Get in the Way of Best Practices appeared first on Speckyboy Design Magazine.

]]>
We talk a lot about web design best practices. The tenets of accessibility, performance, resiliency, and security should be part of every project. They’re essential to a successful outcome.

It doesn’t always work that way out of the box, though. We are becoming more dependent on site-building tools. As such, we rely on them to do things the right way.

These tools aim to simplify the design and build processes. Some do it very well. But there’s a side effect: They take control of the output. And there’s no guarantee that they’ll employ best practices.

It’s an issue as old as the WYSIWYG editor. The difference is that it’s harder to override any problematic code.

There are some less-than-great tools on the market. Site builders that are outdated or deeply flawed. But even a great tool can get in the way. None of them are perfect.

Let’s look at a few scenarios when a tool hinders your ability to follow best practices. In addition, we’ll show you some ways to get around these issues.

How Site Builder Tools Can Impact Accessibility

It’s never a good idea to assume your website is accessible. Doing so is a risk. You might have created a poor user experience. At worst, the site may not be compliant with the law.

Site builder tools can make accessibility issues less obvious. For example, they may not warn you if you choose an inaccessible color scheme. Subtle color differences could make a big difference.

They might also produce code that isn’t semantic. That makes it harder for screen readers to interpret your content.

There’s also the implementation of special effects. You might add intense animations that are harmful to some users. The tool won’t always tell you the potential consequences. Thus, it’s up to you to use it responsibly.

Accessibility testing is the only way to know – regardless of how you built the site.

 Site builders don't always comply with accessibility best practices.

Included Features Aren’t Always the Best Option

Site builders often include advanced features. Elements like sliders, modal windows, and media players come to mind. These items are essential for some projects.

Their inclusion doesn’t speak to quality, though. The tool may produce inefficient or buggy code. The result is poor performance.

There’s also a chance of a conflict with other software like themes or plugins. And there’s no guarantee of browser compatibility.

There’s a high level of convenience with these features. You don’t have to search for a plugin that does x, y, and z – it’s already there. However, they’re not always the best fit for the job.

WordPress page builder plugins are an example. The one you use may come with a forms module. Awesome! But does it do everything you need? Are the forms accessible?

It’s worth doing an honest assessment of these items. Look at what they do. Run performance benchmarks. Monitor your browser console for errors. That will help you determine if it’s worth using.

If not, there are plenty of other options. You don’t always have to settle. And moving to a different solution could offer better results.

You may need to find better alternatives to some built-in features.

The Potential for Becoming Locked In

Sure, a site builder may claim to offer everything under the sun. But will it grow along with your needs? How portable is your site’s content?

You’ll want to know the answers sooner rather than later. Otherwise, you might be stuck with a tool that can’t keep up with you. And moving on can be a tedious process.

That happens with WordPress. A page builder plugin may no longer meet your needs. Or you might want to switch to the native Block Editor.

Making a change is possible. But it’s not always easy. Page builders often have different ways of outputting code. Thus, you might be left to reformat content piece by piece. The WordPress Data Liberation project aims to help with this.

The challenge is a bit different with proprietary systems. Not all of them offer third-party plugins. And some make it hard to move your site to a new provider.

Either way, it isn’t easy to rid yourself of monolithic tools. A modular approach is more efficient. It’s easier to swap elements or add new ones.

Site Builders Are Great – Just Be Realistic

There’s so much to consider when building a website. That’s why site builders are popular. They aim to provide an all-in-one experience. And there’s a lot to like about them.

But there are also some drawbacks. It doesn’t mean you should avoid them altogether, though. Consider the pros and cons before committing.

Look for reputable tools that have a history of stability. Review their features and determine how they fit into your project. Ideally, you’ll find one that will serve you well into the future.

It’s also a good idea to set realistic expectations. A site builder can’t possibly cover every use case. There are times when you’ll need to go outside the box.

With WordPress, that means finding a separate plugin to perform the function you want. On other systems, you may need to write custom code.

The goal should be a website that looks and functions how you want. It should also be flexible enough to accommodate growth. Tools play a significant role.

Keep that in mind throughout the process. It may save you a headache or two along the way.

The post When Website Builder Tools Get in the Way of Best Practices appeared first on Speckyboy Design Magazine.

]]>
When to Choose WordPress Full Site Editing for Your Website https://speckyboy.com/when-should-you-use-wordpress-full-site-editing/ https://speckyboy.com/when-should-you-use-wordpress-full-site-editing/#respond Tue, 29 Oct 2024 08:47:26 +0000 https://speckyboy.com/?p=141311 Full Site Editing in WordPress is not a perfect fit for every situation. So, when does it make sense to use it?

The post When to Choose WordPress Full Site Editing for Your Website appeared first on Speckyboy Design Magazine.

]]>
It’s safe to say that Full Site Editing (FSE) is one of the most important features to come to WordPress in some time. You may even compare it to the advent of themes themselves, which were added back in version 1.5 of the content management system.

The premise of FSE is that it allows anyone to design and edit a compatible theme fully within the block editor. No need to mess around with PHP or even CSS – just point-and-click your way to a custom website.

There are a couple of common reactions to the inclusion of FSE. The first is the excitement that comes along with lowering the bar to theme customization. Beyond that is a group of designers wondering if the feature applies to them at all.

Interesting as this functionality may be, it’s not a perfect fit for every situation. So, when does it make sense to use Full Site Editing? The following are a few potential scenarios that are worth considering.

Design Flexibility Is a Necessity

The flexibility of a WordPress theme can vary greatly. Some “classic” themes offer a plethora of options through a settings screen or the Customizer. Still, others require you to make design changes through code.

Either way, the ability to tweak the look and layout tends to be cumbersome. That makes it more difficult for sites that need to make frequent changes to headers, footers, or other theme templates.

For efficiency’s sake, FSE makes perfect sense. Quick customizations can be made and previewed in real-time. And the use of the block editor means that dropping in new functionality (a search bar, for example) can be accomplished without a lot of fuss.

This type of setup also lends itself well to multisite networks. Each site within the network may have its own specific design needs, and FSE makes this easier to facilitate.

Not that you’d want to do all of this in a production environment, of course. Just like any mission-critical website, making changes on a staging site first is still highly recommended. But FSE does shorten the process from concept to launch.

Editing a theme's header in the Full Site Editor.

The Website Will Be Fully Maintained by Your Client

There may be instances where you build a website and simply hand it over to your client. From that point on, it’s their job to handle all maintenance responsibilities.

However, it’s often tough to maintain a website built by somebody else. This is especially relevant when it comes to making changes to the theme. Even if you provide training and documentation, there can be a significant learning curve for clients.

FSE offers a solid solution. Your client won’t have to dig through code to figure out how you implemented a specific feature. Rather, it’s all there in the dashboard.

If they need to change the number of blog posts displayed on the home page, it could come down to adjusting a setting within a block. That’s a whole lot easier than searching through a hard-coded template.

In all, things are less likely to be lost in translation when using a visual editor. This may even cut down on the number of support requests down the road.

Adding a featured image to a post archive template.

You’re Looking for Simplicity

In the right hands, WordPress can be the engine behind some very complex websites. Think membership sites, online education, and eCommerce.

But not every project will need that level of complexity. Indeed, portfolios and blogs generally benefit from a simpler approach. The bloat that comes with more traditional methods could be overkill.

A block theme and FSE may be all you need. They’ll help you to craft an attractive website that eschews all the bells and whistles. It’s perfect for situations where you just want to focus on content.

That’s not to say FSE isn’t capable of more. However, it may be the path of least resistance when it comes to simplicity. There’s something to be said for technology that puts this within reach.

Customizing a single post template.

Take Advantage of Full Site Editing

We’re just scratching the surface of what can be accomplished with Full Site Editing. And it will be exciting to see what new and creative uses developers will find for it.

Still, the feature is far from a universal fit. Not all projects will need the functionality. As such, it’s important to carefully consider the potential benefits and drawbacks before jumping on board.

The scenarios outlined above are worth contemplating as they take advantage of what FSE does best. The ease of use and flexibility it offers will undoubtedly make design and maintenance easier for a lot of people.

Is it right for your project? Hopefully, the ideas here will put you on the right path to finding the answer.

The post When to Choose WordPress Full Site Editing for Your Website appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/when-should-you-use-wordpress-full-site-editing/feed/ 0
Essential WordPress Block Theme Features for Web Designers https://speckyboy.com/wordpress-block-theme-features-web-designers/ https://speckyboy.com/wordpress-block-theme-features-web-designers/#respond Wed, 23 Oct 2024 07:37:43 +0000 https://speckyboy.com/?p=152746 The number of block themes is increasing, yet not all cater to the needs of web designers. We explore those key block theme features designed for professionals.

The post Essential WordPress Block Theme Features for Web Designers appeared first on Speckyboy Design Magazine.

]]>
Web designers working with WordPress have always had options. There is a myriad of ways to build a quality website. It’s all about finding the right fit for your needs.

That’s why the newfangled world of block themes has been disruptive. They’re different than classic themes. They don’t rely as heavily on PHP. And then there’s the whole concept of using JSON to define styles and options.

Block themes do come with advantages, however. Using one may mean writing fewer lines of code. And a block-based approach means not having to reinvent the wheel. That’s because many layout and functionality features come standard with WordPress.

The number of available block themes is increasing. But not all are ideal for web designers. We need flexibility and easy customization.

With that in mind, let’s check out some essential WordPress block theme features that focus on professionals.

A Minimalist Approach to Design

Readymade WordPress themes are popular. They promise a faster start on web design projects. Yet they can also be very opinionated.

That clashes with our ability to build custom websites. It seems like you can waste hours ripping a theme apart. You then have to rebuild it to match your vision. Starting from scratch may have been more efficient.

Thus, a minimalist approach makes sense. A strongly opinionated block theme is no better than a classic counterpart. It requires too much effort to customize.

Blockbase may be the best example of a minimalist theme. It makes very few design decisions. It’s the proverbial blank canvas. Still, the theme offers enough options to please designers.

Minimalism is a subjective quality, though. Not everyone wants a blank canvas. A theme that offers a few extra bells and whistles is also worth considering.

The key concept is to spend the bulk of your time moving forward. Some themes make it nearly impossible to do so.

The Blockbase WordPress theme takes a minimalist approach to design

A Selection of Style Variations

Block themes are supposed to make web design easier. And style variations are among their most powerful features. They make it possible to switch color and typography schemes. It takes only a few clicks to transform your site.

Web designers can use this to their advantage. A style variation may make for quicker progress. For example, a theme that offers light and dark color schemes saves us from building them.

This concept also fits with minimalist themes. Style variations that serve as a solid foundation are ideal. We can choose a variation and further customize it within the Site Editor.

Style variations won’t fully represent a finished product. But they are a step in the right direction.

Block themes can offer multiple style variations

A Set of Basic Block Template Parts

Think of block template parts as reusable sections of a theme. They’re not full-blown templates. But we can use them to power smaller areas within a template.

It’s a highly flexible feature. For example, you might create a block template part to display a call-to-action on blog posts. You could also create a variety of layouts for a site’s header. There are so many possibilities here.

A block theme that includes a set of template parts would be helpful. We can add common elements using minimal effort. We’ll have more time to focus on project details.

Let’s use Blockbase as an example. The theme includes several header variations. Everything from minimal to full-width options is available.

We can change header layouts within the Site Editor. Customization is easy. We have the option to edit the existing blocks or add new ones.

But why stop at headers? A theme could also include block template parts for other areas. Footers, sidebars, author bios, and navigation styles are possibilities. Anything to improve efficiency is worth considering.

Block Template Parts can be strategically placed throughout your theme

Custom Block Patterns for Niche Sites

Like block template parts, block patterns are reusable. However, block patterns are implemented at the content level. We can add them to any page or post.

Patterns once again save us from reinventing the wheel. And they can range from basic layouts to (almost) fully-formed content areas.

WordPress offers a community-driven block pattern directory. Find a pattern you like and then paste it into your page. Or import custom patterns directly within the block editor.

Theme authors can also include custom block patterns. The advantage is that these patterns can better reflect the theme. For example, they may take typography and color into account. That makes for a seamless fit with the existing design.

Authors might offer patterns that fit the theme’s niche. Including grid patterns or card layouts to a magazine theme, for instance. A portfolio theme could also provide galleries or project listing patterns.

Block patterns can make it easier to add popular design features to a page

Regardless of Theme Type, Web Designers Have the Same Needs

For web designers, the decision to work with block themes is nuanced. Block themes are the future of theming. But they work differently than the classic variety. As such, it’s easy to lose sight of what makes a block theme worthwhile.

There are some common threads, though. Web designers still need flexibility. We need a solid and unopinionated foundation. And we can’t forget simple options to help achieve project goals.

These are the same qualities we look for in a classic theme. The good news is that some block themes take web professionals into account. They eschew bloated features and focus on real-world solutions.

Regardless of the type of theme we use, needs don’t change. That’s worth remembering as we navigate a new era of building websites.

The post Essential WordPress Block Theme Features for Web Designers appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/wordpress-block-theme-features-web-designers/feed/ 0
The Benefits of Using Block Themes in Your Next WordPress Project https://speckyboy.com/block-theme-power-next-wordpress-project/ https://speckyboy.com/block-theme-power-next-wordpress-project/#respond Wed, 16 Oct 2024 21:00:49 +0000 https://speckyboy.com/?p=149391 Discover how block-based WordPress themes can help you create stunning websites without the need for extensive coding skills.

The post The Benefits of Using Block Themes in Your Next WordPress Project appeared first on Speckyboy Design Magazine.

]]>
Block themes have now been a part of the WordPress ecosystem for a few years. And with the WordPress Site Editor moving out of beta, I thought it might be a good time to revisit them.

The included features of both block themes and the Site Editor are no longer experimental. Nominally speaking, that makes them a viable option for production environments.

It may also help to boost their presence in the theme market. As of this writing, block themes make up just under 5% of the listings on the official theme repository.

But quantity doesn’t necessarily speak to the quality of the themes. The classic theme marketplace has been littered with low-quality offerings for years. Thus, numbers don’t tell us everything.

In the end, it comes down to features and functionality. So, do block themes have what it takes to power your next WordPress project?

A New Standard for Custom Styles

Before the Site Editor, we had the Customizer. It provided a standardized interface for theme authors to add custom options. The feature worked, but some themes created a nested mess of settings panels.

Block themes offer a different approach to customization. A global styles palette allows for setting important items like typography and colors. And theme authors can include readymade style variations that can dramatically change the look with just a click.

Beyond that, global styles can now be applied to specific blocks. For instance, you can set custom margins and padding for the Paragraph block. Or you might use custom colors and fonts on the Button block. There’s also the ability to add custom CSS to any block via an integrated textarea.

That’s a big deal. Previously, customizing block styling wasn’t easy. You might overwrite the default CSS in your theme. But new WordPress releases tended to change styles – meaning you’d have to readjust accordingly. Configuring the theme.json file was also possible. But having to manually insert specific styles is tedious at best.

Now, most tasks can be done directly within the Site Editor. Even better is that the custom styles you generate are portable via theme.json and the Create Block Theme plugin.

This makes for a smoother, browser-based design experience. That will likely hold more appeal for web designers than earlier incarnations of the Site Editor.

Style variations allow theme authors to bundle different looks.
The Twenty Twenty-Three theme includes several style variations.

Fixes To Previous Pain Points

Improving the Site Editor experience has been a priority for the project. And recent versions of WordPress have brought some welcome changes on that front.

For one, a new UI has made the Site Editor easier to navigate. Templates and template parts are neatly organized. And it’s easier to recognize the exact item you’re editing.

And the much-maligned Navigation block has also received an overhaul. Menu items can now be intuitively managed via a settings sidebar.

The Style Book feature should also come in handy. It provides a glimpse of how each block is styled. Previously, you’d have to manually add a block to a page to see how it fits within your theme. The ability to visually inspect seldom-used items in the back end helps to ensure that they meet our needs.

These and other enhancements have smoothed over a previously scattered user experience. That’s an important step. Because if the Site Editor isn’t easy to use, block themes will suffer as a whole.

The Style Book feature lets you see how each block will look on the front end.
The WordPress Style Book.

A Better Experience, but the Same Differences

A polished UX is a great step in the right direction. But that isn’t the only relevant part of using a block theme. You must also buy into the philosophy surrounding these features.

This may be the hardest thing for some web designers to accept. And there are a couple of issues at play:

A Different Way to Work

The Site Editor and block themes provide a visual way to build a website. This no-code approach can be liberating – or frustrating. The answer depends on how you prefer to work.

Developers who are used to building classic themes may not have the desired flexibility. Writing code means unlimited freedom. Every style and function can be customized to suit your needs.

As such, this newfangled way of working means accepting certain limitations. For instance, the global styles palette doesn’t include every possible styling option.

And while you can still use custom CSS within the Site Editor, it isn’t as well-organized as a traditional stylesheet. That could make future maintenance more cumbersome.

Not everyone is ready or willing to adopt a new workflow. Block themes force our hand.

Giving up Total Control Over Layout

Client-proofing can be a major part of building a website. The idea is that we can allow clients access to the items they need (content, the ability to upload images, etc.). At the same time, we can protect the integrity of the site’s layout.

Block themes aren’t necessarily built with this in mind. They provide ready access to the site’s header, footer, and everything in between. A rogue client could easily do some damage.

The Site Editor includes a “lock” function that prevents tampering. But it’s easy to disable.

With classic themes, it’s possible to embed elements directly into a template. This makes it completely off-limits within WordPress.

This shift has led to a debate within the WordPress developer community. For some developers, giving up control may be a bridge too far.

While it's possible to lock block layouts, the feature isn't foolproof.
Template Part Blocking in the WordPress Site Editor.

Block Themes Have Grown Up

All told, block themes are in a better position to fulfill their potential. And much of the credit should go to the team behind the Site Editor.

The improvements to building within WordPress are noticeable. This should help to put block themes on the map. They are now a serious option for web designers, rather than a curiosity for early adopters.

This doesn’t mean they’re the right fit for every project and person. The philosophical differences between block and classic themes still exist, after all.

But the future looks bright. With the Site Editor being stripped of this “beta” label, theme authors are more likely to build for it. And the rest of us will have more products to choose from.

Will there be a point when block theme adoption surpasses its classic counterparts? If it happens, it won’t be immediate. But it will be interesting to see how things evolve.

The post The Benefits of Using Block Themes in Your Next WordPress Project appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/block-theme-power-next-wordpress-project/feed/ 0
Do Clients Need To Know How Their Website Works? https://speckyboy.com/know-how-their-website-works/ https://speckyboy.com/know-how-their-website-works/#respond Sat, 12 Oct 2024 06:31:46 +0000 https://speckyboy.com/?p=150998 We explore the challenges in educating clients about their websites. Along the way, we share thoughts on why knowing it all isn't all that great.

The post Do Clients Need To Know How Their Website Works? appeared first on Speckyboy Design Magazine.

]]>
Web designers often fret about tools and technologies. We love to debate their merits and the impact they have on our projects.

One recent debate involves the WordPress Site Editor. The feature allows us to design and build an entire website within the browser.

Some find this to be a great leap forward. But others are concerned that it gives site owners too much control. They worry that there aren’t enough protections to keep a client from accidentally breaking the layout. I believe that there are valid points on each side.

But this discussion also got me thinking about how we train clients. Is the Site Editor (or any tool, for that matter) relevant to them? Do they need to know every aspect of how their website works? And where do we draw the line about what’s important?

Let’s explore the challenges in educating clients about their websites. Along the way, I’ll share my thoughts on why knowing it all isn’t all that great.

The Risk of Overwhelming Your Clients

Modern websites are becoming more complex. And it’s not just the high-end enterprise variety. Even an old-school “brochure” site can have several moving parts.

We can thank the proliferation of content management systems (CMS) for that. These apps allow for greater flexibility. But that also means more code. Themes, plugins, and custom creations each add another layer to the mix.

This makes educating clients more challenging. Limited time and resources may force us to leave out certain items. Thus, we can’t easily provide a complete explanation of every feature.

Perhaps this sounds like bad news. But that’s not necessarily the case. By focusing on the essentials, we’re helping clients understand what’s most relevant.

Take automobiles, for example. Cars come with all manner of complex systems. But do we know how each one works? To do so, we might have to spend weeks (or months) in a specialized course. And our heads would likely be swimming in superfluous facts and figures.

If the goal is to empower clients to perform specific tasks, it’s OK to skip past the things that don’t impact them.

A broad focus on website features can be overwhelming for clients.

What’s Important? Look at a Client’s Workflow

The areas of focus for client training aren’t always obvious. Some tasks, like logging in, are universal. But there will also be unique aspects as well.

Much depends on what your client wants to accomplish. Maybe they will be publishing articles or regularly adding events to a calendar. They might focus on processing eCommerce orders.

This information is vital. It helps guide us in how to effectively implement features. And it also gives us an idea of a client’s workflow. From there, we can design a training program that fits their needs.

It starts with the initial conversations you have with them. As you learn the project’s details, you’ll be able to ask questions about how they plan to interact with their site.

In addition, you’ll also have an idea of what can safely be left out. For instance, consider a client who won’t need to touch their home page layout. There’s no reason to spend precious time demonstrating a feature they won’t use.

Consider the common website tasks your client will complete.

Are Some Features Better Left Hidden?

Hiding or choosing to ignore certain features can sound suspicious. Some may see it as trickery. But that’s not the goal here.

To expand on that idea, let’s revisit the WordPress Site Editor. It’s a design tool intended to make for easier template changes. Thus, it’s not likely to be part of a client’s day-to-day workflow.

You might still mention that the feature exists. And you could even give a quick summary of its purpose. In that case, a friendly warning about the potential dangers should also be offered. But a deep dive into how it works is probably not necessary.

In my experience, clients tend to be focused on their to-do lists. Website tasks are often only a part of their responsibilities. Therefore, the more efficient we can be in training, the better it is for all parties.

And this doesn’t preclude us from exploring features later. As a client evolves, there could be an opportunity to dig into something you previously ignored. But initially, the features covered should be based on need.

It's OK to hide or ignore features that don't impact your clients.

Clients Don’t Need To Know It All

When you think about it, most of us buy products without understanding their every facet. Cars, mobile devices, and all manner of appliances come to mind.

The ability to operate these items is what matters. Do we need to know exactly how our microwave oven heats a meal? It may make for great party conversation. However, knowing how to use it is probably more important.

Websites are no different. We build them to suit our client’s needs. And we help them learn what they need to know to achieve their goals.

The most relevant information, therefore, is the best use of everyone’s time. Everything else is secondary.

The post Do Clients Need To Know How Their Website Works? appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/know-how-their-website-works/feed/ 0
How to Build a 404 Page with the WordPress Site Editor https://speckyboy.com/404-page-wordpress-site-editor/ https://speckyboy.com/404-page-wordpress-site-editor/#respond Sat, 05 Oct 2024 07:57:55 +0000 https://speckyboy.com/?p=154220 We show you how the WordPress Site Editor can help you build a custom 404 page. Don't take your 404 page for granted!

The post How to Build a 404 Page with the WordPress Site Editor appeared first on Speckyboy Design Magazine.

]]>
A great website has many ingredients. But some tend to fly under the radar. The venerable 404 page is a prime example.

Web designers spend hours perfecting a site’s layout, functionality, and content. However, we don’t always pay attention to the 404. Why is that?

It’s easy to take the 404 page for granted. It’s often hidden for one. We may not think of it until we stumble upon the page.

Content management systems (CMS) like WordPress make them even less visible. That’s because themes often come with preconfigured templates. We may not think to review what’s there.

That could be a missed opportunity. The 404 page is a place to help users navigate your website. They may look elsewhere if they can’t find what they need. And WordPress block themes open the door to customization. You can add features without touching code.

Let’s explore how the WordPress Site Editor can help you build a custom 404 page.

Start with a WordPress Block Theme

To start, you’ll need to install a copy of WordPress. You can use a local site or a web hosting account.

Next, it’s time to activate a block theme. However, a fresh install of WordPress will do this for you. The bundled default themes now work with the Site Editor.

We’ll use the Twenty Twenty-Three default theme for this demonstration. But you can use any block theme you like. The WordPress theme directory has several available for download.

Even better is that a basic 404 page doesn’t require plugins. WordPress includes enough blocks to build a functional page.

Edit Your 404 Template in the WordPress Site Editor

Now that we have a WordPress block theme, we can focus on our 404 page. Let’s start by navigating to Appearance > Editor inside the WordPress admin.

Next, we’ll click on the Templates link in the sidebar.

This screen displays all of the templates that come with your theme. The Twenty Twenty-Three default theme comes with a 404 template listed as Page: 404.

What if your theme doesn’t come with a 404 template? It’s possible to add a new theme template using the Site Editor. Just be sure to keep the WordPress template hierarchy in mind.

Assess the Template

Our 404 template is a bit sparse. It consists of a paragraph block and a search field. Both items are helpful. But we can do better, right?

A quality 404 page is there to guide users. Remember that they arrived here by mistake. The link they wanted to visit isn’t available.

What can we do to improve this page? We can think of a few additions that would make a positive impact.

The original template contained only a search field and some descriptive text.

Add Some Helpful WordPress Blocks

First, we’ll add a Page List block. This one provides a map of content for users to navigate. We love that the list shows parent and child relationships.

Adding the WordPress Page List block.

Maybe our visitor was looking for a blog post? Let’s add a Latest Posts block that shows six recent articles.

We can also include a button that links to the Blog page. Users can click it to gain instant access to our archive.

Adding the Latest Posts block with a button linking to our Blog page.

Let’s narrow things down a bit as well. Our blog has several categories and tags. We can use the Categories List and Tag Cloud blocks to add direct links to them. We’ll also use the Block Editor to create a multi-column layout.

Adding the Categories List and Tag Cloud blocks.

What if our visitor still hasn’t found what they need? We’ll add a Cover block that encourages them to contact us.

A Cover block contains a call-to-action.

It seems like we’ve covered all the bases. Our 404 page will serve as a launch point for users to find desired content.

The finished version of our 404 page template.

Helping Users Find Their Way

We’ve taken a basic 404-page template and turned it into a hub. And we did so with native WordPress blocks. A few minutes was all it took to enhance the user experience.

There’s always room for more enhancements, though. You could add some third-party blocks to help users navigate. And a live search feature would improve the core WordPress function.

All told, the Site Editor simplified the template-building process. It didn’t require us to write code. And it offers plenty of layout options.

Don’t ignore your website’s 404 page. Improving it is worth the effort. And the WordPress Site Editor makes it easier than ever.

The post How to Build a 404 Page with the WordPress Site Editor appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/404-page-wordpress-site-editor/feed/ 0
What Collaborative Features Will Bring to WordPress https://speckyboy.com/what-collaborative-features-will-bring-to-wordpress/ https://speckyboy.com/what-collaborative-features-will-bring-to-wordpress/#respond Sat, 05 Aug 2023 06:17:10 +0000 https://speckyboy.com/?p=151400 How will collaborative features improve WordPress? We discuss several scenarios that demonstrate how they can streamline working together.

The post What Collaborative Features Will Bring to WordPress appeared first on Speckyboy Design Magazine.

]]>
The Gutenberg project has changed WordPress dramatically. First, the Block Editor brought an entirely new interface to content creators. Then the Site Editor came along and did the same for designers. In short: everything’s a block now.

The project is more than just blocks, though. Phase 3 of Gutenberg involves adding collaborative features to WordPress. The main focus has been on design tools to this point. Now there will be a shift toward workflow.

Workflow is an overlooked subject. It’s relevant for websites maintained by multiple people. That’s likely a significant chunk of the WordPress user base. Websites in the publishing, education, and corporate enterprise sectors are all targets.

So, how will collaborative features improve WordPress? Here are a few scenarios that demonstrate how they can streamline working together.

Multiple Users Managing the Same Page

Let’s start with a personal pet peeve. I often provide technical support to my web design clients. Helping them create a page layout is a common request. It’s often a simple task. For example, it might consist of aligning an image beside the text.

This should be easy to resolve. But WordPress allows just one user at a time to edit a page. That means my client must exit the page so that I can access it.

It’s a small frustration. But it happens often enough to be a waste of time. Plus, this limitation makes training harder.

I usually end up creating a short video tutorial for them. It’s an effective tool, if not a bit overboard. There has to be an easier way to work together.

Allowing multiple users to collaborate would be a game changer. I could walk my client through the process while we’re on the same page. They’re more likely to remember it. And I won’t have to go to the trouble of making a video. Everyone wins in this scenario.

Collaboration can be useful even on small sites. It may not be used very often. But the feature is there to help when you need it.

WordPress only allows one user at a time to edit a page

Tweaking a Page Until It’s Just Right

WordPress currently allows users to work asynchronously. But tracking changes isn’t easy. And there’s no built-in way to communicate about them.

And what if you’re making edits to a published page? There’s no way to save changes now and release them later.

These are common roadblocks for collaborators. And both are part of Gutenberg’s Phase 3 roadmap.

We’ll eventually have a system that facilitates communication between users. Stakeholders can add notes to individual pages or blocks.

Meanwhile, changes to the revisions feature would enable users to work with the future in mind. Let’s say that we want to prepare our home page for Black Friday. We can make the necessary changes and save them. Then schedule publishing for that date.

Current methods don’t offer this kind of flexibility. Thus, a streamlined experience and increased efficiency will be welcome.

The ability to track changes to content would benefit WordPress users

Custom Guidelines for Publishing Content

Some organizations have guidelines for publishing content. They may include rules for branding, word counts, or the inclusion of a call-to-action (CTA).

But how do we ensure that content creators meet these benchmarks? WordPress doesn’t prevent users from clicking the Publish button. Thus, content may be published without some crucial elements.

Workflow has long been a struggle for publishers and web designers. Consider blog post layouts, for example. They often assume the user will add a featured image. But some users need constant reminders to add them.

This issue could be solved by creating a custom workflow. Users may see real-time checklists that measure progress. Or the software could prevent them from publishing content that doesn’t meet the established guidelines.

These functions may not be part of WordPress core, mind you. But the software could provide a way for developers to build them. From there, an organization can design a workflow that meets their needs.

This eliminates some manual labor from the process. Editors can then focus on content instead of its structure.

Working Together – Only Better

Initially, the Collaboration phase of Gutenberg sounded a bit boring. It seemed like a niche functionality that impacted relatively few users. But the information that has been released so far is quite the opposite.

Collaborative features have a broad appeal. They go beyond large publishers and will reach mainstream users as well.

They’ll make it easier for freelancers to work with clients. And they’ll increase the synergy between designers and developers.

What’s more, the features outlined are wide-ranging. They’re not just a case of “Google Docs meets WordPress.” Entire workflows can be constructed. And they can evolve as needs change.

The end product is still a ways off. But it looks like this phase will be well worth the effort.

The post What Collaborative Features Will Bring to WordPress appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/what-collaborative-features-will-bring-to-wordpress/feed/ 0
How No-Code Tools Disrupt the Design Process https://speckyboy.com/how-no-code-tools-disrupt-the-design-process/ https://speckyboy.com/how-no-code-tools-disrupt-the-design-process/#respond Tue, 30 May 2023 07:37:58 +0000 https://speckyboy.com/?p=150804 Like many web designers, I’m a fan of routine. I like having a set process for getting things done. And crafting a design can greatly benefit from this practice. For...

The post How No-Code Tools Disrupt the Design Process appeared first on Speckyboy Design Magazine.

]]>
Like many web designers, I’m a fan of routine. I like having a set process for getting things done. And crafting a design can greatly benefit from this practice.

For me, it starts with opening my favorite design tools. From there, I experiment with color and typography. Complimentary images are chosen to enhance the look. Layouts are built and refined. The result is (hopefully) good enough to share with clients. After a few revisions, it’s time to build.

However, technology is starting to blur the lines between designing and building. No-code tools like the WordPress Site Editor are throwing a wrench into the process. It’s now possible to handle design while building a website.

This method may be a boon for efficiency. But it may also lead to reduced originality in design. It might even discourage us from trying to level up our skills.

So, what does this mean for the future of web design? And where should we draw the line between convenience and originality? Let’s take a deeper look at how no-code tools are disrupting the design process.

The Good Parts of Browser-based Design

Designing a layout in a web browser isn’t new. Tools like Figma have brought this functionality into the mainstream. But there was still a separation between design and code.

No-code site builders have broken that barrier. And they offer some potential benefits.

Web design has often been theoretical. For example, you can create a beautiful mockup in Photoshop. But you won’t necessarily know how it will translate to a fully-functioning website.

Manipulating HTML and CSS to match the mockup isn’t always easy. Plus, adapting the design to mobile devices is a whole other process. The ability to accurately test while we design is a game changer.

Thus, a browser-based design eliminates some of the common issues we face. It’s a more direct way to work. That could mean launching a project faster. Revisions could also be easier to manage.

Tools like the WordPress Site Editor made design more efficient.

It’s Easy To Settle For ‘Good Enough’

The downside may be in how these tools change our mentality. For some, efficiency might become the primary focus. That could send the practice of detail-oriented design to the wayside.

We may be more inclined to stick with the default options. On the one hand, this makes perfect sense. It’s never a bad idea to go with components that work. But there’s also an argument that the finished product won’t reach its full potential.

To be fair, similar points have been raised about frameworks like Bootstrap. Because much of the hard work is done for us, it’s easy to settle for something good enough.

This is great for non-designers. They can create without investing in expensive tools. Nor do they need to understand code. At the same time, some finer touches may be missed. And that’s what tends to make a website stand out.

It’s not necessarily the tool’s fault, however. Ultimately, the decision to go all-in with great design is ours.

A theme like Ollie with many included styles may lead you to stick with the default look.

Combining Convenience and Great Design

The challenge, it seems, is in taking advantage of no-code tools without relying too heavily on their default styles. Maybe that requires us to keep those old-school techniques in the mix.

In practice, that means employing traditional design tools. After all, no one is forcing us to start from scratch in a web browser. It’s merely an option.

Thus, building prototypes with Figma, Photoshop, or whatever you’re comfortable with is still valid. This allows you to focus solely on the design. Plus, you won’t be limited by the constraints of most no-code tools.

That provides a solid launching point. When you enter your preferred no-code builder, you’ll already have a plan. This can guide you through the build process.

Working this way may require a period of adjustment. It can be difficult to create certain features with these tools. But in time, you can learn to adapt your prototypes to better fit the development environment.

The existence of no-code tools doesn't mean you should give up your current workflow.

Tools May Change, but They Don’t Have To Change You

The tools and techniques we use exist to help us achieve our goals. For web designers, it’s about building sites better and faster.

It’s easy to fall into a trap, though. You might, for instance, feel like you have to dive head-first into no-code tools. Or that you’ll need to abandon your previous workflow. That’s not the case.

These apps don’t have to completely change the way you design a website. Instead, they can be used to improve the process and create efficiencies.

For better or worse, these tools are disrupting the industry. But we can choose how much they disrupt us.

The post How No-Code Tools Disrupt the Design Process appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/how-no-code-tools-disrupt-the-design-process/feed/ 0