> For the complete documentation index, see [llms.txt](https://docs.kaliumtheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kaliumtheme.com/template-parts/creating-template-parts/creating-a-section/creating-a-section-with-wpbakery.md).

# Creating a Section with WPBakery

Building a section with WPBakery, which is bundled with the theme.

{% embed url="<https://www.youtube.com/watch?v=Y6zofiX8ZoI>" %}

Template Parts work seamlessly with **WPBakery Page Builder**, allowing you to visually build custom sections and place them anywhere on your site, without needing extra plugins or complex configuration. It’s a theme-builder-like experience built right into Kalium.

In this example, we’ll walk through how to create a **Section** using WPBakery.

***

### 1. Create the Section

To begin:

1. Go to **Kalium -> Template Parts**
2. Click **Add New**
3. Add a title for your section (e.g. `Summer Sale - 20% Off`)
4. Click **Publish**

{% hint style="info" %}
You can configure **Display Conditions**, **Placement**, and **Container Settings** now or later, the process is the same regardless of the builder you use.
{% endhint %}

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-6d5a20c6c9c82ecfb0e94b09aa7e5fbe45b5bc4a%2Fwpb.jpg?alt=media" alt=""><figcaption></figcaption></figure>

***

### 2. Edit with WPBakery

After publishing, click the **Edit with WPBakery Page Builder** button to open the section in the visual editor.

{% hint style="warning" %}
If the **Edit with WPBakery** button doesn’t appear, go to **WPBakery -> Role Manager**, and make sure Template Parts are enabled under **Post Types**.
{% endhint %}

***

### 3. Add Your Content

Now you're inside the WPBakery editor.

1. Add your content, for this example we’ve used a banner with a call-to-action
2. Design the layout and styling as needed
3. When you're done, click **Update**

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-8ce985858c2027420dd1af5e5470889d44598a6f%2Fwpb2.jpg?alt=media" alt=""><figcaption></figcaption></figure>

That’s it, you’ve successfully created a reusable Template Part section using WPBakery. It can now be displayed automatically using placement and display conditions, or inserted manually anywhere on your site.

***

### Optional: Add the Section Manually

The **Content Section** element in WPBakery lets you insert any Template Part section directly into your layout, without needing to set up display conditions or placement rules.

#### Why use this?

* **Visual placement** – Drop the section exactly where you want on the page
* **Simple selection** – Choose from your existing Template Part sections
* **No display logic required** – Skip conditions and hook settings for full manual control

**To insert a Section manually:**

1. Edit the page using WPBakery.<br>

   <figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-38eb7c6d03e66e615bebb36574327053743ea8e0%2Fwpbb.jpg?alt=media" alt=""><figcaption></figcaption></figure>
2. Click **Add Element** and search for **Content Section** under **Laborator** tab.<br>

   <figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-dda8fa8132af38061c138e64c0f6485151c5dc54%2Fwpb-2.jpg?alt=media" alt=""><figcaption></figcaption></figure>
3. Select the section you want to display using the **Display Section** dropdown.<br>

   <figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-202b5b92a06d64307c29e5f56bdef4013ca64803%2Fwpb-1.jpg?alt=media" alt=""><figcaption></figcaption></figure>
4. Enable **Check Display Conditions** if you want the section to respect its defined visibility rules.

   > *Check if this section should be visible based on its Display Conditions.*

   Left off, the section always appears where you placed it. Turned on, the section’s own conditions decide, so a section with no conditions set is hidden.
5. Save the changes and click **Update**

You can place this element anywhere in your layout, below you can see how it looks live:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-515efaccd7e20b302c114fc8c4df02c55ed789da%2Fwpblive.jpg?alt=media" alt=""><figcaption><p>Live preview of the section we just added</p></figcaption></figure>
