In this article you’ll discover:

• Full Page Templates — complete page layouts in one click
• Design System Style Guide — a live visual preview of your design system
• Interactive Onboarding Tours — interactive step-by-step learning right inside the editor

Full Page Templates

Finally, Full Page Templates are now available in Stackable!

Full Page Templates allow you to quickly transform blank pages into professional layouts instantly with a single click. Unlike our individual patterns that focus on specific sections, these page templates provide entire page structures, ready-to-use and adjust to your Block Theme and Design System as well.

When you open your Design Library, you’ll notice a new set of tabs – you’ll now see a “Patterns” tab, and a new “Pages” tab. The Pages tab gives you access to 40 Full Page Templates ranging from templates for landing pages, about us pages and more.

If you have utilized the Global Color Schemes in the Stackable Design System (you should!), then you can use them to further adjust your Full Page Templates!

When you insert a Full Page Template, you will be prompted to either replace the whole content of your post, or just append the design.

It’s important to note that you’re not locked in to the template you want to use. Every template is fully customizable after insertion, so you can change/delete/add portions freely.

Design System Style Guide

When you open the Design System, you’ll now see a new button labelled “Preview Design System”. When you click on it, the Style Guide will open, it’s a new interactive popup preview that shows exactly how your global colors, typography, buttons, and spacing will look across all your site.

The Style Guide is a useful tool for adjusting your Design System. Whenever you change something in your Design System, the Style Guide updates live and shows you a real-time visual feedback on how your changes actually impact your blocks and site.

Lastly, the Style Guide is very helpful if you have clients and you want to share with them your Design System. On the very top of the Style Guide, just click the Export as Image button, and the whole Style Guide will be downloaded as a PNG image into your desktop.

New Interactive Onboarding Tour

You will see new Onboarding Tours added in the Getting Started screen of Stackable that you can choose from. If you choose one, the block editor will open and a walkthrough will open which will help you get to know the different features and best practices with Stackable.

We gamified these tours a little to make it a bit fun, If you’ve finished doing a tour, a checkmark will appear on the tour button.

Learn by doing with tours that highlight specific interface elements, panels, and controls as you follow along. You can start with the basic concepts, and progress through more advanced features.

We’ve added 3 tours so far:

1. Build a page in seconds using the Design Library
2. Exploring the Stackable block settings
3. Apply Global Styles instantly

We plan to provide more tours in the future, as well as premium-specific tours so you can get the most out of your subscription.

Other Improvements

We’ve also fixed a few notable things in Stackable, mainly:

• Fixed a number of JavaScript editor warnings
• Fixed issue where columns can overlap when a carousel block uses infinite scrolling
• Fixed some minor accessibility issues in some blocks
• Dragging of the color picker in the Global Color Palette is better
• Better permissions for editor Rest API endpoints

Conclusion

We have quite a lot of improvements in this release of Stackable, and I hope that you continue to enjoy them. I particularly like the onboarding tours since there are a lot of things inside Stackable that people might not have been aware of.

If you have suggestions, or find some things particularly difficult to do in Stackable, maybe we can make a tour for it!

The Old Way: Design Per-Block

Stackable used to be only a provider of advanced blocks. Hence, the old way of using Stackable was you would add a Stackable block, tweak it, then copy and paste the block to other pages. Ugh. Very inefficient.

That was before, now our goal is all about providing you with an amazing workflow. We’ve introduced before the Design System — a central place where you can adjust the “design system” followed by all Stackable blocks. Now, we’re bringing it a huge step further.

Block Styles are here!

For every Stackable block, now you can save their current styles into a “Block Style“. You can then head over to any block and pick that Block Style as your new base style.

Here’s Block Styles in action:

Here’s how you use it. To create a Block Style, you just select any block, and you’ll notice this new area at the top that says “Block Style: Default” — this means that the block is currently using the “default” block style as its base.

Now, make sure that you have a block with some cool styles applied to it. Then you can click on your Block style and click on the Save New Block Style button. Enter in a name (optionally a slug for it, more on the slug later), then click on Save Block Style.

Afterwards, when you open the Block Styles for any block, you’ll see the new entry we just created. All same-type blocks will have this new option. To use it, just choose it.

It’s easy as that!

What Problem Do Block Styles Solve?

Block Styles is for Reusability and workflow efficiency!

Block Styles remove the need for you to copy and paste styles or blocks, and gives you more design workflow options at your disposal.

Now your blocks can adjust to your design requirements. If your design has 3 types of buttons: let’s say a normal one, a secondary one, and a plain one, each having their own distinct looks; you can simply save each design as a block style.. design once and and reuse everywhere.

This new feature gives you a ton of major benefits, let me show you below.

1. Block Styles Are Reusable Class-Based Styles

Whenever you create a new block style, under the hood, Stackable converts all your block options into a class-based style. This class is then used whenever a block uses the block style. Class-based styling (or in our case, should we call it block-based styling?) drastically reduces the amount of CSS generated in your page, resulting in leaner markup.

The slug I mentioned earlier is used in this class-based style naming. We allow you to change the slug because just incase the block style got deleted or is not available, you can quickly create a new block style for the missing one by using the same slug.

2. Block Styles Are Synced

In addition to being a form of class-based styling, all block styles are synced with each other. This syncing mechanism gives you the ability to easily tweak block styles after-the-fact.

If you want to update your block style with some changes, you can simply do your adjustments on a block that has your block style, then when you’re ready to sync your changes, just click on the Update style button. All blocks that use the block style will follow suit!

There is also an unlink block style option, in case you want the styles to be “un-synced” from the rest.

3. Block Styles Are Overridable

If you select a block style, Stackable doesn’t restrain you from doing additional adjustments to it (not unlike synced patterns where you can’t override the styles at all). You are free to further adjust the styles of your block. In fact, all the block options are still available for you to use.

Your changes go on top of the block style you picked, and block styles retain their syncable nature, even if you have additional adjustments.

To illustrate, let’s say you’re already using a block style for one of your buttons, but for this instance, you want the button to have a heavier shadow. If you do this one-off shadow adjustment, the block style would still be synced, and your button would still get any style update changes if any.

Other Changes

Version 3.18.0 comes with a slew of other changes and fixes, the most notable ones are:

• We have removed the Freemius SDK from the free version
• The Stackable settings sidebar is now called Stackable Design System
• Block Defaults feature has been sunset, replaced with Block Styles and the Design System – but still with backward compatibility

You can read the full change log here.

Conclusion

I hope you enjoy this new innovation as much as we did creating it! Block Styles has been on our radar for quite some time, and we’re so excited to finally get it out to everyone.

Hey Stack Fam, we have been busy innovating in the block editor space, and we’re bringing you yet another awesome update!

I know you want the details, so here’s what’s new in the Design Library once you update to Stackable v3.17.0:

• Overhauled Design Library interface
• All designs that adjust to your block theme AND design system
• 375 Completely new designs/layouts
• Styling options within the design library
• Integration with our Design System Color Schemes

Let’s quickly go through these one by one.

Revamped Design Library

When you open the Design Library from the button from the topmost bar of the block editor, you will now see this:

We’ve simplified the UI of the design library, now it boasts a good list of categories on the left, then the designs on the right.

At the top right corner, you have the refresh library button that allows you to fetch the latest copy of the design library from the cloud (this is done automatically daily, so this is just incase we release something new and it doesn’t appear right away).

You have your new Style Options on the lower left of the design library window. I’ll discuss this further below.

You can click to select one or more designs, then afterwards, add them all sequentially in your page. This makes it very easy to build a flow of a complete web page in a single go.

The Design Library Adjusts to Your Website

Probably the most incredible aspect of the design library is that all the designs adhere to our theme.json support and block style inheritance released a few weeks ago.

Basically, every design inherits styles from your block theme AND your design system, making everything fit your website no matter what block theme you are using.

What’s more is that when you change your block theme, your theme settings or your design system, the design library also adjusts!

Here’s what the design library looks like when using it across different block themes (click on each image to zoom into it):

Design library using the default Twenty Twenty Five theme, click the image to zoom in.

Design library using the Tove theme, click the image to zoom in.

Design library using Spectra One, click the image to zoom in.

Design library using the Catch FSE theme, click the image to zoom in.

Hundreds of Completely New Designs

We have created 375 completely new designs for the new design library.

These all new designs provide you with hundreds of different layout options that you can choose to build your pages on. We’ve designed these so that you can add different designs one after another and they should look great!

One thing to note from the new design library is that we are no longer using the term “UI Kits” — UI Kits were what we called groups of entries in the library that had baked in designs on them.

New Styling Options Within the Design Library

In the new design library, you will find a new section called Style Options on the lower left of the popup.

In this area, one of the things you can do is to turn on or off Section Backgrounds — this essentially turns on the block’s Style Tab > Background toggle. This is very helpful if you want to create alternating sections of different styles.

The background gets the colors from your Global Color Scheme.

Integrated With Color Schemes

In the Style Options, the Section Background, Background Scheme and Container Schemes all come from your Global Color Schemes.

Inside the design library, whenever you adjust the style options, all the designs update to reflect them — making it easy to insert different styled sections.

Here’s a video of me switching between the different color schemes (I’ve previously added this into my Global Color Schemes) and adjusting my entire design library! These changes are all tied up with your global design system, so you can adjust things globally even after inserting designs.

Other Notable Changes

Aside from the amazing features above, here are some changes that are included in this version:

• Since this is a complete revamp of the design library, you will no longer be able to go back to use the older designs.
• V2 blocks will no longer have the ability to change “layouts” in the layout tab. With the heavy changes from the design library, we needed to remove this old feature (it’s cool that we’ve had 4 years of backward compatibility)

Conclusion

Upgrade to v3.17.0 in order to use the newly revamped design library.

If you’re enjoying these stream of updates, please help spread the word in the socials. Let us know what you think of the new design library in our Facebook community!

I hope you enjoy the new design library. Thanks especially to those who participated in the closed beta, your feedback on the Design Library was invaluable in making this update our best one yet. Stay tuned for a lot more innovations to come.

Keep on Stackin’!

In our article about our roadmap and our direction, we mentioned that we are positioning Stackable to be the essential companion for the Block Editor for building complete sites. In order to get there, we are slowly rolling out some key features that will let you globally style multiple blocks and multiple pages.

Here’s a rundown of what’s new for you in Stackable v3.16.0.

New: Theme.json Support

Previously, when you add a Stackable block.. for example, a Stackable button block.. it would have a different look as a native one. Take a look here, for this I’m using the default Twenty Twenty Five theme:

One would think that this a small thing, and would be normally okay.. but after some thinking, we believe this isn’t so good. It would mean that Stackable (button) blocks would always look alien to your current website. From an efficiency standpoint, to just make Stackable blocks fit, you would always have to style them just in order.

Now you won’t have to do this. Starting now, Stackable will better inherit styles from your block theme. When you add a Stackable button block, it should look the same as a native button block.. Stackable and native headings will look the same.. blocks that have native counterparts would look the same.

Sounds simple enough, but it actually unlocks a new type of workflow: whenever you just need a simple button, then you’re free to use a native button block; but if you need more advanced options (like you need an icon for example, or you want a special hover effect), then you can just swap the button out for a more advanced Stackable button.

Another benefit of having this is it removes a layer of inefficiency – you no longer have to style Stackable blocks to match your block theme, they would just fit in right away.

New: Preset Sliders & Global Value Presets

Global Value Presets is also brought upon by our new theme.json support, but this deserves a special heading of its own.

In block themes and in theme.json, you can set preset values for colors, font sizes, spacing, margins, etc. This is part of what makes block themes great.

Now when you have preset values defined in your block theme, Stackable can use those values in different ways. For example, if you have preset color values defined in your block theme, these colors would also appear in Stackable’s color pickers (Stackable already does this prior to this new version).

Starting now however, font sizes and spacings will now also be supported by Stackable. Sizes and spacings defined in your block theme will now appear in various slider controls. Now you will be able to slide between different preset values like small, medium, large, extra large, or extra extra large for font sizes, gaps, margins, paddings and more.

Slider controls will now also have a preset/custom mode switcher that you can use to toggle between sliding between presets, or for absolute values if you need extra precision.

A few block attributes will have these preset sliders, to name a few:

• Font size
• Margins
• Paddings
• Border radius
• Column gaps
• Row gaps
• Inner column spacing
• Minimum column height
• Inner block gaps
• any more

If you need non-preset values, you can always toggle custom mode and use an arbitrary value.

Continuing with the ability of swapping between Stackable and native blocks, these preset values allow you to easily assign the same sizes for Stackable and native blocks! As an added bonus, if preset values in block theme that uses fluid typography will also apply them to Stackable blocks.

For Premium users, you will be able to change the definitions of these Global Preset Values, allowing you to customize and fine tune your presets across your entire site.

New: Global Typography Type Scale

Lastly, we’ve added the ability to assign a Type Scale for your Global Typography.

If you’re not familiar with what Type Scale is, check this site out called Typescale.com – basically it’s an elegant way to define a “scale” across your H1 to H6, body text and smaller. This ensures that the hierarchy of your typography looks pleasant to the eye.

In your Stackable Global Typography settings, you’ll now see a Type Scale drop down. To use it, simply pick a ratio, then all your headings and other text would change their font sizes appropriately.

This also works well in responsive mode. You can set different Type Scales for tablet and mobile views. This new option gives you a quick way to make your headings fit well in smaller screens.

Backward Compatibility

Backward compatibility is very important to us. If you’re updating from a lower version to 3.16.0, the Theme.json Support and Value Presets features would be disabled by default. This is how we gracefully implement changes in Stackable.

We do this so that nothing would change in your existing website, and Stackable would work (almost) the way it would as before you updated.

If you want to enable these new features, then you can head over to the Stackable settings. For new installs of Stackable, these options would be enabled by default.

For those updating, to enable Theme.json Support, tick Miscellaneous > Inherit Block Style from theme.json

To enable Value Presets in sliders, tick Editor Settings > Editor > Use Size Presets by Default.

Don’t forget to save your changes.

Conclusion

This update is a pivotal moment for Stackable.

Our goal is that with these new updates, you will only need to tinker around with individual blocks if you’re building something “one-off”. What we envision is that simply adding Stackable blocks would always fit your website, allowing you to build websites and pages more efficiently.

Direction of Stackable

We have had a number of fruitful chats with Stackable users and non-users during last WordCamp Asia 2025 where we were a sponsor (a retrospective article is still on the way). And we got to know people’s workflows, their preferences, reasons why they built custom blocks, why they used solutions, etc. Based from all of those discussions, we have made careful adjustments to our roadmap.

What we envision is that when you are creating a new website, usually the first step is to install/configure/create a block theme, and then immediately afterwards, Stackable can be there to help right away. This might be a simple statement, but this mindset would mean that we would need a few things:

• Full theme.json support – Stackable will inherit things from your block theme. When you add a Stackable button, it will look like a native button, but with more controls.
• A standardized and global design system – No more designing block-by-block. Just design once, and the rest of your blocks/site will have the same design.
• A more usable Design Library – We will be focusing on providing more “layout” and wireframe type of designs. Designs will not look alien from your site, it will adapt to what your site already looks like.

With the above, Stackable will no longer be just a mere provider of “more advanced blocks”. Instead, Stackable will be the essential companion for the Block Editor for building complete sites.

Now on to the roadmap changes!

Adjustments in the Roadmap

Where we left off

We left off the previous roadmap with the Repeater Block and Forms Block as the next items to be tackled. We were in the middle of developing the Repeater Block and were having some progress. However, the Repeater Block was posing to be quite a challenge to finish, and instead was actually hindering the development of other things we want to accomplish.

Because of this, we have decided to skip on the Repeater Block for now and pursue other things that we feel are more direly needed by the community.

This is not to say that we will no longer be doing these blocks anymore, we will still be exploring these, but we have just delayed them for now.

Other adjustments

We’ve gone ahead and pushed through with some of the new features which were further ahead in the previous roadmap. These are now finished:

• Granular Plugin Settings
• Icon Library (a new addition)
• Global Design System (a must read!)
• Global Color Scheme (a new addition, if you love class-based design, then you’ll love this one!)

In line with the direction above, we’ve added in a new entry for Theme.json Support – which at this time of writing, is currently undergoing QA and testing.

Check out the full roadmap here.

We rethought how we could help agencies, web developers, and designers scale their projects faster, easier, and more efficiently. The result? A massive update that takes designing with the WordPress Block Editor to the next level.

With this update, we’re introducing a few global features:

• Global Spacing & Borders – control column spacing, margins, container paddings, and borders across all blocks
• Global Color Schemes – assign colors across all blocks site-wide, create custom schemes.
• Font Pairs – quickly apply typography sets to all text blocks
• Global Buttons & Icons – ensure uniform styling for buttons and icons throughout your site.

Stackable Global Design System

We’re calling this new global set of features the Stackable Global Design System. Now, every new block you add will automatically inherit these styles, saving you time and keeping your designs cohesive.

Using the Global Design System gives a you some amazing benefits:

• Changes are global, so your design system will affect your entire site
• It will drastically decrease your page size
• Less time tinkering with multiple blocks

This update is just the first phase of our Global Design System, and we will be further enhancing things in the upcoming updates.

What’s New in the Stackable Global Design System?

Global Color Schemes: A Smarter Way to Apply Colors

Forget manually setting colors for each block. With Global Color Schemes, you can define site-wide color sets that automatically apply to blocks, backgrounds, containers, buttons, and more.

Global Color Schemes comes with preset color combinations that look good out of the box.

But what really makes this new feature exciting is the ability to modify colors for all blocks across your website.

Even if you create color schemes, you are not bound by them, you can either override them through the block settings, or if you have created multiple color schemes, then you can assign another color scheme any time.

What’s more, colors from your color schemes will also be added to the color picker so you can use any one of the colors if you want to further customize your website.

You can define different color sets for various block states, allowing you to create visual contrast and highlight key areas of your design effortlessly.

Here’s how it works:

• Base Color Scheme – The default colors applied to all Stackable blocks.
• Background Mode Color Scheme – Used when the background toggle is turned on for a block, allowing you to set a distinct color for blocks meant to stand out.
• Container Mode Color Scheme – Applied to blocks that use the container feature, giving you even more control over structured layouts.

Why This Matters

This means you can introduce variations to your blocks effortlessly, like highlighting containers or maybe even the middle column in a 3-column section.

Additionally, for block sections where you toggle on Background or Container, there is a Color Scheme menu where you can manually select which color scheme it should follow.

Font Pairs: Beautiful Typography in One Click

Typography is a key part of any design, and now, setting it up is easier than ever. Now we’ve always had Global Typography, but we’ve enhanced it with the addition of preset font pairs.

Achieve a professional, polished look with these preset font pairs, allowing you to apply complementary typography combinations to your headings, body text, and button text effortlessly.

You can also create your own font combination by clicking on the plus (+) sign. Set specific typography settings for each heading level and body text.

Global Spacing & Borders: Precision Control Over Layouts

This is a new addition to Stackable’s Global Design System. With Global Spacing & Borders, you can maintain structured, well-balanced designs by managing margins, paddings and borders globally.

This way, you can make effortless adjustments without manually adjusting each block one by one.

Here, you can control the spacing, borders, and shadows for columns, backgrounds, containers, and images.

Global Buttons & Icons

Buttons and icons play a crucial role in UI/UX, and now you can ensure they always match your design system. Another addition to the Stackable Design System is the Global Buttons & Icons.

With this, you can easily define the sizing, borders, and shadows of your buttons, icons, and icon lists.

How this Transforms Your Web Design Workflow

Previously, building websites on the WordPress Block Editor with Stackable meant adding blocks one by one, and designing each block and copy and pasting the styles to other blocks. Now, with the Global Design System, this means you get to customize all blocks from one single panel.

From adding blocks or wireframes, you can move to the Global Design System to set your colors, typography, and spacing then add your content from there.

Experience the Future of Web Design Today

The Stackable Global Design System is now available in the latest Stackable update. This feature is available for free, with a few more presets and options available only for premium users.

Take control of your site’s design like never before and build websites faster, smarter, and more efficiently. Update to the latest version of Stackable now and transform your workflow with the new Global Design System!

Let’s dive into what’s new and how these updates can elevate your web design experience.

Icon Library: Save, Reuse, and Customize Your Icons

Icons play a vital role in making your designs visually appealing and user-friendly. With the new Icon Library, managing your custom icons has never been easier.

Here’s what you can do with the Icon Library:

Save Uploaded SVGs: Once you upload your SVG icons, you can save them to the Icon Library for future reuse.

Streamlined Icon Picker: Saved icons will appear first in the icon picker, making them easy to find.

Rename and Update Icons: Assign custom names to your icons, update them with new files, and keep everything organized.

Search by Name: Quickly locate specific icons in the picker by searching for their assigned names.

This feature is perfect for maintaining branding consistency across your projects, saving time and effort in the process. You will find the Icon Library in the Stackable settings in the Block Editor.

Granular Plugin Settings: Full Control, Your Way

We’ve completely overhauled the Settings menu to give you more flexibility and control over how Stackable works. Say goodbye to the old cluttered settings page! With the new tabbed and organized settings, you can now navigate and customize your experience using Stackable with ease.

Right off the bat, when you access the Stackable settings page, you will see that it is now divided into these tabs: Editor Settings, Responsiveness, Blocks, Optimization, Global Settings, Role Manager, Custom Fields, Integration, Miscellaneous

Each tab focuses on specific features, making it easier to find what you’re looking for.

New and Improved Settings

With the new interface comes a new range of updated settings that allow you to fully customize your user experience with Stackable.

Toolbar Settings

Now you can customize the various toolbar buttons that come with Stackable. This is especially helpful if you find that you do not use some of the Stackable toolbar buttons, you can enable or disable buttons that Stackable adds to the toolbar, tailoring the editor interface to your workflow and keeping it as streamlined as you prefer.

Enable/Disable/Hide Blocks

Previously, you could only enable or disable blocks. Now, you can enable, hide or disable blocks completely.

Here’s what each block state does:

• Enabled – The block is available in the Block Editor as it would normally.
• Hidden – The block is hidden from the block inserter. However, if you have this block already in the page, then you can still edit / use it.
• Disabled – The block is not registered in the Block Editor. If you have this block in a page, and edit it, it will show up as an “unsupported” block.

We have “Smart Disabling” built-in our blocks, this means that when you use designs from our Design Library or block variations that use a disabled block, they are automatically substituted with relevant core blocks. This way, disabling a block will still let you use other Stackable features.

Some Stackable blocks need to use other blocks for them to work correctly. For example, the Accordion block uses the Icon Block for it’s toggle arrow (well it does some other things more behind the scenes) – so when you disable the Icon Block, the Accordion block would not function correctly anymore. In essence, the Accordion block requires the Icon block to be enabled, and the new settings inform you of this.

Search Settings

Navigating the settings just got simpler! Use the new search bar to quickly locate a setting. The relevant tab will highlight and other unrelated options will become hidden, guiding you directly to the option you’re looking for!

Turn Off Stackable Settings

For users who do not use global settings or prefer minimizing their editor interface, you can now turn off Stackable settings entirely. However, please note that turning this off will disable access to the global settings, so you won’t be able to make changes to them while this option is enabled.

Why These Updates Matter

These new features are designed to give you greater control, efficiency, and customization. Whether you’re building a personal project or managing a large-scale site, the updates ensure that Stackable adapts to your workflow and preferences.

The Icon Library streamlines the creative process, while the Granular Plugin Settings give you full control and flexibility when it comes to managing plugin functionality.

Try It Out Today!

Update your Stackable plugin to explore these new features. We’re excited to see how they enhance your web design process! If you have feedback or suggestions, feel free to reach out—we’d love to hear from you.

Stay tuned for more updates as we continue to improve Stackable and empower your creative potential!

The design of your blog plays a critical role in how your content is perceived by your website visitors, from the choice of typography and background colors to the layout and overall visual hierarchy.

In this guide, we will cover topics such as the selection of the right WordPress theme, the utilization of page builders like Stackable right within the WP Block Editor, and most importantly, how you can easily create your own WordPress blog page design.

By the end of this article, you will be equipped with the knowledge and tips on how to create a WordPress blog that is not only appealing but also optimized for success.

Benefits of a Well-Designed Blog

A well-designed blog page offers numerous benefits that can significantly enhance your online presence and audience engagement. Here are some key advantages:

Improved User Retention

A cluttered or poorly designed blog can be overwhelming and lead to high bounce rates. On the other hand, a clean and organized layout with clear navigation makes it easier for readers to find and consume your content.

Having an aesthetic and user-friendly blog design can help retain your existing audience and encourage repeat visits. Additionally, incorporating elements like images, videos, and interactive content can break up long text and improve the overall user experience.

Enhanced Brand Image

A WordPress blog design should reflect your brand identity, and a well-crafted layout can significantly elevate your brand’s perception.

A great blog design can help your content stand out, increasing the likelihood of shares and maybe, attracting new readers to your site. Plus, consistent branding elements, such as color schemes, typography, and imagery, can reinforce your brand’s recognition and create a lasting impression on your audience.

Finding the Perfect WordPress Theme

Choosing the perfect WordPress theme for your blog is a crucial step. It’s the foundation of your website that will significantly impact its overall design and functionality.

With thousands of themes available, both free and paid, the process can be daunting. However, by considering your specific needs and preferences, you can narrow down your options and find a theme that’s perfect for your blog.

Exploring WordPress Themes

One of the best places to start your search for the perfect WordPress theme is by exploring theme marketplaces. These platforms offer a vast collection of themes with advanced features and customization capabilities. Some popular theme marketplaces include:

ThemeForest (https://themeforest.net/): This marketplace boasts a wide range of premium WordPress themes, often featuring live previews and user reviews.

WordPress.org (https://wordpress.org/themes/): The official WordPress theme directory offers a vast collection of free or freemium themes, many of which are highly rated and regularly updated by the WordPress community.

Core WordPress releases themes every year that are built-in to your WordPress website. One great free theme is the Twenty Twenty-Four theme, which sports a modern and minimalistic design. It’s highly customizable in the WordPress Site Editor and it includes block patterns that you can easily insert into your page with just a click.

If you have the budget for it, Premium themes can be an excellent choice for bloggers that are seeking for more features. Premium themes typically offer more advanced customization options, a wider range of layouts, and even provide online support if you encounter any issues.

One pre-made theme you could consider is Blocksy, which was designed to work seamlessly with the WordPress Block Editor. It has both a free and a premium version. The free version already includes extensive customizations and starter site templates that could get you started building your website in no time. You can find it right within the WordPress theme directory.

Regardless of the theme that you select for your blog, the key is to select a design that resonates with your brand’s personality and provides an optimal user experience for your audience.

Using Page Builders

Page builders are tools that allow you to create custom page layouts and designs using a visual interface, without the need for extensive coding knowledge.

WordPress comes with a built-in page builder called the Block Editor, which enables you to create pages by combining various blocks, such as text, images, galleries, and more. However, as of writing, it still lacks additional customization options that you might need to design your blog. This is where third-party page builders come in.

One popular page builder for WordPress is Stackable, a free plugin that provides highly customizable blocks to help you create stunning blog page designs. Stackable is designed with a user-friendly interface that works within the WordPress block editor. It offers pre-designed templates called UI Kits, and features that make it an excellent choice for bloggers and website owners who want to create aesthetic blog pages.

Best Practices

When using page builders, it’s essential to follow best practices to ensure your blog page design is visually appealing, user-friendly and optimized for performance. Here are some tips to keep in mind:

Simplicity and Consistency

While page builders offer a plethora of design options, it’s important to maintain a simple and consistent layout throughout your blog. Avoid overwhelming your visitors with too many elements or conflicting styles. Consistency in typography, color schemes, and layout can enhance the overall user experience and reinforce your brand identity.

Stackable’s Global Colors and Typography makes this easy for you. You can define a consistent set of colors and typography setting that can be applied across all blocks on a website, ensuring a cohesive design while simplifying the process of site-wide styling.

Mobile Responsiveness

Ensure that your blog page design is mobile-responsive because your audience may access your content from various devices, including smartphones and tablets. The WordPress Block Editor includes live previews for mobile and tablet but lack the capabilities to exactly control or customize website elements for different devices. This is where page builders can also come in handy with additional responsiveness settings.

Performance Optimization

Excessive use of large images, animations, or resource-intensive elements can slow down your site’s loading times. Optimize your images and minimize the use of unnecessary elements to maintain optimal site performance. You should also be mindful of how a page builder impacts your blog’s performance. So be sure to select one that does not add any bloat to your website.

Accessibility

Design your blog page so that it’s accessible to users with disabilities or special needs. This includes incorporating alt text for images, ensuring color contrast, and providing alternative navigation methods for users who rely on keyboard navigation or screen readers.

User-Centric Design

Ultimately, your blog page design should prioritize the needs and preferences of your target audience. Conduct user research, analyze user behavior data, and gather feedback to understand how your visitors interact with your blog. This information can help you make informed design decisions that enhance the overall user experience on your website.

Customizing Your Blog’s Appearance

Customizing the appearance of your WordPress blog is crucial for creating a visually appealing and engaging experience for your readers.

Choosing the Font and Colors of Your WordPress Blog

The fonts and colors you use will shape the overall aesthetic and readability of your blog.

Google Fonts offers a library of open-source fonts and icons that you can use for free. You can easily add it to your WordPress website by adding it manually, embedding it to your website, or downloading a plugin.

If you’re having a hard time selecting a font, a great tool you can check out is Fontpair which curates Google Font combinations.

When it comes to colors, create a palette of colors that not only enhances your blog’s aesthetic but also ensures readability and accessibility. Tools like Color Magic AI can help you generate stunning color combos based on a prompt you provide, and Coolors allows you to browse trending color palettes to find the perfect scheme for your blog.

If you already have branding colors, use them consistently. Additionally, make sure to use high-contrast colors to make your content readable. You can use tools like the WebAIM Color Contrast Checker to see if your text remains legible, even for users with visual impairments.

Select the Perfect Layout for Your WordPress Blog

The key to an effective layout is to prioritize the user. How do you want the user to consume your content? How do you want to engage with your audience? These are some questions you should ask yourself in choosing your blog’s layout.

Here are some common layouts you may consider:

Classic

A single column layout that displays your blog posts in reverse chronological order. This makes your most recent post the first one they encounter. This typically includes a sidebar alongside your main content. It’s a great option if you want your website visitors to have a peek at the contents of your posts.

Grid

A grid layout arranges your posts in a grid format typically accompanied with the featured image. This layout makes it easy for your audience to navigate through the articles you have on your website.

Masonry

A similar layout to the grid, but it stacks the posts like bricks on top of each other. If your blog is heavy on visual content, then this might be a great option.

Carousel

This showcases your blog posts in a horizontal layout that your audience can scroll through. It can scroll automatically so that the website visitors can see what content you offer on your blog.

When you finally select your layout, it’s essential to strike a balance between providing ample information and avoiding clutter. Overcrowding with too many ads, or a jammed sidebar can overwhelm visitors and distract them from your primary content. Instead, carefully select the elements you want to add that will complement your main content and provide relevant, value-adding information.

Optimizing for Different Devices

Responsive web design is crucial for providing an optimal browsing experience across various devices. It’s not enough to design your website for desktop anymore, you must ensure your blog page looks great and functions seamlessly regardless of the screen size or resolution.

Typically, there are three main screen types: desktop, tablet, and mobile. Your blog should maintain a consistent layout on each of these screen sizes. To achieve this, you can follow the principles of responsive design, which were first introduced by Ethan Marcotte in a 2010 post on A List Apart.

The goal of responsive design is to offer every user, irrespective of their device, a consistent browsing experience.

Responsive Designs

To ensure your WordPress blog is mobile-responsive, you can make use of the built-in WordPress live previews in the Block Editor. This tool allows you to view your site’s design across different screen sizes, including desktop, tablet, and mobile in real-time.

Responsive web design also utilizes CSS units that are relative like EM and REM for fonts; VH, VM, or % for other elements such as images or icons. By default, the Block Editor uses pixels, but you can change this to relative units within the settings to ensure your design scales beautifully across all devices.

Page builders usually offer additional responsiveness settings that provide granular control to set different values for block elements based on screen size.

Stackable, in particular, also offers the ability to hide or show blocks on desktop, tablet or mobile. You can also adjust responsive breakpoints. to set when your design should adjust to a different layout.

Testing Across Devices

While the WordPress block editor provides a convenient way to test responsiveness, you should still test your site across different browsers, operating systems, and devices.

There are various online tools and emulators available that can streamline this process if you don’t have access to multiple physical devices. Some popular options include:

• Google Lighthouse: Google’s own tool built-in to Chrome to assess your site’s mobile-friendliness
• MobileTest.me: Tests your site across six popular mobile device emulators, including iPhone 5, HTC ONE, and Google Nexus.
• Am I Responsive: Enter the test URL to see results for generic devices. Click inside each screen to scroll and interact with the site.

Additional Resources and Tools

Here are some useful plugins and design resources to consider when creating a stunning blog page design on WordPress:

Useful Plugins

1. WPForms: A user-friendly form builder plugin with pre-built templates, conditional logic, and integrations with popular services like PayPal, Stripe, and HubSpot. You can use this to create contact forms, collect email newsletter subscribers, and more.
2. Imagify: An image optimization plugin that compresses and optimizes your images, reducing file sizes while maintaining quality.
3. RankMath : A plugin that you can use to optimize your content for search engine rankings.

External Design Resources

1. Heikei: A website that offers stunning backgrounds and visuals for your blog or website.
2. Designspiration: A platform where you can save and explore inspiring designs to fuel your creativity.
3. Shots: A website that provides easy mockups for products and thumbnails, useful for showcasing your blog or website design.
4. Pexels: A library that offers high quality and royalty-free stock photos and videos.

These resources are at your disposal so you can streamline your design process for your WordPress blog.

Conclusion

In this article, we’ve explored different tips, tools, and resources you can use to create a stunning WordPress blog page design. This includes selecting the right theme, utilizing page builders, optimizing layouts for responsiveness, and using essential design elements like fonts, colors, and responsive layouts.

Now it’s up to you to find that sweet spot between reflecting your brand’s identity and creating a design that resonates with your target audience.

Stackable PHP Execution Times Now Up To 2x-3x Faster

V3.13.0 brings you the fastest Stackable yet. In this update, we have focused on significantly enhancing the server performance of Stackable, and we have seen up to 2x to 3x plugin code execution speed improvements!

All websites made with Stackable will benefit from this, however, the performance update is expected to be felt significantly more by those hosted on shared hosting or affordable hosting platforms, where resources are limited. By optimizing the efficiency of Stackable, this update helps to significantly reduce the load on shared servers. This gives websites faster response times both in the WordPress backend and frontend for a smoother overall user experience!

To help you visualize the improvements in Stackable, here are some speed benchmarks we made. For this, we used Code Profiler, which is a plugin that measures the PHP execution times of the plugins and themes present in a website. All tests were done on the free versions of all plugins. The names in the benchmarks are hidden since they’re not important, it’s the relative measurements that we care more about.

Benchmark #1: Stackable Before & After Update

So how much did Stackable’s execution times improve? We benchmarked the before and after the performance update of Stackable across different website and server environments and here are the results:

Based on the above, it’s clear that there is a huge performance increase! You’ll also see though that the amount of improvement is different per server environment. Run 2 didn’t see much of a difference as our setup there is already fast.. but run 5 which was from an actual live website removed 2 whole seconds off!

Benchmark #2: Before & After in a website

Next up, how does Stackable’s performance improvement look like in an actual fully functioning website?

We benchmarked our staging website to find out how much Stackable has improved, we kept all the plugins we’re using active – these range from security plugins, performance plugins to utility plugins. Here are the results:

Our site already is performant off the bat, so the improvement that we see in terms of milliseconds shaved off is minimal. However, a small amount of improvement goes a long way if you have thousands of visitors that go to your site!

Benchmark #3: Stackable & other block libraries

So far so good, but we were also thinking: how does Stackable’s performance improvement stack up against other block libraries? We got some of the top block library plugins that have similar offerings of blocks and functionality and did a comparison. Here are the results:

Benchmark #4: Stackable & page builders

Now for a bit of apples to oranges comparison, we were curious on how Stackable goes against the top page builder plugins. We thought we might throw this into the mix since the Block Editor alongside Stackable is quite a capable alternative to building full websites. Here are the results:

Benchmark Results

As we mentioned earlier, the results seem to be more significant if your site is using shared resources. But nevertheless, you may be able to see x2 to x3 code execution improvements with Stackable. This can improve website performance, not just in terms of speed but this will lead to a smoother user experience for you and your website visitors!

You can also test this yourself and see how Stackable’s performance has improved in your own websites. Results will vary depending on the website, hosting, and other active plugins. You can find Code Profiler in the WordPress Plugin Directory!

If you’re curious on what exactly we did to achieve this, we meticulously went through a lot of the internals of Stackable and optimized the following:

• Database queries: We refined some long running database queries to make them faster
• Various functions: We have fine-tuned the functions within Stackable to run more efficiently
• Post handling: We’ve refactored how Stackable queries and deals with posts
• Block registration: The way Stackable loads blocks has been optimized, minimizing disk reads
• Option autoloading: We’ve removed autoload options so that they will only be loaded when needed

Prepare to experience the fastest, most efficient website building yet! Update to the latest version of Stackable and see the difference yourself.

Other Stackable Feature Updates

We have released a number of bug fix and feature updates since our last major feature update (V3.12) and we’d like to take this time to let you know about some of the significant updates we’ve introduced.

Feature Update 1: Infinite Carousel

A lot of people have been asking for the Carousel block to have the option to infinitely scroll. In V3.12.12, we added the Infinite Scroll option in response to that. You will find it in the Layout panel of the Carousel block.

This new setting allows for endless scrolling of content, making it perfect for showcasing numerous slides seamlessly. See it in action:

Feature Update 2: Icon List Block Revamp

Our Icon List block has undergone a comprehensive revamp to address user feedback regarding the difficulty of aligning and sizing icons.

In our revamped Icon List block, we’ve introduced enhanced alignment options to give you more control over the appearance of your lists.

Here’s a breakdown of how these alignment options work:

• List Item Alignment: This option applies to each individual list item within the list. If “Right” is selected, for instance, each item will align to the right within the list.
• List Alignment: This option is available when the “Full Width” toggle is turned off. It controls the alignment of the entire list within its container. Choosing “Center” will center the whole list horizontally on your page.

Additionally, the Icon Vertical Alignment control adds another layer of customization. This adjusts the vertical position of the icons relative to the list item content. Whether aligned at the top, middle, or bottom, this setting positions the icons harmoniously with the Icon List block’s text.

The Icon List block now comes with the option to have borders between each list item. These are available in styles such as solid, dashed, or dotted. Like all border controls within Stackable, you can customize the thickness (Border Width) and color (Border Color).

Feature Update 3: Columns Can Now Wrap in Desktop

Previously, the Columns block only supported wrapping in mobile and tablet views. Recognizing the need for more versatile design options, we have extended this functionality to desktop views as well!

Users can access the “Allow Column Wrapping” toggle in the layout panel. When enabled, additional controls will appear beneath the toggle, providing the option to adjust the width of each column individually.

This ensures that users can precisely tailor the column layout to meet specific design needs and preferences.

Feature Update 4: Color Picker Opacity and Gradient Picker

Our updated gradient color picker now features multiple color stops and customizable angles, enhancing design flexibility. This tool is available in most Stackable settings involving color, allowing users to create intricate and dynamic color gradients that perfectly match their site’s aesthetic.

Additionally, the color opacity control was moved inside the color picker. This makes for a more efficient design workflow since all color settings are now located in one place.

Other Notable Feature Updates

The 4 above are the most asked for features that we’ve released, but here are the other features that we have been able to push out:

• Dynamic Content post search improvements
  • While picking which post to display dynamic content from, searching by post ID is now better handled, and more search matches will now appear in the post picker.
• WooCommerce Product Description new option
  • We added the option to disable stripping of HTML tags in the Product Description field if you need to preserve any HTML formatting when displaying them.
• Images and background images can now be inputted via URL
  • Now you are not forced to use an image from your Image Library for image blocks and background images, you can use any URL.
• Accordion Block
  • We’ve upgraded the Accordion block with improved schema to enhance its functionality as a Q&A section. This feature addition was highly requested by users. When a group of accordions is used as an FAQ section, this will make it easier for search engines to recognize it as so.
  • You can now assign anchor links to Accordion blocks. This allows for direct navigation to the accordion and its automatic opening. This streamlines user experience and access to information.
• Better Border Controls
  • Border customization has been refined, with options to adjust each corner’s radius individually. The border color picker also now includes an opacity slider, giving you more precise control over the border effects.

Conclusion

This update not only boosts the speed and performance of Stackable blocks but it also brings a host of new features and improvements.

From the infinite scrolling of the Carousel block to the more flexible and aesthetically pleasing Icon List block. Every feature has been designed to make your web building experience with Stackable more intuitive and enjoyable.

Update to the latest version today and unlock these powerful new capabilities to create stunning, efficient websites!

Creating urgency and a sense of scarcity encourages customers to make decisions quickly, preventing missed opportunities.

We often see this used as a sales tactic called “Scarcity Marketing”. An example would be when a business holds a sale for a limited time of 3 days. Another would be offering limited edition products in small quantities, garnering a sense of exclusivity.

This tactic leverages the principle that people are more likely to purchase something more readily if they believe it is in scarce supply or available only for a limited time. This approach taps into the fear of missing out (FOMO) concept and can be highly effective in boosting sales.

In the world of web design, we can also apply this tactic and boost conversion. But how? How exactly can you create a sense of urgency on a website? One of the easiest and most common ways is to implement a countdown timer.

By using countdown timers, marketers can significantly enhance user engagement and increase the likelihood of conversions on a website. In this article, we’ll walk you through how you can create an effective countdown timer.

Step-by-Step Guide to Creating an Effective Countdown Timer

If you want to add a countdown timer by yourself, you will find that there are many different ways to do it. A route you can go for is to code it with HTML, CSS and Javascript. However, if you have little to no knowledge in coding, this might prove difficult.

In this tutorial, we’ll create a countdown timer using Stackable. Stackable offers a powerful set of tools and features that can significantly enhance the creation of websites. Stackable provides pre-made blocks built to work with the WordPress Block Editor. This includes the Countdown block, which allows for extensive customization. It’s the perfect tool to set you up for success!

Step 1: Installing and Activating Stackable

Begin by installing and activating the Stackable plugin on your WordPress site. You can find the Stackable plugin for free on the WordPress block directory.

Step 2: Define the Purpose

Determine what you are counting down to. Is it a sale, product launch, event, or something else? With this, you then have to decide what you want to achieve with the countdown timer, such as increasing sales, boosting event attendance or creating buzz around a product launch.

As an example, here we have a website for a hypothetical productivity app created using Stackable blocks:

In this example, it doesn’t exactly create the sense of urgency we want to impose on the website visitor. The website visitor wouldn’t exactly know until when the sale will be held either.

Here, we’ll be counting down to the end of a sale and the goal is to increase sales.

Step 3: Determine Prominent Placement

You have to strategically position the timer in a visible spot on your website. Common places are on the homepage hero, a sticky banner on the top or bottom of the page, and in some cases, a pop up banner that appears as a user scrolls on the page.

Let’s add the Countdown block on the hero, right beside the pricing.

Step 4: Configure the Countdown Timer

Choose the target end date and time for your countdown. With the Countdown block selected, go to Style tab > General panel and input the date and time when this countdown will end.

You can manually select the Timezone with Stackable’s Countdown block. You may select a specific timezone or select Local Timezone. Local Timezone means that the Countdown block adapts to the timezone of the website visitor. However, we want to keep this number uniform for all users across different timezones. Let’s select the New York (Eastern) option in the Timezone setting.

In the General tab, you will find other settings such as the Action on Expiration .

Now, in the Action on Expiration option, you have three options to choose from: None, Hide Block, or Display Message Upon Expiration. Let’s select Display Message Upon Expiration so that the website visitor would at least be informed that the sale has ended.

You will then find a new panel in the Style tab called “Expired Message”. This is where you can input the text that will appear once the countdown has finished.

In the Content field, write the text that you want to appear once the countdown is done. Here, we put “You just missed it! Sale has ended ”

Step 5: Impose Urgency and Relevance

The message accompanying the timer should create a sense of urgency but must also be relevant to the audience. You could use phrases like “Offer ends soon!” or “Available only for a limited time!”. These phrases can motivate users to act quickly.

Here are some other examples of slogans you can use to impose that urgency and relevance:

• Sale ends soon
• Hurry!
• more

In our example, we changed the accompanying message to: “Sale ends in”

Step 6: Customize the Countdown Timer

Stackable blocks automatically adopt the Typography of your website’s theme. If you want to further customize the blocks, you can do so with Stackable’s extensive settings and controls. This is where you can apply your website’s branding and aesthetic to catch the eye of your website visitors.

Here, we just changed the Text Color of the Digits, and adjusted some of the typography, such as the Font Weight and Font Transform.

Step 7: Add a Call to Action

Strategically place a clear and compelling call to action near the countdown timer to enhance its effectiveness. This is what will ultimately help you achieve your goal.

The CTA will reinforce the message of urgency or the importance of completing the desired action immediately. More than that, we streamline the decision-making process for the user. Instead of scrolling further down the page, we give them the opportunity to take the next step right then and there.

Here are some examples of CTAs you could use in conjunction with a countdown timer:

For E-commerce and Sales Campaigns

• Shop Now – Sale Ends Soon!
• Claim your discount now

For Event Registration

• Register now. Spots are limited!
• Sign up before it’s too late
• Reserve your seat today

For Product Launches

• Pre-order now to guarantee yours
• Be the first to experience

For Charity and Fundraising

• Help us reach our goal now
• Last few (time unit) to give

How could we do this in our example? The button text in our homepage’s hero section is simply “Get it now!”. This doesn’t exactly enforce a sense of urgency so we can improve on that.

We’ve changed the button text to: “Get it before it’s gone!”. This is an improvement from just the typical button text that we usually see.

Step 7: Preview and Launch

Now you’ve set up your countdown timer, it’s time to preview how it looks like in the frontend. You could also make sure to check if it works well across various browsers and devices.

If it’s looking great, now it’s time to determine the best time to launch this countdown based on your website’s audience’s behavior. For example, if you’re launching the countdown for a sale, it might be best to wait until the afternoon. This is usually when people get off work and have more time to browse online.

Once your countdown timer is live, you may want to monitor its initial performance. First, for any unexpected issues that might arise. This includes checking the website load times, functionality issues, or user experience problems.

Second, for how well it’s performing against your goal. Again, if the goal is to boost conversions, we want to make sure our countdown timer is achieving that. You can utilize web analytics tools such as Google Analytics and Google Tag Manager to track users’ engagement with your countdown timer.

Conclusion

Creating urgency with countdown timers significantly boosts engagement and conversions. Using Stackable for WordPress, we’ve shown how to effectively set up and launch these timers. Countdown timers are a great tool to utilize in your marketing strategies, enhancing sales, registrations, or product launches. Proper placement and compelling calls to action are crucial. Embrace the power of urgency and transform site visitors into active customers. Follow the steps provided to achieve measurable success in your digital marketing efforts.

Visual aids have always played a huge role in effective communication. They make content engaging, and information easier to consume

This holds true not only in traditional media but also in web design. Enter progress graphs – illustrations that represent data, milestones, and progress. If progress graphs are incorporated into web design, it could help websites achieve its goals. Whether it’s to increase user engagement or to drive conversion, it could serve as an excellent tool for websites.

As an example, here’s how progress graphs could be useful for a portfolio website:

In the example above, it illustrates the mastery of different skills of each individual by using progress graphs.

Another example could be a non-profit organization using a progress bar to depict fundraising efforts.

By adding a visual representation of the progress towards a goal, donors might feel more connected to the cause and feel more inclined to donate.

These real-world applications highlight how progress graphs can transform information into interactive storytelling elements, fostering a more engaging user experience.

In this article, we’ll dive into how you can make progress graphs on your website more interactive and engaging.

Tips on How to Make Progress Graphs

Incorporating progress bars and circles into web design requires more than just adding them for the aesthetic. Overuse can detract from user experience rather than enhance it.

Understanding the balance is key; not every progress graph will add value. This section offers tips to ensure your progress graphs truly enhance your web design. We will guide you through creating purposeful and dynamic progress graphs that genuinely benefit your site.

Here are some tips into how to apply these tools effectively:

1. Keep it simple

Design progress graphs with clarity in mind, focusing on essential elements. Excessive decorations might overwhelm or confuse users.

Simple, clear visuals ensure quick and easy understanding for all users. By providing clear and straightforward information, you encourage web visitors to further interact with your site.

Going further, simplicity reduces cognitive load, thus preventing user frustration. Imagine seeing a section, with no text, no percentage, but using decorative icons to describe each progress circle:

How we could improve this is to include a number for each circle, include some text, and use our images as a background. This will not leave the website visitors guessing since the information we’re trying to relay is straightforward.

By providing clear, straightforward information we’re encouraging further interaction with the site.

2. Use intuitive colors

Choose color schemes that indicate the progress you’re tracking. Green is the go-to color to signify progress. Like in the example below, the color green is used to indicate how much has been raised against the goal amount

However, you could still use your company’s colors if you want to stick to your branding. Just make sure that the bar background is contrasting from the progress bar’s color like in this variation below:

Here is another example, where progress bars were used to display star ratings. In this case, orange to gold hues are used to depict the percentages for each star. These colors are, of course, associated with stars. Using these colors will not only grab the attention of your visitors, it also reinforces the idea of excellence and quality.

3. Provide Context

Each progress graph should come with context, either through text or visuals, clarifying its purpose. For instance, indicate whether it tracks the progress towards a goal or achievement.

Clear context helps users understand the relevance and significance of the progress being shown.

If you own a business and you want to display business performance metrics, including a subtext under each progress bar will help your website visitors understand the message you are trying to convey.

In this example, the subtext provides examples of how the business was able to achieve the metric. Users now have the key information that might matter to them.

Including context in a progress graph clarifies what it measures or what its purpose is, enhancing user understanding and relevance.

4. Incorporate Interactivity

Enhance progress indicators with interactive elements to foster user engagement. Let’s take the performance metrics example above and see how interactivity can be incorporated in the design.

The subtext is hidden by default, however, when the user hovers over each metric, it will appear.

Allowing users to discover more information upon interaction adds value and is a great technique to increase user engagement.

There are many other ways you can add interactivity to your progress graph, such as creating clickable elements, or allowing the graphs to update dynamically when data changes.

5. Add animation

Animate your progress bars or circles to make the user experience lively and engaging. Smooth animations that visualize the filling of a bar or the completion of a circle draw attention and effectively guide users’ understanding of their progress.

Taking the same example, we’ve added an animation to each progress circle so that it completes the progress circle as the page loads.

This transforms static information into an interactive experience, further engaging users.

How to Create Progress Graphs

There are a number of ways to create progress graphs. You can write simple HTML and CSS code to make a simple progress bar or circle. However, if you want to go further, there are a number of plugins that are on WordPress that make it easy to make dynamic and interactive progress graphs.

How to Create Progress Graphs with HTML and CSS Code

Adding progress bars or progress circles is entirely possible using HTML, CSS, and sometimes JavaScript for more dynamic or interactive elements. Here’s an example of a progress bar made entirely with HTML and CSS:

To make this progress circle, we just simply wrote the following HTML code:

<h2>5-star reviews</h2>
<div class="circle-container">
  <div class="inner-circle"></div>
  <div class="percentage">93%</div>
</div>

Then, we plugged in the following CSS selectors to define how the progress circle is going to look like:

.circle-container {
  font-size: 0;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#4CAF50 0%, #4CAF50 93%, #ddd 93%, #ddd 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner-circle {
  background-color: white;
  border-radius: 50%;
  width: 75px;
  height: 75px;
}

.percentage {
  position: absolute;
  font-size: 16px;
  color: #4CAF50;
}

This code creates a circular progress bar using the conic-gradient property in CSS. The circle is divided into two segments: 93% of the circle is filled with a green color (#4CAF50) to represent the 5-star reviews, and the remaining 7% is filled with a light gray color (#ddd) to indicate the incomplete portion. The percentage of 5-star reviews is displayed in the center of the circle, making it easy to see the proportion of positive feedback.

If you would like to expand your knowledge on creating progress graphs with HTML and CSS, we recommend checking out other resources. You can learn about progress bars on W3Schools, which offers clear examples suitable for all skill levels. On the other hand, this Medium article provides a detailed tutorial on how to create a progress circle.

For some people, using HTML and CSS for progress graphs might not be an option, especially if you’re aiming for graphs that are more dynamic. When you want your graphs to be interactive, you might need to dive into something a bit trickier, like JavaScript. This is because JavaScript can make your graphs come alive. If this is not an option for you, then you might find a more fitting alternative in the following sections.

How to Create Progress Graphs on WordPress

There is almost always a plugin for your needs on WordPress and progress graphs are no different. Going this route is much more convenient as you would almost never have to do any coding.

WordPress block libraries and page builders allow you to create and customize website pages without the need for coding. They provide an assortment of pre-made elements, widgets, or blocks, including text, images, and interactive elements like progress bars.

Block librariess and page builders simplify the process of creating progress bars or circles, making it accessible even to those without coding expertise.

With pre-made blocks or widgets for progress bars and circles, users can easily customize the appearance, size, and percentage with just a few clicks. This not only saves time but also opens up creative possibilities, enabling website owners to enhance user engagement and visually represent data or milestones without delving into complex code.

Here are some examples of tools that you can use:

Stackable

Stackable’s progress bar and progress circle blocks enable effortless addition of progress graphs to your WordPress site. Stackable, a leading page builder for WordPress Gutenberg, offers intuitive and versatile Progress Bar and Progress Circle blocks.

These are designed to integrate seamlessly into your web design. These blocks come with extensive customization options, allowing you to align them perfectly with your site’s aesthetic and branding.

You can set the values however you want, and set it to whatever unit you want. Whether it’s percentage, currency, time, or distance, Stackable’s Progress Bar and Progress Circle blocks are the perfect blocks to showcase progress visually.

Stackable is free on the WordPress block directory and it comes with all 30+ custom blocks, 30+ templates, 400+ pre-designed block designs.

Elementor

The Elementor widget for progress bars streamlines the creation of progress graphs on your website. With its user-friendly interface, you can effortlessly design progress bars to match your site’s aesthetic, displaying any kind of progress from skill levels to project milestones.

Elementor is free to install on your WordPress website from the WordPress block directory.

Progress Bar & Skill Bar

The Progress Bar & Skill Bar WordPress plugin enables users to showcase progress visually. It offers customizable features, animations, and easy integration. You can find it in the WordPress Plugin Directory. You can install and active it on your WordPress website for free. However, it also offers pro features with prices starting at $8/year.

Ultimeter

Ultimeter is a WordPress plugin offering various meters for visual representation. It supports customization of colors and styles to match branding. You can also easily set goal and current values with options for percentage or currency units. It’s available for free with additional pro features starting at $39.99/year.

Conclusion

In wrapping up, adding progress graphs to your website does more than just enhance the design—it makes information clear and engaging. These handy tools turn hard-to-grasp data into something tangible, boosting user interaction and connection. By following the tips we’ve shared, you can effectively use progress graphs to not only catch the eye but also drive real engagement and conversions.

AI could particularly be helpful for web designers as well, utilizing it to create, optimize or personalize online experiences. It is to say, of course, that the role of AI in web design is not to eliminate web designers but to aid them in their process. The role of AI in web design is mainly to enhance creativity and efficiency in every designer’s process; from automating mundane tasks to generating design elements.

Types of AI Tools

There are a handful of AI tools with different capabilities that can transform web design. Depending on your objective, you will always find one for you.

Enhancing Creativity

For those seeking tools for inspiration, there are a variety of AI tools that cater to different aspects of the design process. AI can suggest color schemes, typography, or even help you with content generation or design inspiration.

Fontjoy

Fontjoy is designed to help designers and creatives with font pairing. Choosing the right combination of fonts is crucial for ensuring readability, enhancing aesthetic appeal, and maintaining consistency across a design. Fontjoy uses machine learning to simplify this process.

Canva

Canva AI is a whole suite of tools designed to generate content which people can use for web design. With tools like Magic Animate that brings static designs to life, or Magic Write that serves as a text generator that could simplify the process of creating copy or content ideas, you can streamline the creative process and enable designers to produce high-quality content more efficiently.

Shutterstock AI

Shutterstock has always been known as a library of stock photos that designers can use for web design. Now, their AI can be used to generate new and unique images based on only text prompts. It also provides tools that automate complex photo editing tasks like background removal, image expansion, or even erasing unwanted objects. Shutterstock AI is enhances and simplifies the content creation process, specifically for images.

Midjourney

Midjourney is the leading AI program that creates images from text prompts. It operates on Discord as a bot that generates images when a user messages their prompt that start with the command “/imagine”. It will then return a set of four images, offering users options to upscale the images for a more detailed view or to enhance it.

Midjourney is a valuable tool that web designers can use to make their creative process more efficient. By making image generation easier, designers can now easily produce images for their web designs.

ChatGPT

ChatGPT offers a range of functionalities that could assist web designers in their work. Whether it’s to generate content or to brainstorm design ideas, ChatGPT can significantly enhance the efficiency of web design projects.

ColorMagic

ColorMagic is an AI-powered color palette generator that helps users create ideal color combinations based on text prompts. This tool is particularly helpful for web designers by quickly generating harmonious color schemes that align with specific themes or concepts.

Streamlining the Design Process

AI can significantly increase the efficiency of a web designer’s workflow by automating repetitive tasks. Whether it’s converting sketches into functional prototypes, or offering suggestions/feedback on usability, AI allows designers to focus on the creative aspect of web design than manual labor.

More than that, there are also AI tools that make it easier to test different elements of a design. Doing this allows designers to determine what works best for engaging users with minimum effort.

Uizard

Uizard is designed to simplify the UI design process, making it accessible for both non-designers and professionals. It enables users to create wireframes, mockups, and prototypes easily. One of its key features is by providing UI designs from text prompts, convert hand-drawn sketches or screenshots into editable mockups.

Uizard makes it so much easier for web designers to bring their creative visions to life quickly.

CodeWP

CodeWP is designed to automate and simplify the process of generating clean and customizable code for WordPress websites. By enhancing the web development process for both developers and non-developers, it makes creating optimized websites effortless.

CodeWP makes web design and development more accessible to a wider audience, even those without extensive coding knoweldge.

Predict by Neurons

Predict by Neurons helps web designers by predicting human attention and cognition, specifically how they behave while browsing a website. It ensures the effectiveness of the different elements in a website by analyzing a vast database of consumer neuroscience data to provide instant and accurate predictions of how audiences interact with a website.

It isn’t just limited to web design, it also has other features that every web designer needs to improve a website, such as A/B testing, eCommerce optimization, advertising, UI improvements, and more.

Expanding Web Capabilities

AI extends the functional boundaries of websites like personalization, or improving user interactions. AI can tailor web experiences to individual preferences thus making content on a website more relevant and engaging.

ABTesting.ai

ABTesting.ai is a platform that optimizes landing pages for higher conversion rates. It simplifies the A/B testing process by automating the creatin and execution of tests, mnaking it accessible even to those with no prior knowledge of A/B testing.

This tool addresses common issues associated with traditional A/B testing, such as deciding what to test, choosing combinations to test, and more. ABTesting.ai is the perfect tool for those who want to spend less time managing A/B testing, and focus more on the other aspects of managing a website.

Intercom

Intercom is a software that specializes in customer support. It provides a single platform for businesses to chat with customers across various channels. Its AI, called Fin, introduces advanced features that make customer interactions more efficient and effective. It automatically solves customer issues with answers based on content you provide.

Although Fin is primarily focused on customer support, it significantly improves a website’s user engagement by improving the quality of customer interactions.

Conclusion

In conclusion, AI tools revolutionizes web design. From enhancing creativity, to streamlining design processes, AI empowers designers to push the boundaries of innovation and efficiency. As AI continues to evolve, embracing these tools will not only elevate the quality of web design but also redefine the way designers approach their craft, ensuring they stay at the forefront of digital innovation.