Tilting A Box or Image (CSS)

Titling a content box or image is such a cool feature, and the best thing is you don’t need a plugin to do it.

Getting Started

1. Create the design you want to tilt.
2. Save the page and open to view the design.
3. Use your browser’s element inspector tool (sometimes called Inspect depending on your browser) to help you choose the right selectors to target the image or box you want to tilt. This will open up the dev tools.
4. The dev tools should open up in Styles.
5. The first element should be your element code, copy the first part before the brackets. Test our content box above, the element is .kt-info-box93743_97a6f1-43 .kt-blocks-info-box-link-wrap.
6. Paste it in .your-sector element goes here. using the code below.
7. Copy the whole code and paste it in your preferred Custom CSS – see further instructions below.

Here’s the exact snippet we use on our websites, the instructions are below the snippet code.

Code Snippet

/* Add an identifier such as page location and/or id ie: taster-block-4
------------------------------ */
.your-sector element goes here {
      position: relative;
      transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    }

NOTE: This same principle works for containers, images, titles, and more.

Where to Add This Code

Here are two easy options:

Option 1: Install WPCode Lite Plugin

This is by far the safest method and is beginner friendly if you’re not used to editing theme files.

1. Search for WPCode Lite plugin in your website dashboard.
2. Install and activate the plugin.
3. Go to Snippets > Add New.
4. Give your snippet a name like “Tilted Boxes.”
5. If necessary, make the changes mentioned above.
6. Paste the code above.
7. Choose CSS, not PHP or any other.
8. Save and activate.

✅ Done! Feature images on your post dashboard are now enabled.

Option 2: Page Custom CSS

This option specifically targets your page and the block you’re using.

1. Go to the content box where your design is.
2. Go to the Kadence menu > Advanced > Custom CSS or if you’re suing Kadence Pro add it to the Page Script.
3. Paste your code.
4. If necessary, make the changes mentioned above.
5. Save.

💡 Tip: 1. Depending on the tilt you want, alter the -3 value as desired. 2. Ensure your tablet and mobile responsiveness is working efficiently, sometimes mobile viewing might need to be disabled: Go to Kadence menu > Advanced, Visibility, and toggle your preferences.

Need to know the different ways to add custom CSS? Get started with: How To Add Custom CSS

NOTE: We use WPCode Lite because it’s more flexible than others, there’s no need to upgrade to pro unless you’re a developer, it offers many free snippets, can choose where to run it, won’t publish if the code is wrong so won’t break your site, PHP is included compared to others you have to buy their pro, and best of all the free version can easily be downloaded from your WordPress Repository.