How to Create a WordPress Web Design Library with Kadence Cloud

When it comes to designing a WordPress website, what if you didn’t have to painstakingly add content, select colors, and modify every setting every time you add a block to get things exactly the way you want? What if you didn’t have to then turn around and go through the exact same process on the next page or site? 

What if you could just design it once – and save your most used web design elements someplace where it would be easy to reach and replicate?

Now you can! With Kadence Cloud, there’s a new way to build your own web design library.

In this article, we will be talking about the concept of Kadence Cloud – how to create, sync, share, and understand the Kadence Cloud. Building a design library with Kadence Cloud will save you time and energy when you want to reuse elements of your designs across websites.

Kadence Cloud: If you build it . . . you won’t have to rebuild it! 

Kadence Cloud is the easiest “no code” way to store the designs you create in the different websites you work on, and then have a way to access those designs for all your other websites, to sell to others, or to just share your designs.

Kadence Cloud lets you dramatically speed up your workflow for building new sites or refreshing the designs of the sites you already manage. 

What is Kadence Cloud and How Can It Be Used?

Kadence Cloud is a separate PREMIUM plugin that you install on your website. It works with the Kadence Blocks plugin. With the Kadence Cloud plugin, you have the power to select and store all your favorite WordPress blocks so you can easily use them on any site you connect to your cloud.

Kadence Cloud eliminates the need for copying/pasting code to duplicate the layouts or settings you like. You simply drag and drop your favorite design elements where you need them straight from your personal web design library.

kadence cloud featured

Kadence Cloud makes it possible for you to stop reinventing the wheel. Whether you need to build a series of sites that all share the same common traits or you have favorite blocks you’ve created, you can store them on your cloud and share keys to your cloud as you need.

Kadence Cloud allows you to change the reusable blocks you create that won’t redistribute the changes in the locations where you have used the blocks before. This means your blocks will be fully customizable.

Kadence Blocks is like Gutenberg on steroids. Not only can you customize to the nth degree, but you can also customize based on viewer location (mobile, device, computer).”

– Geoff Graham

You can build up a reservoir of creative elements by developing a strong design library with Kadence Cloud. The more you create, the more you can share. Eventually, you will be in a position not only to share, but to package and sell your design elements.

How is Kadence Cloud Different Than WordPress Block Patterns?

Kadence Cloud is a lot like WordPress Block Patterns in the WordPress Block Editor. You get a library of elements that can be dropped right onto any page or post. 

The big difference: Kadence Cloud can be shared between any number of sites. With Kadence Cloud, you aren’t limited to starter templates or what you’ve created on each website.

Think of how useful this can be:

  • You’re a freelancer or work in an agency and need to streamline the design and development of client sites. 
  • You want to implement a design system that enforces consistency on a website. 
  • Get this: you can sell access to your cloud and make some bucks from it. So, if you’re a designer you can create a set of elements people can access on their own WordPress sites for a fee. 

How Kadence Cloud Works

Kadence Cloud hosts predefined design elements on a server that can be shared with and accessed by any number of sites that you allow. Kadence Cloud is the engine that allows you to host your designs online.

Your Design Library with Kadence Cloud

What You Need to Get Started with Kadence Cloud

1. You need a Kadence Cloud account.

To get started with Kadence Cloud, buy Kadence Cloud in one of these affordable plans.

2. You will need to download and install the Kadence Blocks plugin.

Kadence Blocks is a free plugin that you will use to build your design elements. It’s completely free and available for download on the WordPress Plugins site.

You can also choose to upload the Kadence Theme or Kadence Blocks Pro, but those are just icing on the cake.

To recap, here’s what you need to get started with Kadence CLoud:

“Kadence is a theme that is more like a page builder that integrates with other page builders. It has its own collection of blocks and pro versions of blocks. It even has starter templates. AND much of this is free on the WordPress plugin page.”

– Geoff Graham

3. (Optional) A Designated Design Library URL

Create a separate site with a design designated URL – like design.yourdomain.com – or something specific for your company. The new site can become a depository for your designs that is independent and separate from your other sites.

Setting up a unique site will abstract things so that you can create different collections specific to brands or projects. You can make the collections available to anyone or restrict some content based on membership levels.

How to Set Up & Use Kadence Cloud

Now that you know what you need to get started, let’s dive into setup.

Setting Up Your Kadence Cloud

Once you have purchased your Kadence Cloud account, download the zipped plugin file to your computer by clicking the Upload Plugin button on your plugin page.

Next, choose the zipped file from your computer. Activate the plugin and you’re ready to go.

Once you activate the plugin, you’ll notice a Cloud Library Items in the admin menu. Click on it and then on the Cloud Settings.

Kadence Cloud Settings

General Settings Explained

Set Cloud Name – is just as it sounds. It is the place where you will creatively name your Kadence Cloud.

Force Sites to Resync After – this provides three choices (One Day, One Week, One Month).

Enable API Flash for Screenshots – allows you to generate thumbnails. (Note: you will need to sign up for a free API Flash account at APIFlash.com). 

Access Keys Explained

This is simply the code other sites will use through Kadence Blocks to connect with your design elements.

Library Items

Library Items

These are design-level element settings (compare to post settings for blogs). This is where you can categorize the element, add to certain collections, or add keywords to make it easier for people to search for the element within your cloud.

Adding Kadence Cloud API to a Website

Any website you want to connect with your cloud elements will have to have Kadence Blocks plugin installed and activated.

Open a new page and you’ll notice a tab at the top for Design Library.

Click on the Design Library tab to open up the Library. Notice the little plus sign at the end of your tabs:

Click the plus symbol and you will open up the API connection page.

Paste the API information from your Kadence Cloud website into these blocks. Click the Add Connection button to create the link between your designs and the website where you want to put your designs to work.

You’ll now notice a new tab in your Library (this tab will have the name you gave you Kadence Cloud site when you set it up with the General Settings).

You will now have access to any design elements you create in your Kadence Cloud. All you will need to do is grab the element you want and drop it into your new website.

Watch the Full Webinar: Build Your Own Design Library with Kadence Cloud with Geoff Graham and Nathan Ingram

In a recent iThemes Training Webinar: Build Your Own Design Library with Kadence Cloud, Special Guest Geoff Graham teamed up with Nathan Ingram to explain how to set up Kadence Cloud on your website and begin sharing your designs.

Geoff Graham is a web designer and a contributor to The Events Calendar from Long Beach, CA. He is also the lead editor CSS-Tricks and teaches front-end web development at Long Beach Community College.

REPLAY THE WEBINAR: Build Your Own Design Library with Kadence Cloud – iThemes Training

Get Kadence Cloud Today!

That’s the start – you set up your cloud, you connect with the cloud, and you share elements through the Kadence Cloud you’ve created.