
Getting Started	/pages/h7CJt5LEDfJVocGaCcdJ
Installation	/pages/ffCKWhW9rGEy434TaCd7
License	/pages/6mKICIi2Hv32uXcumOHt
Header	/pages/E9uJzJgJkYWWCVaLdl2E
Footer	/pages/v1DGYHKqWy65436O3ykM
Sidebars	/pages/nLjlKuEh2FucsGj0kH5z
Template Parts	/pages/U3mowJAIgACPZ2u17PgF
Blog	/pages/ap7UtChvFwZiwqDs8fZS
Portfolio	/pages/3rlN40s7fNcFnE98WWQH
WooCommerce	/pages/eNtEa4Tc8GatORYsGSZL
Typography	/pages/0bOLKxRigNCrZ7r8iYAU
Styling	/pages/us1I39KVyqnYPdUtmZVh
Translation	/pages/TDby0cboOGrVTbMD92yE
Other	/pages/5OkiTgF5xKFi5mDrqsgp
Troubleshooting	/pages/1bQ6D2F5B0BU3yuByFXY

Getting Started

Installation

License

/pages/6mKICIi2Hv32uXcumOHt

Header

/pages/E9uJzJgJkYWWCVaLdl2E

Footer

/pages/v1DGYHKqWy65436O3ykM

Sidebars

/pages/nLjlKuEh2FucsGj0kH5z

Template Parts

/pages/U3mowJAIgACPZ2u17PgF

Blog

/pages/ap7UtChvFwZiwqDs8fZS

Portfolio

/pages/3rlN40s7fNcFnE98WWQH

WooCommerce

/pages/eNtEa4Tc8GatORYsGSZL

Typography

/pages/0bOLKxRigNCrZ7r8iYAU

Styling

/pages/us1I39KVyqnYPdUtmZVh

Translation

/pages/TDby0cboOGrVTbMD92yE

Other

/pages/5OkiTgF5xKFi5mDrqsgp

Troubleshooting

/pages/1bQ6D2F5B0BU3yuByFXY

`. By default, this is set to `

`, so you can leave it empty.

*** ### 8. Publish Once everything is configured, click **Publish**.

Your section will now appear after the header on every page of your site, based on the conditions and placement you selected, as you can see below:

*** ### Optional: Insert the Section Manually In addition to automatic placement, Kalium lets you manually insert Template Part sections anywhere inside a page or post using the default editor. This is especially useful when you want to show a section in a very specific spot, without relying on automatic placement rules. It only applies to **Sections**, since they’re designed to be embedded within content. Other types like **Headers**, **Footers**, and **Pages** replace parts of your site and can’t be inserted manually. Below, we’ll explain how to insert sections manually using each method. #### Why use this? * **Visual placement** – Drop the section exactly where you want in your design * **Simple selection** – Choose any existing section from the dropdown * **No display rules needed** – Skip conditions and hook settings if you want manual control To insert a section manually: 1. Edit your page or post in the default WordPress editor. 2. Start by typing `/` or click the “+” icon to add a new block.

3. Search for **Content Section** and select the block. 4. In the block settings, choose the section you want to display from the dropdown.

You’ll also find options to **Change Section**, **Check Conditions**, and **Edit Template**. Clicking **Edit Template** will open the template in a new tab so you can edit it directly.

{% hint style="info" %} Check Conditions lets you control where and when this section appears, for example, only on specific pages or for certain user roles. {% endhint %} *** #### Optional: Shortcode Option If you prefer, you can insert any Template Part Section using a shortcode. **Shortcode format:** ``` [kalium_section id="123"] ``` You don’t need to look up the ID manually — the shortcode is already visible next to each Template Part in the **Template Parts** dashboard. Just copy and paste it wherever you need. #### Controlling Display Conditions You can control whether the shortcode respects the section’s display conditions by adding the `check_conditions` parameter: * `check_conditions="yes"` – The section will only appear if its display conditions are met * `check_conditions="no"` – The section will appear unconditionally, wherever the shortcode is placed **Example**: ``` [kalium_section id="123" check_conditions="no"] ``` This is useful if you're placing the section inside: * Widgets * Custom HTML areas * Third-party shortcode-compatible plugins # Creating a Section with Elementor {% embed url="" %} Template Parts work seamlessly with Elementor and allow you to visually build custom sections and place them anywhere on your site — all without needing **Elementor Pro**. This gives you theme-builder-level flexibility, built directly into Kalium. In this example, we’ll walk through how to create a **Section** using Elementor. *** ### 1. Enable Template Parts in Elementor By default, Template Parts are not editable with Elementor unless you enable the option manually. To do that: 1. Go to **Elementor → Settings** 2. Under the **Post Types** section, make sure **Template Parts** is checked 3. Click **Save Changes**

*** ### 2. Create the Section Now that Elementor can edit Template Parts, you’re ready to create one: 1. Go to **Kalium → Template Parts** 2. Click **Add New** 3. Add a title for your section (e.g. `30% Off Banner`) 4. Click **Publish** {% hint style="info" %} You can set up **Display Conditions**, **Placement**, and **Container Settings** now or later — the process is the same as when using Gutenberg. {% endhint %}

*** ### 3. Edit with Elementor Once the Template Part has been published, you’ll see the **Edit with Elementor** button appear. Click it to open the section in the Elementor editor. {% hint style="warning" %} If the **Edit with Elementor** button doesn't show up, it means Template Parts are not enabled in **Elementor → Settings**. Make sure the checkbox is active under **Post Types**. {% endhint %} *** ### 4. Add Your Content Now you're in the Elementor editor. 1. Add your content — for this example, we’ve added a banner block announcing a **30% Sale** 2. Design the section as you like 3. When finished, click **Publish**

*** ### 5. Check Your Section Return to **Kalium → Template Parts** and you'll see your newly created section listed with an **Elementor** label. This means the section was built using Elementor and can be edited with it any time.

The "Elementor" label shows after the section title, so you will know it's built with Elementor

*** ### Optional: Insert the Section Manually The **Content Section** element in Elementor lets you easily insert any section of Template Parts directly into your layout — no need to configure display conditions or placement settings. #### Why use this? * **Visual placement** – Drop the section exactly where you want in your design * **Simple selection** – Choose any existing section from the dropdown * **No display rules needed** – Skip conditions and hook settings if you want manual control **To use it:** 1. Edit any page with Elementor. 2. In the Elements panel, search for **Content Section** under the **Kalium** category.

Click the "Content Section"

3. Drag the element into the desired spot in your layout. 4. In the Content Section settings, you'll find:

* **Display Section** – Select the section you want to show. * **Check Display Conditions** – Enable this to respect the section’s Display Conditions.
> Check if this section should be visible based on its Display Conditions. This has no effect unless conditions are defined in the section settings.\ > \ > If you leave **Check Display Conditions** off, the section will always appear wherever you’ve placed it. 5. When you're done editing click **Publish** And this is how it looks in the page we have added:

And here is the final result, we have added the section created with Elementor in Contact page

# Creating a Section with WPBakery {% embed url="" %} 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 %}

*** ### 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**

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.

2. Click **Add Element** and search for **Content Section** under **Laborator** tab.

3. Select the section you want to display using the **Display Section** dropdown.

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. This has no effect unless conditions are defined in the section settings.* 5. Save the changes and click **Update** You can place this element anywhere in your layout, below you can see how it looks live:

Live preview of the section we just added

# Creating a Header We’re working on this feature and it will be available soon in an upcoming update. # Creating a Header We’re working on this feature and it will be available soon in an upcoming update. # Replace a Page We’re working on this feature and it will be available soon in an upcoming update. # Popups Popups are a powerful way to capture visitor attention and drive engagement on your website. Whether you're promoting a sale, collecting newsletter subscribers, displaying important announcements, or presenting exit offers, Kalium's popup system gives you complete control over when, where, and how your popups appear. ### Getting Started #### Creating a Popup 1. Navigate to **WordPress Admin → Kalium → Template Parts** 2. Click the **Add New** button 3. Select **Popup** as the template part type 4. Design your popup content using your preferred editor: * **Gutenberg** (default) - WordPress block editor * **Elementor** - If installed and active * **WPBakery** - If installed and active 5. Configure the popup settings in the sidebar panels 6. **Publish** when ready Your popup will automatically appear on your site based on the conditions and triggers you configure. *** ### Settings Panels The popup settings are organized into panels in the editor sidebar. Each panel controls a specific aspect of your popup's behavior and appearance. *** ### Display Conditions Control where your popup appears on your website. You can target specific pages, posts, categories, or other conditions to ensure your popup shows only to the right audience. Read more about [Display Conditions](/template-parts/settings/display-conditions) here. *** ### Popup Triggers Define what action causes your popup to appear. You can add multiple triggers, and the popup will show when **any one of them** is activated (first match wins). #### On Page Load Shows the popup when the page finishes loading. | Option | Description | | ------ | ------------------------------------------- | | Delay | Seconds to wait before showing (default: 0) | **Use case:** Welcome messages, cookie notices, or announcements that should appear immediately. *** #### On Scroll Shows the popup when the visitor scrolls to a certain position on the page. | Option | Description | | --------------- | -------------------------------------------------- | | Direction | Scroll direction to monitor: **Down** or **Up** | | Scroll Position | How far to scroll before triggering (default: 50%) | The scroll position supports different units: * **Percentage (%)** - Percentage of total page height * **Pixels (px)** - Fixed pixel distance * **Viewport Height (vh)** - Percentage of screen height **Use case:** Show a newsletter signup after visitors have engaged with your content. *** #### On Scroll to Element Shows the popup when a specific element becomes visible on screen. | Option | Description | | ------------ | -------------------------------------------------------------------------- | | CSS Selector | The element to watch for (e.g., `#contact-form`, `.cta-section`, `footer`) | **Use case:** Trigger a popup when visitors reach your pricing section or contact form. *** #### On Click Shows the popup when the visitor clicks on a specific element. | Option | Description | | ------------ | ------------------------------------------ | | CSS Selector | Element that triggers the popup (optional) | If no selector is provided, clicking anywhere on the page will trigger the popup. **Use case:** Create custom buttons or links that open your popup, like "Get a Quote" or "Learn More" buttons. *** #### After Inactivity Shows the popup after the visitor has been idle for a period of time (no mouse movement, scrolling, or keyboard activity). | Option | Description | | --------- | -------------------------------------------------- | | Idle Time | Seconds of inactivity before showing (default: 30) | **Use case:** Re-engage visitors who may have gotten distracted or are about to leave. *** #### On Page Exit Intent Shows the popup when the visitor moves their mouse toward the browser's close/back buttons (top of the viewport). This detects when someone is about to leave your page. This trigger has no additional options. **Use case:** Last-chance offers, discount codes, or "Wait! Before you go..." messages. *** #### Based on Visitor Activity Shows the popup based on cumulative visitor behavior tracked across their browsing session or multiple visits. | Activity Type | Description | | ----------------- | ----------------------------------------------------------------------- | | **Page Views** | Trigger after viewing X pages (default: 3) | | **Sessions** | Trigger after X separate browsing sessions (default: 3) | | **Clicks** | Trigger after X clicks anywhere on the site (default: 3) | | **Scroll Amount** | Trigger after scrolling X total pixels across all pages (default: 5000) | All activity types also support an optional **Delay** setting to wait before showing the popup once the threshold is reached. **Use cases:** * Show a special offer to returning visitors (Sessions) * Reward engaged readers with exclusive content (Page Views) * Target highly engaged users (Scroll Amount) *** ### Display Frequency Control how often the popup reappears after a visitor closes it. This prevents annoying repeat displays while still ensuring your message reaches visitors. | Option | Behavior | | -------------------- | ----------------------------------------------------------- | | **Once Per Session** | Shows once per browser session (resets when browser closes) | | **Once Per Day** | Shows once every 24 hours | | **Once Per Week** | Shows once every 7 days | | **Once Per Month** | Shows once every 30 days | | **One Time Only** | Never shows again after being closed | | **Custom Interval** | Specify exact seconds between displays | **Tip:** For important announcements, "Once Per Session" works well. For promotional popups, "Once Per Day" or "Once Per Week" is less intrusive. *** ### Layout Configure the popup's size, position, and visual styling. #### Size | Option | Description | | ---------- | ----------------------------------------------------------------------------- | | **Width** | Popup width (default: 60%). Supports responsive values for tablet and mobile. | | **Height** | Popup height. Leave empty to automatically fit the content. | #### Position | Option | Values | | -------------- | ------------------- | | **Horizontal** | Left, Center, Right | | **Vertical** | Top, Center, Bottom | #### Offset Fine-tune the popup's position from the edges of the screen. | Option | Description | | ------------ | --------------------------------- | | **X Offset** | Horizontal distance from the edge | | **Y Offset** | Vertical distance from the edge | #### Scroll Lock When enabled, prevents the page from scrolling while the popup is open. Useful for important popups that require user attention. #### Style | Option | Description | | ----------------- | ---------------------------------------------------------------------------------------------------- | | **Background** | Popup background color (supports theme colors) | | **Padding** | Inner spacing around your content. Supports individual values for each side and responsive settings. | | **Border Radius** | Corner roundness. Supports individual values for each corner. | | **Box Shadow** | Drop shadow effect behind the popup | *** ### Overlay Configure the backdrop that appears behind your popup. | Option | Description | | ------------------- | ------------------------------------------------------------ | | **Overlay** | Enable or disable the darkened backdrop | | **Overlay Color** | Backdrop color with opacity (default: semi-transparent dark) | | **Background Blur** | Blur the page content behind the overlay (0-10 pixels) | | **Close on Click** | Allow visitors to close the popup by clicking the overlay | *** ### Closing Configure how visitors can close the popup. #### Close Button | Option | Description | | --------------------- | ----------------------------------------------------- | | **Close Button** | Show or hide the X button | | **Button Position** | Inside or Outside the popup | | **Button Size** | Size of the close button (supports responsive values) | | **Button Color** | Icon color for normal and hover states | | **Button Background** | Background color for normal and hover states | #### Keyboard | Option | Description | | ---------------- | -------------------------------------------- | | **Close on ESC** | Allow visitors to close using the Escape key | #### Auto-Close | Option | Description | | -------------- | ------------------------------------------- | | **Auto Close** | Automatically close the popup after a delay | | **Delay** | Seconds before auto-closing (default: 10) | **Use case:** Time-limited announcements or messages that should disappear automatically. *** ### Animation Configure the opening and closing effects for your popup. #### Animation Type | Type | Description | | --------------- | ------------------------------- | | **None** | No animation, appears instantly | | **Fade** | Smooth opacity transition | | **Zoom** | Scales from small to full size | | **Slide Up** | Enters from the bottom | | **Slide Down** | Enters from the top | | **Slide Left** | Enters from the right | | **Slide Right** | Enters from the left | | **Bounce In** | Playful bouncing effect | #### Animation Duration Speed of the animation in seconds (default: 0.3). Lower values create snappier animations, higher values create smoother, slower effects. *** ### Responsive Control which devices display your popup. | Option | Description | | ----------- | ----------------------- | | **Desktop** | Show on desktop screens | | **Tablet** | Show on tablet devices | | **Mobile** | Show on mobile phones | All devices are enabled by default. Disable any device type to hide the popup on that screen size. **Tip:** If your popup content doesn't work well on small screens, consider disabling mobile display or creating a separate mobile-optimized popup. *** ### Best Practices 1. **Don't be intrusive** - Use appropriate display frequencies and consider user experience 2. **Time your triggers** - Let visitors engage with your content before showing popups 3. **Keep it focused** - Each popup should have one clear purpose and call-to-action 4. **Test on all devices** - Ensure your popup looks good on desktop, tablet, and mobile 5. **Provide easy exit** - Always allow visitors to close the popup easily 6. **Match your brand** - Use colors and styling consistent with your website design # Settings Template Parts in Kalium have a dedicated settings panel that lets you control how and where your content appears on your site. Depending on the type of Template Part you're creating (Section, Header, Footer, or Page), the available settings may vary. In this article, we’ll walk through the main parts of this panel — including how to open it and switch between Template Part types. *** ## Settings Panel To open the Template Part settings, click the **Kalium icon** in the top-right corner while editing a Template Part. This will toggle the settings panel on the right side of the editor. From here, you can configure all available options for your Template Part.

# Type At the top of the panel, you’ll see the **Type** dropdown. This defines the kind of Template Part you’re working on: * **Section** – Used to inject content into hook locations across the site. * **Header** – Replaces the default site header. * **Footer** – Replaces the default footer. * **Page** – Replaces entire pages like 404, search results, or archives.

# Display Conditions Display Conditions let you control **where** and **when** a Template Part appears on your site. You can create rules to include or exclude specific areas based on page type, user role, WooCommerce state, date, and more — giving you full control over visibility without writing any code. This works with all Template Part types: **Sections**, **Headers**, **Footers**, and **Pages**. *** ### How to Add Conditions While editing a Template Part: 1. Click the **Kalium icon** in the top-right corner to open the settings panel 2. Scroll to the **Display Conditions** section 3. Click **Add Condition**\ ![](/files/BHk6N17nlPxjS1TI5nW0) 4. Choose a condition type (e.g. General Page, Single Post, etc.)\ ![](/files/ghR7WSCUoywR60KiFift) 5. Set the rule using **is** or **is not** 6. Select the target (e.g. a specific page, post type, or user role) *** ### Using “is” and “is not” Each condition supports two rule types: * **is** – The Template Part will be shown on the selected target(s) * **is not** – The Template Part will be hidden on the selected target(s) {% hint style="info" %} Example: * **is** → Show on the Front Page * **is not** → Show everywhere **except** the Front Page {% endhint %} *** ### Condition Types Here’s a full list of supported condition types, grouped for clarity. These allow you to target content by page, post, user status, device type, time, and more. | **General Page** | **Where it applies** | | ---------------- | ----------------------------------- | | Entire Site | Applies to every page on your site | | Front Page | The homepage of your WordPress site | | Blog Page | The main blog listing page | | 404 Error Page | The "Page Not Found" screen | | Search Page | Search results pages | | **Singular Content** | **Where it applies** | | ----------------------- | --------------------------------------------------------------------------------- | | Single Post | Individual blog posts | | Single Page | Individual static pages | | Custom Post Type Single | Select any custom post type (e.g. Portfolio, Product), then choose specific items | | Attachment | Media attachment pages | | **Archive** | **Where it applies** | | ------------------------ | -------------------------------------------------------------- | | Blog Archive | The main post archive | | Date Archive | Archives by day, month, or year | | Author Archive | Pages listing posts by a specific author | | Custom Post Type Archive | Archive page for custom post types (e.g. Products, Portfolios) | | **Taxonomy** | **Where it applies** | | ----------------------- | --------------------------------------------------------------------------- | | Category Archive | Blog categories (e.g. News, Tutorials) | | Tag Archive | Blog tags | | Custom Taxonomy Archive | Choose custom taxonomy and terms (e.g. Product Categories, Portfolio Types) | | **User** | **Where it applies** | | ---------- | ---------------------------------------------------------------------------- | | Logged In | Shows only to users who are logged in | | Logged Out | Shows only to users who are not logged in | | User Role | Target specific roles like Administrator, Editor, Subscriber, Customer, etc. | | **WooCommerce** | **Where it applies** | | ------------------------ | ------------------------------------------- | | Product Page | Individual product pages | | Shop Archive | The main shop page | | Product Category Archive | Category listings (e.g. T-Shirts, Shoes) | | Product Tag Archive | Tag listings on products | | Cart Page | The WooCommerce cart page | | Checkout Page | The WooCommerce checkout | | My Account Page | Customer account area (login, orders, etc.) | {% hint style="info" %} WooCommerce-specific conditions only appear if WooCommerce is active on your site. {% endhint %} | **Date & Time** | **Where it applies** | | --------------- | --------------------------------------------------- | | Specific Date | Show only on a selected date | | Specific Time | Show only during a specific time of day | | Specific Days | Show only on selected weekdays (e.g. weekends only) | | **Custom Condition** | **Where it applies** | | -------------------- | ------------------------------------------------------------------------- | | PHP Callback | Enter a custom PHP function that returns true/false | | Post Meta | Target based on a meta key/value with operators (e.g. `meta_key = value`) | | URL Query String | Match parts of the URL (e.g. `?utm_campaign=summer`) | | Referrer URL | Show based on the referring page or site | *** ### Logical Operators: AND / OR When adding more than one condition, you'll see a toggle at the top of the conditions panel to choose between **AND** and **OR**.

These are called **logical operators**, and they control how the conditions work together: * **AND** – All conditions must match for the Template Part to appear\ *Example: Show only on the Cart page **AND** only for logged-in users* * **OR** – The Template Part appears if **any** of the conditions match\ *Example: Show on the Front Page **OR** the Blog page* You can switch between these modes at any time to change how your display rules are applied. *** Display Conditions are one of the most powerful features in Template Parts. Combined with Placement and Container Settings, they give you full control over when and where your content appears — without any custom code. # Placement The **Placement** setting is only available when you're creating a **Section**, and it defines where that section appears on the page. They are explained in detail in [Creating a Section](/template-parts/creating-template-parts/creating-a-section). # Container Settings The **Container Settings** section is also specific to **Sections**, allowing you to control layout, device visibility, and wrapper settings. They are explained in detail in [Creating a Section](/template-parts/creating-template-parts/creating-a-section). # Fonts Fonts play a crucial role in shaping the visual identity and readability of your site. They help establish the tone and style of your content, making it more engaging and easier to read. Kalium offers a wide range of font options to ensure that you can find the perfect typeface for your needs. ### Types of Fonts We offer several types of fonts: * [**Google Fonts**](/typography/fonts/how-to-add-a-font): A vast collection of free, open-source fonts provided by Google. * [**Premium Fonts**](/typography/fonts/how-to-add-a-font): High-quality fonts that we have purchased and included for free in the theme. These fonts are available at no additional cost. * [**Adobe Fonts**](/typography/fonts/how-to-add-a-font/adding-adobe-fonts): Fonts from Adobe’s extensive library, accessible with an Adobe Creative Cloud subscription. * [**Self-Hosted Fonts**](/typography/fonts/how-to-add-a-font/adding-self-hosted-fonts): Fonts that you upload and host yourself on your server. * [**External Fonts**](/typography/fonts/how-to-add-a-font/adding-external-fonts): Fonts hosted on third-party services that you can link to from your site. * [**System Fonts**](/typography/fonts/how-to-add-a-font): Fonts that are pre-installed on users’ devices, ensuring compatibility and faster load times. # How to Add a Font This guide will show you how to easily add and manage fonts on your site. The steps are simple and straightforward, so you can quickly choose and apply fonts to get the look you want for your site. Let's add a new font, navigate to **Kalium -> Typography** from the WordPress admin dashboard. {% hint style="info" %} This guide covers Google Fonts, Premium Fonts, and System Fonts. For information on [Adobe Fonts](/typography/fonts/how-to-add-a-font/adding-adobe-fonts), [External Fonts](/typography/fonts/how-to-add-a-font/adding-external-fonts), and [Self-Hosted Fonts](/typography/fonts/how-to-add-a-font/adding-self-hosted-fonts), please refer to the other articles. {% endhint %} ### 1. Add a New Font Click on the "**+ Add Font**" button to start adding a new font.

### 2. Choose the Font Source Select the font source from the available options, such as Google Fonts, Premium Fonts, Adobe Fonts, Self Hosted Fonts, External Fonts, or System Fonts. The options you see will depend on the font source you choose.

### 3. Select Your Font In the left panel, browse through the available fonts or use the search option to find a specific font. You can also filter fonts by categories such as serif or sans-serif. Once you find the font you want, select it.

### 4. Select Variants On the right side, you’ll see the variant selector. Choose the specific variant of the font you wish to use, such as Regular, Bold, or Italic. If you don’t need a particular variant, it’s best not to select it, as unnecessary variants can impact your site’s performance. ### 5. Apply the Font Decide where you want the font to be applied, such as "Sitewide," "Headings," or "Paragraphs." By default, the font will be applied sitewide. If you want to use different fonts for different sections, you can customize the settings to apply one font to headings and another to paragraphs, or adjust as needed.

That’s all for the basic font setup. Be sure to save your changes by clicking the **Save Changes** button. The additional options available, such as Conditional Loading and Overwriting Font Settings, are more advanced and not necessary for loading a font but can be explored if you need more control over font management. # Adding Adobe Fonts The process of adding Adobe Fonts is quite similar to the general font adding process. By following these steps, you’ll be able to seamlessly incorporate Adobe Fonts into your site and enhance your typography. ### 1. Go to Adobe Fonts Start by visiting [Adobe Fonts](https://fonts.adobe.com) and searching for the font you want to use on your site. Adobe Fonts offers a wide selection, so take your time to find the perfect match for your design needs. {% embed url="" %} ### 2. Add to Web Project Once you've selected a font, click the **\ Add to Web Project** button. This will allow you to use the font on your website by linking it to a web project.

### 3. Create a Web Project A new popup will appear, prompting you to add the name of your project, name the project and choose the desired font variants (e.g., Regular, Bold, Italic) for this project, then click the "**Create**" button to generate your web project.

### 4. Access Your API Token Now that you've created your web project, head to the top right area of the Adobe Fonts page. Click on your profile icon, and in the dropdown menu, select "**API Tokens**." This is where you'll find the necessary API token to integrate Adobe Fonts with your site.

### 5. Copy Your API Token On the API Tokens page, locate your token on the left side. Copy this token, as you'll need it to connect Adobe Fonts with your site through Kalium.

### 6. Integrate with Kalium To finalize the process, navigate to **Kalium -> Typography -> Settings** in your WordPress dashboard. Paste the API token you copied into the "**Adobe Fonts API Token**" field. This will link your Adobe Fonts to Kalium, allowing you to use them on your site.

### 7. Add a New Font Navigate to the **Fonts** tab under **Kalium -> Typography**, then click on the "**+ Add Font**" button to start adding a new font.

### 8. Choose the Font Source Select the font source from the available options, in this case Adobe Fonts, and click "**Continue ->**".

### 9. Select Your Font In the left panel, the fonts you've selected and added to your project in Adobe Fonts will show while in the right you will see the variants you've selected.

### 10. Apply the Font Decide where you want the font to be applied, such as "Sitewide," "Headings," or "Paragraphs." By default, the font will be applied sitewide. If you want to use different fonts for different sections, you can customize the settings to apply one font to headings and another to paragraphs, or adjust as needed.

### Save Changes Well done! You’ve successfully added Adobe Fonts to your site. Now, you can start applying these fonts to various elements, ensuring your site’s typography reflects the style you’re aiming for. # Adding Self-Hosted Fonts The process of adding Self-Hosted Fonts is quite similar to the general font-adding process. This method also ensures compliance with GDPR regulations by hosting the font directly on your website rather than fetching it from external sources. By following these steps, you’ll be able to seamlessly incorporate your own fonts into your site and enhance your typography. ### 1. Add a New Font Navigate to the **Fonts** tab under **Kalium -> Typography**, then click on the "**+ Add Font**" button to start adding a new font.

### 2. Choose the Font Source Select the font source, in this case **Self-Hosted Fonts** and click "**Continue ->**".

### 3. Name Your Font Once you’re on the self-hosted font page, start by naming the font face you will be adding. For instance, if you are uploading the "Inter" font, you will name it "Inter." ### 4. Upload and Set Up Self-Hosted Font and Variants Now you can set up the font style, weight, and upload the font files. You can also preview the font on the right side of the page. Here’s what you need to do: * **Font Style**: Choose between Normal or Italic. * **Font Weight**: Select the appropriate font weight for the variant you are uploading. * **Font Files**: Upload the WOFF2 font file or choose it from the media library. WOFF2 is the only necessary font file; the others are optional for older browser support but not required.

The “**Show more options**” button is designed for advanced use only. If you click it, you’ll have the option to upload various web font formats, including WOFF, TTF, EOT, and SVG, in addition to WOFF2. If you have additional font variants, such as Bold, you can create them by clicking the "**+ Add Font Variant**" button, the variants will show on the right area of the page where you can preview the font you've added. Once you’ve set up the font variants, click "**Save Changes**." ### 5. Apply the Font Decide where you want the font to be applied, such as "Sitewide," "Headings," or "Paragraphs." By default, the font will be applied sitewide. If you want to use different fonts for different sections, you can customize the settings to apply one font to headings and another to paragraphs, or adjust as needed.

### 6. Save Changes Finally, save your changes to apply the font to your website. Your self-hosted font is now ready to use. Well done! You’ve successfully added a self-hosted font to your site. Now, you can start applying these fonts to various elements, ensuring your site’s typography reflects the style you’re aiming for. # Adding External Fonts Adding external fonts to your site is a straightforward process that involves linking to a stylesheet containing the web fonts you want to use. This method allows you to easily integrate fonts from external sources with minimal setup. ### 1. Add a New Font Navigate to the **Fonts** tab under **Kalium -> Typography**, then click on the "**+ Add Font**" button to start adding a new font.

### 2. Choose the Font Source Select the font source, in this case **External Fonts** and click "**Continue ->**".

### 3. Add the font URL In the “**Font Stylesheet URL**” field, you need to paste the URL of a stylesheet that includes the web fonts you want to use on your site. This stylesheet should contain `@font-face` rules, which define how the fonts are displayed. For example, if you are adding the Merriweather font directly from Google Fonts, you would use a URL like `https://fonts.googleapis.com/css2?family=Merriweather`. This URL links directly to a stylesheet that includes the necessary font declarations, ensuring that the Merriweather font is properly loaded and applied to your site.

### 5. Apply the Font Decide where you want the font to be applied, such as "Sitewide," "Headings," or "Paragraphs." By default, the font will be applied sitewide. If you want to use different fonts for different sections, you can customize the settings to apply one font to headings and another to paragraphs, or adjust as needed.

### 6. Save Changes After entering the stylesheet URL, click “**Save Changes**” to apply the font to your site. The font will automatically load from the external source and be available for use. # Custom Selectors In this section, you can apply the font to specific areas of your site by choosing from the list of pre-defined selectors or by entering a relevant CSS class or ID. This feature gives you precise control over where the font appears on your site. For example, if you want all blockquotes to be bold and use a specific font, you can select this option from the pre-defined templates. This way, every blockquote across your site will automatically adopt the font settings you've chosen, such as making it bold. This granular control helps you ensure that the font is used exactly where and how you need it.

Keep in mind that if you change the font size here, it will override the default "Font Sizes" settings. For those new to CSS, it's advisable to first review the "Font Sizes" tab to understand the basics. # Advanced Settings Here, you can manage advanced options to customize the font experience, including when to load the font and how to override default font settings. This section is ideal for users who need specific configurations for different parts of their site or want to optimize font loading performance. ### Conditional Loading Configure when to include the font on specific pages, posts, or other post types. You can also exclude it from certain areas if needed:

### Overwrite Font Settings Manage additional font settings which will overwrite the font settings such as [Font Preload](/typography/typography-settings#font-preload) or [Import Font](/typography/typography-settings#font-import-placement), you can also set the status of the font from Active to Inactive or vice-versa. # Font Sizes Managing font sizes is important for a clean and consistent look on your site. The Font Sizes tab settings let you adjust how text appears across your website, including font size, line height, and letter spacing. Here’s a simple guide to help you customize these settings.

### Font Sizes You can change the font sizes for different parts of your site, including headings, paragraphs, and other text elements. This setting ensures that your typography scales appropriately across different sections of your site. ### Line Height Adjust the line height to control the vertical spacing between lines of text. This setting helps improve readability and ensures that text is properly spaced. ### Letter Spacing Set the letter spacing to control the horizontal space between characters. This can enhance the overall readability and visual impact of your text. ### Text Transform The Text Transform option allows you to adjust the case of your text, such as making it uppercase, lowercase, or capitalizing the first letter of each word. This helps with styling and consistency across your content. ### Units You can select from various units for font sizes, line height, letter spacing, and text transform, including: * **PX** (Pixels) * **EM** (Relative to the font size of the element) * **REM** (Relative to the root element’s font size) * **PT** (Points) * **%** (Percentage) * **VW** (Viewport Width) Alternatively, you can use the global unit setting available under [**Kalium -> Typography -> Settings** **->** **Default Unit**](/typography/typography-settings#default-unit) to standardize the unit across your site. ### Responsive Options Each section for font sizes, line height, letter spacing, and text transform includes responsive options for different devices: * **Desktop** * **Tablet** * **Mobile** This ensures that your typography adjusts appropriately for various screen sizes and devices, providing a seamless experience for all users. By adjusting these settings, you can ensure that your site's typography is not only visually appealing but also consistent and responsive across different devices. *** ### Base Font

The **Base Font** section allows you to set the root font size for the site. This is particularly important when using relative units such as **EM**, **REM**, and **%**, as these units are based on the base font size. By defining the base font size, you ensure that all relative font sizes scale appropriately across your site. This setting provides a consistent typographic scale and helps maintain readability. Adjusting the base font size affects how other font sizes are calculated when using relative units. For example, if you set the base font size to 16px, a font size of 1.5rem will be 24px (1.5 times the base size). This consistency is crucial for responsive design, ensuring that text remains proportionate and legible across different devices. *** ### How Can I Set a Specific Font Size for a Selector on the Site? To customize the font size for a specific CSS class on your site, follow these simple steps: * Go to **Kalium -> Typography -> Fonts**. * Select the font you’re using from the list. * Scroll down to **Custom Selectors**. * Click on **+ Add New Selector**. * Enter your desired class name, for example, `.my-custom-class`. * Set the font size and other settings as needed. * Save changes

By doing this, you can easily apply custom font sizes and other styling to specific elements on your site by targeting their CSS class. By using Inspect Element, you can accurately identify and target the exact area where you want to apply custom font sizes and other styling adjustments. #### Targeting a Specific Area Using Inspect Element To apply the font size to a specific area on your site, you first need to identify the CSS class used for that area. Here’s how to do it: 1. **Right-click on the area** of your site where you want to apply the custom font size. 2. **Select "Inspect"**

or "Inspect Element" from the context menu . This will open the browser’s developer tools. 3. **Look for the CSS class** applied to the selected element in the HTML structure on the left side of the developer tools. 4. **Copy the class name**. For example, you might see something like `

`. 5. **Use this class name** (e.g., `.header-title`) when adding a new selector in the Font settings. 6. **Follow the steps** to add a new selector and set the font size for this class. # Typography Settings Various settings are available to help you customize the typography on your site. Here’s a look at the options for managing and adjusting your fonts

### Typography Status This setting allows you to enable or disable fonts on the front end of your website. By toggling this option, you can control whether the selected fonts are applied to your site’s design. ### Font Preload The Font Preload option helps improve page loading speed and user experience by preloading the fonts. When enabled, it loads the fonts early in the page rendering process, making sure your text displays as soon as possible. ### Pull Google Fonts When this option is enabled, Kalium will load Google Fonts locally instead of pulling them from Google’s servers. This can help with site performance and privacy by reducing external requests. ### Font Import Placement This setting determines where the font import code is placed within your HTML document. You can choose between: * **Before page renders (Inside ``)**: This option loads fonts before the page content is displayed. * **After page renders (Inside ``)**: This option loads fonts after the page content is displayed. ### Font Face Rendering The Font Face Rendering setting lets you choose how to render the font faces for better performance. The available options are: * **Swap (default)**: Ensures text is displayed using a fallback font until the custom font is fully loaded. * **Auto**: The browser decides the best rendering method. * **Block**: Prevents text from being displayed until the custom font is fully loaded. * **Fallback**: Uses a fallback font initially, then swaps to the custom font. * **Optional**: Similar to fallback, but with less priority on loading the custom font. ### Adobe Fonts API Token To use Adobe Fonts with Kalium, you need to provide an Adobe Fonts API token. This token fetches your font projects and integrates them into the theme, allowing you to utilize Adobe’s extensive font library. ### Default Unit This option allows you to set the default unit for font sizes, line heights, and letter spacing. You can choose between units like pixels (px), em, or rem, depending on your design preferences. ### Font Preview Text Here, you can enter custom text that will be displayed as a preview when selecting different font variants. This allows you to see how your chosen fonts will appear with your specific text. ### Font Preview Size This setting lets you specify the font size, in pixels, for the preview text. Adjusting this helps you better visualize how the font will look in different sizes. ### Fonts Directory The Fonts Directory option shows you where your fonts are stored and managed. The default directory is: `~/wp-content/uploads/typolab-fonts/` This is where your locally stored fonts are kept and where you can manage permissions for font usage. ### Export Fonts The Export Fonts section allows you to export various font settings, making it easy to back up or transfer your typography setup. You can choose to export: * **Fonts** * **Font Sizes** * **Font Settings** Simply click the **Export** button to generate an export string. ### Import Fonts In the Import Fonts section, you can paste an export string from another site or backup to import your font settings. This makes it simple to replicate typography settings across multiple sites. These typography settings give you granular control over how fonts are managed, rendered, and displayed on your site, ensuring a consistent and professional appearance. # Brand and Logo In Kalium, setting up your site's branding is quite simple. You can easily manage your branding elements through the **Appearance** -> **Customize** -> **Styling** -> **Brand** section. You have the option to use a logo or not by switching the toggle. This area allows you to customize the following key brand elements:

* **Site Title**\ Set the name of your website, which will be displayed in various parts of your site and can enhance your site's identity. * **Tagline**\ Add a brief description or slogan for your website, giving visitors a quick insight into what your site is about. * **Site Logo**\ Upload your logo to represent your brand visually across your website. You can choose to enable or disable the display of the logo as needed. * **Logo Width**\ Adjust the width of your logo to fit your site's design. Responsive options are available, allowing you to set different logo widths for various devices (desktop, tablet, and mobile) to make sure your logo looks perfect on all screen sizes. * **Site Icon**\ The Site Icon is the small image you see in browser tabs, bookmark bars, and within the WordPress mobile apps also known as the favicon. It’s an important branding element for a professional appearance. The icon should be square and at least `512 × 512` pixels in size. * **Tab Color**\ This color applies only on browsers that support the `theme-color` feature. It appears on some browsers that support it, allowing you to match your tab color with your site's branding. # Colors Colors are a fundamental aspect of the theme, and understanding how to work with them will help you achieve the best results and enhance your site’s overall appearance. To manage and edit colors go to **Appearance** -> **Customize** -> **Styling** -> **Colors** *** ### Base Palette The color palette defines the base colors of your site based on your brand guidelines. It is a set of of **8 colors** by default but you can add more colors by clicking the :heavy\_plus\_sign: icon in upper part of colors strip. Base palette colors are utilized to be used throughout all color pickers as references so when you update a color in the base palette, every other reference is updated automatically as well. You can also choose from predefined palettes by clicking the :art: palette icon.

When the colors are modified, the :pencil2: icon will show up instead of the :heavy\_plus\_sign: icon where you can save the current set of colors as a palette:

Custom colors can be saved as new palette

After you save the palette, it appears in the list of **Custom Palettes** as **Palette X** where X is an ordered number:

List of theme defined palettes with custom user palettes

You can also export or import existing palettes including current colors in the same dialog by clicking **Export/Import** tab:

Export and/or Import current palette colors and custom user palettes

*** ### Global Theme Colors Theme palette colors are also recognized by both the Gutenberg and Elementor. This ensures consistency across your site’s design, allowing you to seamlessly apply your chosen color palette in different parts of your site, whether you’re using the Gutenberg blocks or Elementor’s widgets.

*** ### Global Colors * **Links** - Normal and hover color for every link in the theme. * **Text** - Default text color and muted text color. * **Text Selection** - Change how selected text looks when selected. *** ### Headings * **Headings H1-H6** - Default colors for all headings (as every heading size inherits from this value). * **Heading 1** to **Heading 6** - Custom color for every heading size. *** ### Other Colors * **Footer** - Footer background, text, headings and link colors. * **Site Background** - The body background color. * **Overlay** - Default color of backdrop overlays for lightboxes. ### CSS Color References Every color provides a CSS variable reference of this form you can use throughout the site: ```css var(--k-color-1) var(--k-color-2) var(--k-color-3) var(--k-color-4) var(--k-color-5) var(--k-color-6) var(--k-color-7) var(--k-color-8) var(--k-color-9) /* custom added colors */ ``` As well as their RGB variant: ```css var(--k-color-1-rgb) var(--k-color-2-rgb) var(--k-color-3-rgb) var(--k-color-4-rgb) var(--k-color-5-rgb) var(--k-color-6-rgb) var(--k-color-7-rgb) var(--k-color-8-rgb) var(--k-color-9-rgb) /* custom added colors */ ``` So you can use with custom opacity for example: ```css background: rgba(var(--k-color-1-rgb), 0.5); ``` # Buttons Globally manage the appearance of buttons across your site to have a consistency in design. Customize the button styles under **Appearance** -> **Customize** -> **Styling** -> **Buttons**. Each button style can be set for three states: * Normal * Hover * Active

This means that you can define how buttons look by default, how they change when hovered over, and their appearance when actively clicked or pressed. All options related to colors apply to these three states. *** ### Color

#### **Text Color** Set the color of the text on your buttons. Make sure there is enough contrast with the background color to help users with different abilities read the text easily. #### Background Color Choose the background color for your buttons. Ensure it contrasts well with the text color to make it easy to see. *** ### Box Shadow

#### Box Shadow Add a shadow effect to your buttons. You can adjust the shadow’s color, blur, spread, and position to give the button a 3D look and make it stand out. *** ### Padding & Border

#### Padding Adjust the space around the button text to change its size and spacing. This setting applies to all buttons and doesn’t change with different states. #### Border Radius Set how rounded the corners of the buttons are. This lets you create buttons with either square or rounded edges. #### Border Customize the border color, style, and width of your buttons. Keep in mind that the border color on Hover and Active states won’t be visible unless a border width is set. If you want to set the border width and color manually for each of the four sides, click the link icon (🔗) to unlink the values. # Forms Manage the appearance and layout of forms across your entire site to maintain a consistent design. This applies to all forms, including contact forms, search forms, comment sections, checkout pages, and more. You can customize the form styles under **Appearance** -> **Customize** -> **Styling** -> **Forms**.

### General The General tab in allows you to control the overall layout and style of forms across your site. This tab includes options to choose the layout type and activate the legacy form style if needed. #### Form Layout This section lets you select the basic structure of your forms. You can choose between two layout types:

#### Type 1 The default form layout option. This style features a boxed layout, providing a traditional and structured appearance for your forms. #### Type 2 A more minimalistic layout option where form fields appear as underlined rather than boxed. This style gives your forms a modern and sleek look. {% hint style="info" %} **Legacy Form Style**\ This toggle is available for users who have migrated from Kalium 3 and want to continue using the old Kalium forms. However, it's not recommended to use this option as it is considered legacy and will be removed in future updates. {% endhint %} *** ### Style In the Style tab, you can customize various aspects of the form fields: #### Input & Textarea

* **Placeholder**: Set the text color for the placeholder in form fields. * **Text**: Customize the text color for three states — Normal, Hover, and Active. * **Border**: Define the border color for the three states — Normal, Hover, and Active. * **Border Width**: Adjust the thickness of the border around form fields. * **Padding**: Control the space inside the form fields to adjust the size and spacing of the text. * **Border Radius**: Set how rounded the corners of the form fields are. #### Box Shadow Add a shadow effect to the form fields to give them depth and make them stand out, available for the three states (Normal, Hover and Focus).

{% hint style="info" %} Some style elements won’t be visible when using Type 2, as it lacks a regular border. Features like border radius and box shadow won’t be applied in this layout. {% endhint %} #### Textarea

* **Height**: Set the height of the textarea field to control how much text space is available. #### Checkbox and Radio

* **Checked**: Define the color that appears when a checkbox or radio button is selected. * **Border Radius**: Set the roundness of the checkbox and radio button corners. ### Will Form Styling Apply to Other Form Plugins? Kalium has been tested with the most well-known form plugins to ensure a seamless design experience. Even though these plugins have their own styling, Kalium will automatically select the necessary styling options so that our styles apply to each form. Make sure to select the **Theme Styled** option in your form plugin settings to make sure Kalium form styles are applied, no matter which plugin you're using. The supported plugins include * Contact Form 7 * WPForms * Fluent Forms * Forminator * Ninja Forms # Layout Layout options allow you to set the container size for the entire site and adjust block spacing. To edit the layout options go to **Appearance** -> **Customizer** -> **Styling** -> **Layout** ### Container Width There are three predefined widths you can set for the container size: * **Large -** Maximum width is 1296 pixels. * **Medium** - *Default*, maximum width is 1116 pixels. * **Small** - Maximum width is 936 pixels. * **Custom** - User defined maximum width

If you want to set a full width for the container check the above option **Full Width Container** toggle. ### Block Spacing Block Spacing controls the space between two blocks. It is especially useful for nested blocks, like images within a Gallery block. Setting the Block Spacing to zero removes the gap between blocks, while leaving it empty uses the default spacing. You can choose between **8 predefined block spacings** but also set your preferred spacing value which is responsive friendly:

### Container Width on Single Page If you want custom container size on page level (not entire site) you can do this by clicking **Edit Page** or **Edit Post** (whatever single page): Go to **Parameters and Options** -> **Page Options** -> **Other Settings**

Setting custom container width for current page/post

The same settings available in the Customizer are also found here. # Link Styles Links inside pages, blog posts and other related entry content can have custom link animation / style, which can be edited on **Appearance** -> **Customizer** -> **Styling** -> **Link Styles** The default link style is Animated Underline which dates back from very first version of Kalium but you can change them to your preferred style and animation. Every link style has its own set of options which you can set for individual styling. ### Standard This type of link style is common on all websites. It makes plain links with default underline styling applied by the browser and has no custom options. ### Underline This type of link style is more advanced in terms of appearance and options. It can be Static or Animated underline. You can set custom **direction** for underline animation, **thickness**, **position** and **color**. A common option is to make everything go in reverse animation by toggling **Reverse State** option.

### Swap This link style swaps the link in two directions **Top** and **Bottom**. ### Fill This link style has two types: **Background** and **Text**. Background type sets the filling animation in specified direction: **top**, **bottom**, **left** and **right**. Text type animates the filling color inside text based horizontal direction **forwards** or **backwards**.

# Site Frame Site frame is an optional feature that can be added to your site where it adds a border around your entire site. It is usually used by creative sites which want to have an unique experience of showcasing their services / products. To enable the Site Frame go to **Appearance** -> **Customize** -> **Styling** -> **Site Frame** and click the toggle on the right to enable it:

There are variety of options that allow you to customize the look of the frame and the changes are shown on realtime while you edit them: * **Color** - The color of the border. * **Width** - The width of the border, responsive value. * **Radius** - The radius of the border, responsive value. * **Animation** - The entrance animation when the page first loads. * **Duration** - The duration of animation (*in seconds*). * **Delay** - The time to wait before animation starts (*in seconds*). * **Visible On** - Toggle the device viewports where the site frame / border will be shown.

Preview of the site frame while editing it

# Translation introduction At Laborator, we recognize that our theme should cater to a diverse, global audience. To accommodate this, we have built Kalium with translation in mind, ensuring that every word and sentence can be personalized to fit various languages and locales. Whether your site is in a single language or supports multiple languages, Kalium provides flexible options for translation. ### Available Languages Kalium comes with built-in support for 30 languages, so you can easily switch your site to one of these languages. The theme strings and words are translated for all these languages, but this does not mean that Kalium is limited to just these languages. The theme can be used with any language in the world, and you can translate it manually using tools which we'll mention later below. The available languages include: | :flag\_de: German | :flag\_at: German *(AT)* | :flag\_ch: German *(CH)* | | ----------------------- | ------------------------ | ---------------------------- | | :flag\_fr: French | :flag\_es: Spanish | :flag\_al: Albanian | | :flag\_it: Italian | :flag\_nl: Dutch | :flag\_be: Dutch *(BE)* | | :flag\_cn: Chinese (CN) | :flag\_jp: Japanese | :flag\_kr: Korean | | :flag\_se: Swedish | :flag\_gr: Greek | :flag\_ru: Russian | | :flag\_pl: Polish | :flag\_lt: Lithuanian | :flag\_bg: Bulgarian | | :flag\_si: Slovenian | :flag\_pt: Portuguese | :flag\_br: Portuguese *(BR)* | | :flag\_no: Norwegian | :flag\_tr: Turkish | :flag\_cz: Czech | | :flag\_fi: Finnish | :flag\_sk: Slovak | :flag\_ro: Romanian | | :flag\_hu: Hungarian | :flag\_dk: Danish | :flag\_ua: Ukrainian | To switch to one of the available languages: 1. Go to **Settings -> General** in your WordPress dashboard. 2. Change the **Site Language** to the desired language (e.g., Deutsch for German). 3. After a few minutes, check for updates under **Dashboard -> Updates**. Install the updates to apply the translations.

If you find any translation that doesn’t seem accurate, please report it on our [support forum](https://laborator.ticksy.com/). *** ### Single Language Sites If your site operates in a single language, you’ll need to translate only the theme strings, you can use one of the following methods: * **WordPress Plugin**: Use plugins like [Loco Translate](https://wordpress.org/plugins/loco-translate/) to translate strings directly from your WordPress dashboard. [Translating with Loco Translate](/translation/translating-with-loco-translate) * **App**: Use applications like [Poedit](https://poedit.net/) to manually edit and translate the theme's `.po` files. [Translating with Poedit](/translation/translating-with-poedit) These methods will help you translate and customize Kalium for any language. *** ### Multi-Lingual Sites If you need your site to support multiple languages, you’ll need a multilingual plugin. There are several options available to help you achieve this: * [**WPML**](https://kaliumtheme.com/go/wpml): A paid plugin that allows full translation of theme strings, pages, posts, and more. It’s thoroughly tested with Kalium and offers the most reliable experience. [Translating with WPML](/translation/translating-with-wpml) * [**Polylang**](https://wordpress.org/plugins/polylang/): A freemium plugin offering basic multilingual features for free, with the option to unlock advanced functionalities through paid add-ons. * [**Weglot**](https://kaliumtheme.com/go/weglot): This plugin provides instant translation with the option to manually adjust translations. It’s free for small sites, but you’ll need a paid plan for larger projects. Each of these plugins can help you create a multilingual site, but for the best results, we recommend WPML due to its full compatibility and proven reliability with Kalium. *** ### Contributing to Translations We are committed to making Kalium accessible in as many languages as possible, but translating the theme into every language is an ongoing effort. If you'd like to contribute to translating Kalium into a language that isn't fully supported yet or suggest improvements, we invite you to join our translation community: 1. Visit our [Kalium Translation Portal](https://translate.kaliumtheme.com/projects/kalium/) powered by GlotPress. 2. You can translate theme files directly through the platform or propose changes to existing translations. 3. Your contributions will be reviewed, and approved translations will be credited in the theme changelog. Thank you for helping us enhance Kalium's accessibility for users around the world! --- [Next Page](/llms-full.txt/1)