Back to Top

Tag Archives: web developer

WordPress Full-Site Editing: A Deep Dive Into The New Feature

Full-Site Editing is one of the main improvements added to the WordPress platform with version 5.9. It allows users to make sweeping changes to their website design and layout via a graphic interface, thus moving WordPress closer to the experience of a page builder. In addition, it offers new ways to create and customize themes.

These drastic changes have great consequences not only for the WordPress user experience but also for large parts of the platform’s ecosphere. For that reason, in this post, I am planning to take a deep dive into WordPress Full-Site Editing (or FSE for short, there are also discussions about changing the name because it’s a bit of a mouthful).

In the following, I will first talk about what Full-Site Editing is and provide a tutorial on how to use it to make changes to your site. I will also examine the tools it provides for theme development and close with a discussion of how the arrival of this feature will impact developers, theme authors, and existing page-builder plugins.

What Is WordPress Full-Site Editing? #

In a nutshell, Full-Site Editing means that WordPress now offers the ability to create and edit page templates and elements like headers and footers in a block-based graphic user interface.

A screenshot of WordPress Full-Site Editing

This is part of phase two of the Gutenberg project and the preliminary culmination of a development that saw its beginning with the introduction of the WordPress block editor in WordPress 5.0. Since its initial release, the block workflow has branched out to other parts of the WordPress user interface. For example, you can now also use it for widget management.

A screenshot of widgets page

One of the main goals of Full-Site Editing is to provide users with a singular workflow for making changes to their WordPress sites. In the past, you often needed to know several different systems to create a new menu, compose a page or post content, populate the sidebar, or adjust the color scheme. Even more complex changes required you to know how to edit page template files or write CSS. With Full-Site Editing, you can now make changes to everything in pretty much the same way (even if much of it still happens in different menus).

For everyday users, the benefit is reduced dependence on front-end developers. Site owners can now do a lot by themselves that, in the past, would require technical chops or professional help, such as making changes to page templates. Plus, those changes are now visible in the editor right away instead of having to go back and forth between the front end and back end of your site or even a code file.

At the same time, Full-Site Editing makes it easier for theme developers and designers to create markup and allows for quicker templating.


Here are the main building blocks that Full-Site Editing consists of:

  • Page templates and template parts
    The central attractions are two new editor interfaces that allow you to customize page layouts similar to the normal content editor. You can move page elements around, change their design (colors, fonts, alignment, and so on), and add or remove them at will. The same is also possible for single template parts such as headers and footers. It’s even possible to edit them separately. Plus, you can export your templates to use and distribute them as themes.
  • Global styles and theme.json
    A common feature in WordPress page builder plugins, Full-Site Editing allows you to define global styling for your entire site, such as colors and typography, in a central place. In the past, you would have to change the styling in different locations (e.g., the Customizer and block editor). FSE also introduces the theme.json file, which acts as a nexus for different APIs and contains the majority of styling information in block-based themes.
  • Template blocks and block patterns
    Full-Site Editing adds new block types to WordPress and the WordPress editor. These include static blocks like the site logo but also dynamic elements such as blocks for navigation, post titles, and featured images. These change according to settings in other places. There is even a full-fledged query block that’s basically the WordPress PHP loop. It lets you display a list of posts anywhere on the page. Each block also comes with its own design and configuration options.

Sounds exciting? Then let’s dive into how to use this new WordPress feature practically.

How To Use Full-Site Editing To Customize WordPress #

In the following, I will first go over how to take advantage of Full-Site Editing as a user. Later, we will also examine what makes this a useful feature for developers and theme designers.


In order to take advantage of Full-Site Editing, the most important thing is that you have a WordPress site running at least version 5.9. You can also use a lower version, but then you need to have the Gutenberg plugin installed and up to date.

The second thing you require is a block theme. That’s a theme that can take advantage of the new feature. We will go over how these are different from classic themes later. For now, a good option is Twenty Twenty-Two, which also came out with WordPress 5.9. I will be using it for this Full-Site Editing tutorial. Refer to the resources section at the end for other options.

Finally, if you are giving WordPress Full-Site Editing a spin for the first time, I recommend using a staging site or local development environment for it. That way, you can make all the mistakes you want without anyone knowing.


When you are logged into your test site, you can access Full-Site Editing via Appearance > Editor (also notice that the widget and Customizer options are missing).

A screenshot of Full-Site Editing user interface
(Large preview)

An alternative way to get there is via the Edit Site link in the WordPress admin taskbar on the front end. Either will land you on the main editor interface.

The main editor interface

Let’s walk through all the options available here:

  1. Top left corner: Let’s start here because it’s easy to overlook. A click on the WordPress logo opens up a menu to edit templates and template parts. It also has a link to return to the WordPress dashboard.
  2. Top bar: This should look familiar to anyone who has used the Gutenberg editor before. It contains the option to add blocks and block patterns, toggle between editing and selecting blocks, and undo/redo buttons. You can also open a list view of the current page, select different template parts, and jump directly to them.
  3. Top right corner: Contains the buttons to save changes and preview the design on different screen sizes. The gear icon opens up settings for templates as a whole and individual blocks. Besides, that is the option to customize Global Styles. The three-dot icon contains display options for the editor, the ability to export templates and template parts, and access to the welcome guide.
  4. Center: In the middle is the main editing screen. Here is where you will make changes to page templates and work with blocks. It is also an accurate representation of what your design will look like and contains some controls to add blocks and other elements to the page.

Most of these are togglable, so you can only have those options open that you really need and want.


As mentioned above, you can access this menu by clicking the half-black, half-white circle in the top right corner. It offers two types of styling options: for the entire website and for individual blocks. What exactly is available here depends on your theme.

A screenshot of WordPress Full-Site Editing menu

For Twenty Twenty-Two, you have options for typography, colors, and layout. We will get to those below. For now, let’s turn to the most exciting part of the Global Styles menu — the preset color themes. You can find them when you click on Browse styles.

A screenshot of WordPress Full-Site Editing color themes

In this menu, developers have the possibility to offer styling presets for the entire theme. Hover over one of the options to see a preview of its color and font scheme, and then adopt the look for your entire theme with a single click.

A screenshot of WordPress Full-Site Editing color themes preview

I really like this feature as it offers users different versions of the same theme that they can easily use as jump-off points for their own creations. It’s a bit like themes shipping together with a number of their own child themes. You can also go back to the previous state by clicking the three dots at the top and choosing Reset to defaults.

A screenshot of WordPress Full-Site Editing color themes
(Large preview)


When you click on Typography, you get to a submenu where you can choose whether to customize the styling for general text or links.

A screenshot of WordPress Full-Site Editing typography

Another click gets you to a subsection where you can make the actual changes.

A screenshot of WordPress Full-Site Editing typography
(Large preview)

As you can see, it’s possible to customize the font family, size, line height, and appearance, meaning font-weight and slant. Options here depend on the theme as well. For example, under Font family, you can only choose System Font and Source Serif Pro as these are the only options Twenty Twenty-Two ships with.

A screenshot of WordPress Full-Site Editing typography

However, this is also due to the fact that full support for (local) web fonts only became available in WordPress 6.0, and this theme came out before that.

Likewise, the numbers under Size represent defaults set by the theme authors. You also have the option to click on the little icon in the upper right corner to set a custom value.

A screenshot of WordPress Full-Site Editing typography
(Large preview)

Line height should be self-explanatory. The Appearance drop-down menu lets you choose font variations from a list.

A screenshot of WordPress Full-Site Editing typography
(Large preview)

If you pick any of these options, changes will automatically become visible on the editing screen.

A screenshot of WordPress Full-Site Editing typography
(Large preview)

If you don’t like the modifications you have made, you can always reset to defaults, as mentioned above.


Under Colors, you can change the hue of different elements (duh!).

A screenshot of WordPress Full-Site Editing color palette
(Large preview)

What’s interesting here is the Palette option, where the theme can provide its own color palette, including gradients. This is besides the default options Gutenberg offers and custom colors that users can create.

A screenshot of WordPress Full-Site Editing color palette
(Large preview)

Besides that, just like for typography, the theme provides different options for elements for which you can change colors. In Twenty Twenty-Two, that’s BackgroundText, and Links.

After choosing any of these, you get to a screen where you can easily pick a color or gradient from available options or create your own. When you do, your pick automatically translates to what you see on the editing screen.

A screenshot of WordPress Full-Site Editing background color
(Large preview)

There is even a color picker that lets you set custom hues or enter color codes in RGB, HSL, or HEX format.

A screenshot of WordPress Full-Site Editing background color
(Large preview)

Finally, in this theme, the Layout option only allows you to add padding around the homepage.

A screenshot of WordPress Full-Site Editing layout option
(Large preview)


Styling defaults are not only available for the website as a whole, but you can also set them for individual blocks. For that, you find an option in Global Styles at the bottom where it says Blocks.

A screenshot of styling blocks option in WordPress Full-Site Editing
(Large preview)

When you click it, you find a list of all the WordPress default blocks.

A list of all the WordPress default blocks
(Large preview)

Click those in turn to find similar options to customize their design on a per-block basis. For example, below, I have set the link color globally to blue but set the color for the Post Title block (which is also a link) to orange. As a consequence, orange overwrites the initial value, and the title comes out in that color.

A screenshot of different links color options
(Large preview)

If you have ever worked with CSS, this principle should be very familiar. Set some site-wide standards at the top of the style sheet and then overwrite them with customizations further down in the cascade. It’s the same thing here.


Making layout changes works the same way as in the main WordPress block editor. Everything you see on the screen is made up of blocks. Some may be combined as groups or block patterns, but they are blocks nevertheless.

As such, you can move and customize them however you want. For example, the main part of the homepage is the Query Loop block, whose function is to serve up the latest blog posts. However, it, too, is made up of different blocks, namely Post TitlePost Featured ImagePost ExcerptPost DateSpacer, and Pagination.

A screenshot of the Query Loop block
(Large preview)

If you want to change something about the way it looks, you can very easily do so. For example, you may click on the Post Featured Image block and then use the arrows in the toolbar to move it below or above the post title.

A screenshot of the Post Featured Image block
(Large preview)

Alternatively, hover over the block and then use the Drag button (which looks like six dots) to move it to another position. If you hit Save after this, it will translate to the design on your site.


In addition to the ability to move them around, every block also comes with its own settings. Like in the Gutenberg content editor, you can access those via the gear icon in the upper right corner. When a block is selected, you will see its customization options there.

A screenshot of block settings
(Large preview)

What’s available in this place depends on the block you are working with. For example:

  • Post Featured Image: Has options to add the margin, padding, and configure image dimensions.
  • Pagination: Control the justification and orientation of its elements, wrapping, colors, and whether to show arrows, chevrons, or nothing as indicators.
  • Post Title: Besides setting colors, you can decide if the title should be a link, open in a new tab, or have a rel= attribute. You can also control colors and typography (including the ability to use Title Case) and add a margin.

You get the gist. Be aware that there are often more settings hidden that you can access via a plus or three-dot icon within the sections.

A screenshot of hidden block settings
(Large preview)

In addition, there are settings in the toolbar atop blocks when they are selected. You should not forget those as they can be decisive. For example, in the case of the Post Title block, it’s where you determine what order of heading (h1-h6) it takes, an important factor for SEO.

A screenshot of block settings in the toolbar
(Large preview)


Of course, you can not just customize the available blocks, but you are also able to add your own. This works the same way as in the content editor and comes with different options:

  1. Hover over an empty space in the template until a plus button appears, and click it. Then search or choose what you want from a list of blocks.
  2. Click existing blocks and use the options button in the top bar to pick Insert before and Insert after.
  3. Use the plus button in the upper left corner to see and search the full list of available blocks, then drag and drop them where you want.
Adding and removing blocks option
(Large preview)

In some places and existing blocks, you will also find icons to add more blocks. Plus, you have the ability to add block patterns, but we will talk about this further below.

Leaves the question, how is any of this helpful?

Well, it means you can easily add both static and dynamic content to the homepage. An example would be a heading and paragraph above the Query Loop block as an introduction to your blog.

A screenshot of a heading and paragraph above the Query Loop block
(Large preview)

Naturally, you can also remove blocks you don’t want just as easily. Simply select one and hit the Del or backspace button on your keyboard, or remove it via the block options.

A screenshot of the remove blocks option
(Large preview)

You also have the ability to open a list view at the top (the icon with three staggered lines) and navigate to blocks from there or choose to delete them right away.

A screenshot of how to delete blocks
(Large preview)

This option also gives you a great overview of the block structure of whatever part of the site you are currently editing.


Template parts are entire sections inside templates that you can exchange as a whole and modify separately. In the case of Twenty Twenty-Two, that is the header and footer. You can see this in the template options on the right or when you click the arrow in the top bar.

A screenshot of template parts
(Large preview)

Template parts are just groups of blocks on the page, so you can edit them as described above. However, what’s special about them is that themes can offer variations that allow you to change the entire part with one click.

For example, when you select the header in the example, it will show a Replace option in the settings bar at the bottom.

A screenshot of a Replace option
(Large preview)

When you click it, you can see the variations the theme offers for this template part, as well as fitting block patterns.

A screenshot of the theme offers for the template part
(Large preview)

Twenty Twenty-Two has several default options to choose from. Click any of them, and Full-Site Editing will automatically replace the entire header with the new option.

A screenshot of templates for headers
(Large preview)

The same works for the footer, of which Twenty Twenty-Two also has a few to offer.

A screenshot of templates for footers
(Large preview)


To edit template parts separately, click on the WordPress logo in the upper left corner to open the following menu.

A screenshot of how to edit template parts separately
(Large preview)

At the bottom, you will find a menu item called Template Parts. Click it to see a list of all available template parts on your site.

A screenshot of available template parts
(Large preview)

Alternatively, you can also select a template part and choose to edit it from its options.

A screenshot of how to edit a template part
(Large preview)

In the Template Parts menu, click Add New in the upper right corner to create additional ones. This is useful if you want to make another version of the footer, for example. The cool thing is when you click it, besides asking for a name, WordPress automatically gives you templates for both header and footer, so you don’t have to start from scratch (unless you want to).

A screenshot of how to create a new template part
(Large preview)

Besides that, you may also just click on existing parts in the list to edit them. This works the same way as in the main editor. The only thing that is different for template parts is that you have handles on the left and right that you can use to shrink and expand the size in order to check its behavior on smaller screens, i.e., mobile devices.

A screenshot of how to edit template parts
(Large preview)

Just like a template file, anything you change and save here will translate to all pages and templates that use this part.

Finally, if you have set up a group of blocks on the main screen, you can turn them into a template part as well. Click the options in the main screen or in the list view and pick Make template part.

A screenshot of how to make a template part
(Large preview)

You need to give it a name and choose what area it belongs to. When you then save it, it is available as a template part.


In the WordPress logo menu, there is also an item called Templates. Unsurprisingly, it contains a list of all page templates available on your site, from the 404-page over archives and single pages to single posts.

A screenshot of templates item on the WordPress logo menu
(Large preview)

Page templates are usually files that control the basic layout of different types of content. If you change the template, all content of that type changes, too. With Full-Site Editing, you can edit existing templates and create your own in the user interface instead of a code editor.

Note, however, that FSE only lets you create standard page templates via Add New. More on that soon.

A screenshot of how to create a new page template
(Large preview)

Something that comes especially handy here (and also for template parts) is block patterns. These are predesigned layouts consisting of several blocks you can add to website pages to instantly create entire sections. Examples include newsletter sign-up forms, pricing tables, and event lists, but also simple things like a styled divider or an image with a quote or caption.

A screenshot of a block pattern example
(Large preview)

Patterns allow you to put together entire designs quickly. They are easy to use, too! When editing a template, simply click the plus symbol in the upper left and go to the Patterns tab.

A screenshot of patterns tab for templates
(Large preview)

Filter the patterns via the drop-down menu at the top, e.g., by featured patterns, footers, pages, or buttons. If you find something you like, simply drag and drop it on the page. You can also search for something specific, like a “header” at the top, which will even show blocks from the WordPress block directory.

For a better overview, it helps to click on Explore to access the block pattern explorer.

A screenshot of featured patterns
(Large preview)

This shows the block patterns in a larger window with the ability to search and filter them on the left. A click on a pattern you like automatically adds it to the template editor, where you can position and customize it as usual.

A screenshot of the template editor
(Large preview)

By the way, you can clear all customizations you have made for individual templates by clicking the three-dot icon in the Template menu and choosing so.

A screenshot of how to clear customizations
(Large preview)


Besides using what’s available, you also can add external block patterns from the pattern directory.

A screenshot of the pattern directory
(Large preview)

Search and filter to your needs. If you find something you like, simply use the Copy Pattern button on the pattern page to get it on your site.

A screenshot of a Copy Pattern button on the pattern page
(Large preview)

After that, go back to the Full-Site Editing editor and paste it. The pattern will then show up there.

A screenshot of a new pattern in the Full-Site Editing editor
(Large preview)

If you like it and likely want to use it again, click the three dots in the options bar and choose Add to Reusable blocks.

A screenshot of the 'Add to Reusable blocks' option
(Large preview)

That way, it will, from now on, be available in the block menu under Reusable.

A screenshot of the 'reusable' item in the block menu
(Large preview)


There is a second way to edit and create page templates, which happens in the normal Gutenberg content editor. It offers less complexity than the site editor interface (e.g., no access to other templates) but works similarly.

Simply create a new post or page, then, in the document settings sidebar, locate the Template panel below Status & visibility.

A screenshot of the standalone templates editor
(Large preview)

Here, it lists your current template and makes other options available in the drop-down menu. You can edit what’s already there via the Edit button or create a new template by selecting New. Each opens the more limited template editing experience.

A screenshot of the drop-down menu for editing or adding new templates
(Large preview)

Edit and save the template in the same way as in the site editor. Anything you create this way will also show up in the list of templates in the Full-Site Editing editor.

A screenshot of the list of templates in the Full-Site Editing editor
(Large preview)


To make templating in FSE possible, the developers have added a number of dynamic blocks that can pull content from the database depending on the following:

  • Site title, tagline, and logo;
  • Post title, featured image, content, excerpt, author, avatar, author biography, date, tags, categories, next and previous post, read more;
  • Post comments, single comment, comments query loop, author, date, content, count, comment form, and link;
  • Archive title and term description;
  • Query loop, post list, post template, pagination;
  • Template part.

These are also available in the normal WordPress editor. There are more to come in future versions, and you can get early access to them via the Gutenberg plugin.


When you have made all the changes you want, you have the option to preview them in different screen sizes by clicking Preview in the upper right corner.

A screenshot of the Preview option
(Large preview)

If you are satisfied, a click on Save will make the modifications permanent. WordPress will also list which templates and template parts your changes will affect.

A screenshot of the Save button for saving changes in templates and template parts
(Large preview)

That way, if you want to discard them in one place but keep them elsewhere, you can do so. Simply uncheck those components where you don’t want to save your changes. Click Save again, and your choices will translate to the front end of your site.

A screenshot of a template

Full-Site Editing For Developers And Designers #

Full-Site Editing is also a useful tool for developers. You can use the interface to create templates and then export them as files to add to and publish as themes.


To take advantage of this, you need to be aware that FSE-ready block themes have a different architecture than classic WordPress themes. For one, the template and template-part files for Full-Site Editing no longer contain PHP but are HTML files with block markup.

A screenshot of Block Theme Architecture
(Large preview)

Instead of style.css, styling is mostly taken over by theme.json. Here is where you set up styles for the block editor and individual blocks, styling presets, as well as CSS defaults (both for the front-end and backend editor). In fact, theme.json is so powerful that, by modifying it, you can change the style of an entire website.

This also allows you to switch between different sets of global styles (i.e., theme.json files) in the same theme. It’s a feature that only arrived in WordPress 6.0.

Relying mostly on theme.json greatly reduces CSS in other places. For example, Twenty Twenty-Two’s style.css is only 148 lines long. For comparison, its predecessor Twenty Twenty-One has almost 6,000 lines in its style sheet.

In addition, theme.json uses a whole different kind of markup. Yet, you could write an entire article just on this one file, so you are better served to start with the documentation for details.

The minimum requirements for a block theme are to have an index.phpstyle.css, and an index.html file in a templates folder. The latter is what marks the theme as a block theme to WordPress.

If you want to add template parts, you will place those in a parts folder. Having a functions.php and theme.json files is optional. Finally, you can also include a styles folder for global style presets. For example, this can include different color schemes for the theme.

A screenshot of the Block theme setup
Source: (Large preview)

Besides the changed structure, you also have different ways of creating template files when using a block theme. While you can still do it manually, using the new WordPress interface is also possible.


If you want to use the page editors to create templates, the first step is to simply set up your templates as described in the first part of this article. One important option here is to know that you can use the Advanced settings for template-part blocks to change their type of HTML element.

A screenshot of how to change the type of HTML element for template-part blocks
(Large preview)

When satisfied, you can download all your theme files at once. The option for that is available in the More tools & options menu, which you access by clicking the three dots in the upper right corner of the Full-Site Editing screen.

A screenshot of the export option to download theme files
(Large preview)

Here, locate the Export option. It will automatically download all template and template part files as a zip. Simply unpack them, and you can use them for your theme.

Consequences Of Full-Site Editing For The WordPress Ecosphere #

Besides providing a tutorial on how to use Full-Site Editing, I also want to talk about what its arrival means for the WordPress environment and those working there.


As is to be expected, an important question is whether this kind of feature will eliminate the need for professional developers and designers. Are they still needed when users can seemingly do everything themselves?

The short answer is “yes.”

Neither the emergence of WordPress itself nor page builders or page builder plugins, or any other technology that makes it easier for laypeople to build their own websites have eradicated the need for professional help. And it won’t happen this time, either.

While these days, users don’t need help for every little thing (like changing colors or fonts), there are still lots of tasks that non-technical site owners simply can not do with the available tools and where they need someone to do it for them. Plus, if you want a unique design and not rely on a template that hundreds or thousands of other people might also be using, you still need a designer and/or developer.

Plus, with great power also comes a great opportunity to screw things up (to loosely quote Spiderman). Just because everyone has the tools at their disposal to make a well-designed website, that doesn’t mean everyone can. Design is more than mere technical ability.

What’s more, not everyone actually wants to do the work. They’d rather hire someone with the skills than acquire them from scratch. Finally, there is so much more to a successful website than “just” design, such as SEO, performance, security, and maintenance.

So, even if there are fewer obstacles to building websites, there is no need to think that designers and developers are a dying breed. In contrast, the switch to new tools offers plenty of opportunities to build services and products around them.


So what about theme creators? Does everyone have to switch to block themes now?

Here, it’s first important to keep in mind that many themes have not yet switched to the Gutenberg block editor and that there are still many users on the Classic Editor. The latter will also continue to work for a while as the plugin will still be supported until at least the end of 2022.

A screenshot of the article with the title 'WordPress classic editor support extended for at least another year'
(Large preview)

Also, all of the features described above are optional, not mandatory. Therefore, the switch does not have to be immediate. You can even build hybrid themes that are not complete block themes but are able to use block templates. This option exists by default unless you specifically switch it off.

Nevertheless, in the long run, it’s probably a good idea to move your existing themes over to FSE capabilities. It’s something that WordPress users will likely grow to expect as it gives them more flexibility and power to customize themes on their own.

At the same time, as described above, you can also use Full-Site Editing to create themes with less coding, which can speed up development time. Plus, it offers new economic opportunities. Besides themes, theme authors can now offer extensions like blocks and block patterns, opening up whole new business models and opportunities.


The existing page builder plugins are probably one of the biggest question marks. Will the likes of Divi, Elementor, and Co survive when WordPress can do a lot of what they were created to provide?

First of all, it’s unlikely that everyone will immediately switch away from the tools they are used to working with, so page builder plugins will likely stay around for a while. Also, many of them are currently more powerful than what Full-Site Editing is capable of in its present form. Another reason to stay with what you have.

Overall, these types of plugins have become very established over the last years, to the point that they sometimes ship packaged with themes. For that reason, it’s improbable that they will suddenly lose all their market share. Despite that, Full-Site Editing will likely eat into it over time, especially with new users who get to know it as a normal part of WordPress.

Just like everyone else, page builder plugins will have to evolve so that they offer things that FSE doesn’t to stay competitive. One way would be to offer kind of hybrid plugins that extend WordPress’ native page editor. Similar things already exist for Gutenberg and for the Classic Editor.

If you are interested in original article by Nick Schäferhoff you can find it here


Why sales needs SEO more than ever

Sales networking just isn’t as valuable as it once was. It’s time to zero in on your most important salesperson – your company website.

Sales always has a voice. Revenues have to grow, and anything else is a failure.

But now, many companies have a near-death experience because the sales landscape has radically changed.

Years ago, a salesperson had a valuable Rolodex. The salesperson nurtured the relationships it represented with calls, visits and likely more. They met up at conferences, happy hours and golf outings. The biggest clients would even get invited to company parties and perhaps retreats.

Of course, the Rolodex has evolved into CRMs and the like. But now, it’s just not as useful. The value of a salesperson’s list of names is fundamentally gone.

What changed?

The COVID-19 pandemic suddenly forced salespeople to shift their behavior. They could not meet with clients in person anymore. They found that clients working remotely no longer have a receptionist who can personally hand them a message.

The names they carefully gathered no longer answer their phones. But people respond to email and voicemail messages infrequently.

Reaching someone is basically a game of tag until they quit or surrender.

As a result, relationships have often come to a screeching halt.

Sales networking just isn’t as valuable as it once was.

So a salesperson who used to depend on relationships, meetings, conferences and calls is suffering. And where salespeople still have a loud voice, that voice is now grumbling. The lead sources have dried up and their income is taking a beating.

Who’s to blame?

If sales can’t meet their numbers, everyone in the company is impacted. So Management looks to Sales and demands an explanation.

Of course, it is Marketing’s fault. Their job is to provide leads.

Or it’s Management’s fault. The company should have seen it coming.

Sales executives should have known that their outside sales force was going to suffer, and the company should have invested more heavily in digital lead management. They should have had a survival plan to target new prospects. They should have taken their website to new heights instead of relying on something about to die.

Most salespeople cannot spell SEO or PPC. They have never written content. So regarding the company website, they often have a “build it and they will come” expectation (after all, the internet is free, right?).

In their defense, for a long time, an outside sales force could be relied upon to grow revenues. The sales processes got results. Therefore, the “if it isn’t broken then don’t fix it” approach to marketing used to work.

They simply did not know.

So, surprise – your outside sales team is no longer effective.

  • They may be going to conferences, but attendance at events is still down by 75%. And the prospects who do attend are not decision-makers.
  • They may still be calling their (now old) contacts. More likely than not, these people have changed jobs. In any case, the contacts do not answer their calls.
  • Reaching out to former client companies doesn’t pan out either. The next regime has no idea who you are and certainly has no brand loyalty.

And so the business is suffering.

What to do?

How do you solve the drying up of sales? The answer will vary. Or in the mantra of SEO, “It depends.”

Somehow you need to generate leads for your sales team. This takes sharpshooter precision, and you have many options depending on your budget. 

You can buy ads (PPC) and maybe earn some quick wins.

You can buy into the “flood the web with content” approach, with or without a boost from influencers (it may not help, but hey, you have to do something).

You could buy links (but steer clear of this – it’s the kiss of death). You could accept placed-elsewhere content as sold by snake oil SEOs.

Or you can decide that your survival depends upon doing it right.

The most valuable salesperson

So far, it is clear that the world is slow to recover from the impacts of the last few years. The remote work paradigm is not going away, and sales must adapt. Change is needed.

It is also clear that a cheap solution is money wasted. And in some industries, the outside salesperson is doomed if you cannot provide leads.

In today’s sales reality, your company website is your most important salesperson.

Do SEO as if your survival depends upon it.

And whatever you do, do not hire the cheapest solution, thinking there is no difference. There is a difference if you want to rank on the first page out of 10 million competitors for any keyword that matters. 

Here is my favorite analogy for generating leads: If you want to catch fish, you must use the bait the fish are biting and fish where the fish are. In practical terms:

  • Define the ideal fish – a suitable large-fish client, not always a whale.
  • Find a desired outcome that the ideal fish has been looking to solve.
  • Build a program that delivers those specific results for that ideal fish.
  • Find out where the ideal fish are hanging out and put an offer in front of them.
  • Convert the fish with a pressure-free, trusted expertise sales approach

Sounds simple, right?

What is simple is not always easy. An expert SEO consulting services company may be needed to help you get that message to a lot of fish. 

Then target others, rinse and repeat.

Bottom line, if you find that your leads are diminishing, it is likely because your website traffic is suffering. And that is best addressed with SEO.

If you are interested in original article by Bruce Clay you can find it here


Gutenberg 14.2 Improves Writing Flow, Adds Kerning Controls for Headings in Global Styles

Gutenberg 14.2 brings some important changes to the writing flow in the block editor that simplify the experience and remove unnecessary obtrusions.

One small but significant change is that the sibling and line inserters have been updated to use a more natural animation effect with a slightly increased delay to minimize accidental triggers. This release also improves selection of multiple blocks, making it smoother and more consistent.

One of the most impactful improvements to the writing flow is that the editor now hides all floating block UI while the user is typing. Gutenberg engineer Michal Czaplinski demonstrated these updates in a video:

Version 14.2 adds support for kerning controls in the Global Styles panel, making it possible for users to adjust the letter spacing with live preview in the editor. Gutenberg contributor Robert Anderson, who submitted the PR for this feature, advocated for getting it into the upcoming 6.1 release.

“It isn’t technically a ‘bug’ (more ‘missing functionality’) but it (along with #44067) does make global styles feel less broken,” Anderson said. 15 days ago the feature was cherry-picked and added to the wp/6.1 branch to have it included in the next release.

A few other notable improvements in version 14.2 include the following:

  • New Calendar block settings for adding the background, link, and text color
  • “Banners” and “Footers” added to block pattern categories
  • Autocompletion for links is now available in any block using the [[ shortcut to trigger it in the editor

Gutenberg developers also discovered that they recently introduced a bug when improving the List block to use inner blocks, where it would re-render for each level of nesting. Fixing this problem brought significant performance gains for the initial load of the editor. This improvement has also been cherry-picked for inclusion in the upcoming WordPress 6.1 release.

If you are interested in original article by Sarah Gooding you can find it here

Posted in Blog | Tagged , , , |

Gutenberg Contributors Explore a New Browse Mode for Navigating the Site Editor

It’s easy to get lost while trying to get around the Site Editor unless you are working day and night inside the tool. The navigation is jumpy and confusing, especially when going from template browsing to template editing to modifying individual blocks. A large PR is in progress for redesigning this UI with the introduction of a “browse mode” that would make the experience feel more like a design tool.

Gutenberg lead engineer Riad Benguella opened the PR as a continuation of the ongoing work on this project, which has its roots in ideas and explorations that have been fermenting since 2019. He shared a video that roughly demonstrates the target for the proposed UI changes.

It essentially introduces a “navigable frame” where users can select from a menu of features on the left. More detailed efforts on improving the animations and placement of the menu items is happening simultaneously within the ticket.

The original idea was to include the “Navigation menu” item inside the sidebar, but Benguella removed it in favor of keeping the PR contained to simply adding the “edit/view” mode.

Although such a large PR has the potential to introduce a slew of regressions, Benguella said there is no other way around a big PR due to the the necessity of the structural changes to how the site editor is organized. He is attempting to keep it narrowly focused and not try to tackle features like browsing capabilities and adding UI (template lists, global styles, etc) to the sidebar.

The idea is not without some pushback. Alex Stine, Cloud Platform Engineer at Waystar, warned against introducing another Mode into Gutenberg, saying it “feels kind of reckless considering we haven’t refined existing modes for all users.” He noted that Gutenberg already has select/edit mode contexts.

“This was a feature basically added for screen readers only,” Stine said. “I am hoping this will one day be removed, but we’re not quite there yet.

“I think the community is trying to solve the wrong problem. If Gutenberg itself did not have such a complex UI, there would not be the need for a hundred different modes in a hundred different contexts, blocks, or even editors. We have gone so crazy making everything so quickly, no one thought about how to unify the interface across all editors. This feels like it could be another patch to a bigger problem.”

Stine cautioned against growing the UI for something that ultimately doesn’t make things any simpler.

“In a sense this PR doesn’t introduce any new mode, it just redesigns the current navigation panel a bit,” Benguella said in response. “I think it’s an opportunity to improve the a11y of the navigation in the site editor.

“The confusion in this PR is that it’s not about another mode in the editor itself, it’s higher level, it’s how we choose which template and template part to edit before actually entering the editor.”

Although the project’s contributors have been referring to it as “browse mode,” it is essentially a redesign for the existing UI to make it more intuitive for users to navigate. Gutenberg may not need any more new “modes” but the site editor is in dire need design improvements that will unify the experience and make it less chaotic for getting around.

During the most recent core Editor meeting, Gutenberg contributors called for feedback on the big PR, since it has so many moving parts and needs more scrutiny. It’s not ready to land in the next release of Gutenberg yet, but the concept is rapidly taking shape and may expand to include more features in the sidebar once the basic structure is in place.

If you are interested in original article by Sarah Gooding you can find it here

static vs dynamic

Static vs. dynamic websites — what’s the difference?

Let’s dig into the primary differences — as well as the pros and cons — of static and dynamic websites.

When building a new website, choosing to build a static or dynamic website is one of the first decisions that web designers make.

To make the right decision, you need to understand the difference between the two.

In web design, static and dynamic websites refer to the way they display content. A static website offers the same content to all visitors, while a dynamic website can tailor content per individual visitor.

Let’s explore the concepts of static and dynamic websites, learn the pros and cons of each, and discuss what concept is better to follow when you build your website.

What is a static website?

The word “static” is typically used to describe something that is lacking in movement, action, or change. A static website is a website made up of a collection of static pages, or pages that don’t change, created by HTML, CSS, and Javascript. In its simplest form, each web page is represented as an HTML file visitors access while browsing a website. Static websites appear the same for every visitor who accesses them, and the only way to change this is to modify the source files.

Though the term “static website” might give you a false impression that this kind of website doesn’t have any interactive elements — static websites can have interactive elements like web forms, although those elements cannot be tailored per individual user.

Static websites generally work for smaller websites with a limited number of pages and don’t require frequent content updates. Examples of static sites include a personal portfolio, a company brochure site, and a product promo page.

Pros and cons of a static website

Most avengers of static websites come from their relative simplicity:

  • Ease of creation. Static websites don’t require creating any logic for content loading from a database. Today, anyone can create a static website using an online website builder.
  • Good performance. Static websites require minimal back-end processing. Because all content is predetermined, it’s possible to optimize it to offer better performance. For example, web designers can use caching so the content will be delivered without delays.
  • Better level of security. Since static websites require much fewer tech building blocks to perform, they are generally less affected by security issues.

But static websites have a few downsides, too:

  • Time-consuming content management. On static websites, content and design are not separated; if you want to modify content, you need to dive into source code to do so. Introducing site-wide updates on a static website can be tedious because all changes should be introduced manually on all individual pages.
  • Poor scalability. If you need to add 100 new pages to your website, you will need to create all 100 pages manually, and every page will be built as a separate entity. The faster your website grows, the harder it will be to manage it.
  • Unable to offer tailored experience. Static websites allow limited or no personalization and customization for visitors. It’s possible to provide only limited real-time tweaks based on user behavior. As a result, static websites might not work for eCommerce sites, for example,  because it’s impossible to tailor the shopping experience to customers.

What is a dynamic website?

The word “dynamic” is often used to describe something that constantly changes or progresses. Dynamic websites generate content on the fly, loading it from a database. The dynamic content on pages can be tailored to the visitor’s needs (based on visitor behavior). This means a dynamic site can present different information to different visitors. Dynamic websites typically have a content management system (CMS) or a web framework like Ruby at its core, and they work best for websites that require frequent content updates.

Examples of dynamic websites include content-heavy portals (i.e., news resources like CNN), websites with user-generated content (i.e., social media platforms like Twitter), and various online services with user-driven content (i.e., online entertainment platforms like Netflix that offer recommendations based on viewing habits).

Pros and cons of a dynamic website

The list of advantages of dynamic websites include:

  • Ease of content management. Dynamic websites make it much easier to manage content on a website. Changes can be done in one place and applied across all pages. For example, a site owner can update company contact information and be sure that the relevant information is displayed across the entire website.
  • Easy to update the visual design. Since content and design on dynamic websites are separate, it’s easier to introduce changes to a page’s layout. If a website uses a CMS, it’s possible to use a different visual theme. It allows web creators to stay current with the latest visual design trends.
  • Better visitor experience. It’s possible to use mechanisms like user location and cookies to offer tailored experiences to visitors. For example, when you design a property booking website, you can use the visitor’s location to show them offerings in their area.

Because dynamic websites are more complex than static websites, they also have disadvantages:

  • More complex web design process. When you create a dynamic website, you must invest time in creating business logic. You will need to define rules on how content will be organized in a database (content structure) and accessed by visitors (define rules on how to display the content).
  • Higher cost of creation. Dynamic websites have a higher cost of creation because they are typically more hardware demanding (i.e., dynamic websites require database insurance) and require technical expertise (i.e., you need to know how to use a CMS or have coding skills).
  • Performance and security problems. Dynamic websites can be affected by various performance and security issues. Since dynamic websites have more technical components, each component can affect the performance and be vulnerable to a security breach.

Should I design a static or dynamic website?

There is no single correct answer to this question. The nature of your content and the experience you want to offer to your audience should define the type of website you want to build. If you’re starting to develop a new website, it’s safer to begin by creating a static one because it will help you launch faster and better understand how to effectively organize your information. Once you see how visitors interact with your website, you will know what content they want to see.

It’s essential to mention that these days, most websites belong to the category of hybrid websites. Hybrid websites have a set of static web pages (content that doesn’t change very often), as well as a set of dynamic web pages. For example, you can blend some static and dynamic functionality on your company’s website with a set of static pages (i.e., “About us,” “Our mission,” etc.), as well as dynamic ones (pages where content changes frequently, such as a blog or a private user space where users can track the status of their requests).

Getting started on your site

Whether you choose to build a dynamic or static site, it’s important to make sure that on both the frontend and backend, it is well designed and works well for your specific business needs. To get started, be sure to check out our ultimate web design course.

If you are interested in original article by Nick Babich you can find it here


One Page Website Design Best Practices & Examples

More isn’t always better when it comes to web design. A well-done one-page website can communicate the products or services of small businesses and individual professionals. Even if the site structure seems limited, its simple layout could be effective at enticing audiences to focus on a specific aspect of a business and driving conversions

Looking to create your own one-page website design? In this article, we’ll compile some examples to give you some inspiration.

1. Use Impactful Headings

How will you pitch your product in just a few words? Quack—a video recording tool—uses clear and concise headings. The heading “more than a video recorder” and the subheadings “tackle your bugs with full context” and “record bugs and capture network and console logs” summarize its features on the home page. If you have hesitations about getting the product, the call to action (CTA) “Add to Chrome – It’s free” will encourage readers to try it out for themselves.

One Page Website Design Best Practices & Examples

Source: Quack

2. Create Interactive Elements

Game designer Martin Gauer has a one-page portfolio with interactive elements. Upon clicking the page, you’ll find a Game Boy made out of 100% HTML and CSS that highlights his skills as a developer and creative. There is also more about his interests, skills and profession. Follow this example to pique people’s interest and unconsciously encourage them to continue interacting with your website.

One Page Website Design Best Practices & Examples

Source: Martin Gauer

3. Display High-Quality Photos

The Twenty Fourth Pizza & Meatballs website proves high-quality food photos are all you need to make your restaurant stand out from the crowd. To present products in the best light, you’ll find combined high-quality photos, menus and product details. Guaranteed to tempt customers with its mouth-watering products, this restaurant will surely receive orders from hungry visitors.

One Page Website Design Best Practices & Examples

Source: Twenty Fourth Pizza & Meatballs

4. Catchy Puns and Parodies

Having a consistent color scheme will instantly make your brand recognizable. No one understands this better than Apple Plug—a parody site of Apple products.

It jokingly offers a slim plug that fits in your headphone jack but won’t be removed. Since the page has an Apple logo and product photos akin to real-life Apple products, it fools individuals into thinking it was launched by the tech giant.

One Page Website Design Best Practices & Examples

Source: Apple Plug

5. Use Horizontal Scrolling

Experience design agency Neverland shows off its expertise via a centralized interactive image on its website. In fact, the first thing you’ll see is a 360-degree view of a conceptual work of art with horizontal scrolling. For those looking to learn more about Neverland, there’s more information about its services and notable clients too. All of these elements combined make for a polished and professional page that can make clients stop and stare.

One Page Website Design Best Practices & Examples

Source: Neverland Agency

6. Encourage Engagement

Relays is a branding studio that encapsulates what branding means. The page has a consistent blue and white color scheme highlighting its dedication to crafting consistent visual identities for a variety of clients. As another cool feature, you’ll have to click the CTA button “Next: Who” to reach the next section of the page instead of scrolling down.

One Page Website Design Best Practices & Examples

Source: Relays

7. Demonstrate the Product or Service

The goal of Alinea is to build a social investing app for crypto, playlists and stocks. Its website is simple: Just get the app, and you’ll see what your friends are investing in, share playlists, invest in cryptocurrency and learn bite-sized investment insights.

Combining high-quality photos, interactive graphics, consistent design and informative copy, this homepage does a great job of getting interested visitors to try the product themselves.

One Page Website Design Best Practices & Examples

Source: Alinea

8. Gamify the Experience

The Lucky Bones offers stunning 3D animated lucky charms through the Ethereum blockchain. It has a Lucky Wheel that users can spin to reap stickers, wallpapers and emojis.

This site is another example of how scrolling can enrich your branding and user experience.
Much like the popular “Spin the Wheel,” it has a horizontal scrolling feature to replicate a wheel’s movement.

A glove icon functions as a cursor or mouse pointer that changes colors each time you click. If you don’t want to scroll horizontally, hover the cursor to the lower right-hand corner. Here, you’ll find clickable buttons to reach a section of the web page with the click of a button.

One Page Website Design Best Practices & Examples

Source: The Lucky Bones

9. Orient Users With a Map

If you want to promote your apartment listings, a one-page website can do the trick. This Brooklyn-based property business has informational sections about the type of units, amenities and floor plans for interested tenants. Visitors can also find information about nearby Citi Bike stations, public transportation, parks, coffee shops and supermarkets and click the “Get Direction” button to find its location via Google Maps. Overall, this information makes it easy for tenants to decide whether they’re interested in checking out the property.

One Page Website Design Best Practices & Examples

Source: The Rafael

10. Play a Movie or Slideshow

From a visual perspective, The Art of Texture does an impressive job of introducing the artworks of its owner—Tom Lawrence. The artist believes that rubbish can be transformed into something beautiful which is conveyed by his images, videos and slideshows. Whenever the mouse pointer hovers over the creative pieces, you’ll find the title, details or click the image to view its larger version. Overall, the site’s clever use of visual elements are enough to pique the interest of art connoisseurs.

One Page Website Design Best Practices & Examples

Source: The Art of Texture

11. Showcase the End Result

Pixelmator Pro has impressive photographs and screenshots featuring its extensive collection of powerful professional image editing tools. Each individual section manages to highlight the product’s capabilities, be it its handcrafted dual-texture brushes, intuitive workspace, remove background tool and machine learning capabilities. If you’re looking to showcase the capabilities of your software, try replicating this example.

One Page Website Design Best Practices & Examples

Source: Pixelmator Pro

12. Make Navigation Effortless

Graphic design firm Panache has a website with fantastic scrolling experiences combined with animation effects and colorful transitions. The navigational links on the side make it easy for users to move from one section to the other. Instead of presenting a series of projects, the visual experience highlights the team’s skills despite not opening a new tab. It’s clear the designers are experts and have a lot to offer, which entices users to convert.

One Page Website Design Best Practices & Examples

Source: Panache

13. Keep it Simple

Typically, educational websites display a lot of textual data to prove their point. The one-pager of World Pollution diverges from this example with its interactive pages about the world pollution phenomenon. Clicking a number on the globe triggers pop-ups about environmental issues and potential solutions. It’s an effective way at keeping readers engaged about world issues across the globe.

One Page Website Design Best Practices & Examples

Source: World Pollution

14. Use Colors That Evoke Emotion

Jivati offers refreshing vodka seltzers with natural flavors. Its optimism and cheerful vibe are depicted in its vibrant color gradients, floating cans and fly-in typography.

Also, notable is the site’s compelling copy. Upon landing on the website, viewers can find information about its ingredients and variety packs that accurately represent the brand’s fun and bold personality. There’s also an option to check out where to buy the product and view retailer locations via Google Maps.

One Page Website Design Best Practices & Examples

Source: Jivati

15. Let Customers Speak Out

Washington, D.C. restaurant Falafel offers a close-up view of its dishes and, above all, an overview of its menu, which leaves a strong impression. As if that weren’t enough, it shares the ingredients of each item on the menu to convey that each item is all-natural, fresh and sourced locally. Having doubts about buying from this restaurant? Just head to the reviews section at the bottom to find five-star Yelp reviews from loyal patrons.

One Page Website Design Best Practices & Examples

Bottom Line

One-page websites are a testament to the fact that sometimes simple is better. The ideal one-page websites have seamless navigation, high-quality images and a compelling call to action. Here’s hoping this list of stunning websites inspires your own sites too.

If you are interested in original article by Monique Danao you can find it here