Cool CSS Effects: Transform Your WordPress Site Using WPBakery

While making a website can be really easy and fast these days with an endless amount of themes to choose from and builders offering pre-made templates, sometimes you need the website to be more unique and stand out from the rest.

From subtle animations that breathe life into your buttons to smooth transitions that guide your visitors’ journey, these effects have the potential to elevate your site’s aesthetics and user experience. The good news? You don’t need to be a coding wizard to achieve these stunning results. With WPBakery Page Builder at your disposal, you can seamlessly integrate a plethora of CSS effects that will leave a lasting impression on anyone who interacts with your website.

Let me walk you through the process of adding CSS to your site while also showing you some beautiful effects that you can use yourself.

What is CSS?

CSS which is short for Cascading Style Sheets is what is used to style your layouts. So it’s the colors, font sizes, animations, all sorts of effects and other things that make websites look like they look.
As the purpose of this article is to add CSS effects to the site, let me quickly show you the structure of CSS code because that’s what we’re going to be adding.

CSS structure

We’re going to mostly be adjusting and changing the selectors and values if anything at all. But more about that later.

Built-in CSS Animations

Before diving into custom CSS and effects you can find on the internet, WPBakery comes equipped with built-in CSS animations that you can apply to multiple elements like button elements, Single Image, Text Block, Icons, and others.

Built-in animations

To add a CSS animation to an element:

  1. Open the edit window for the element;
  2. Scroll down to the CSS Animation section;
  3. Choose the effect;
  4. Click “Save changes”.

Where to find CSS effects?

As with everything these days, there are many ways to get your hands on some cool effects. The first is obviously Google.

Google Search

CodePen is another excellent option because it’s a community-driven resource where you can find code snippets shared by others and see how they will look.

CodePen

And last but not least everyone’s new personal assistant – ChatGPT. Which is an AI chatbot that will help you generate any effect you can think of as long as you ask the right questions.

ChatGPT

Apart from these, you can also find inspiration from Awwward, Dribbble, and Behance. All of these will give you an endless amount of inspiration, examples, and tutorials, and if used together will definitely help you make your website stand out.

How to add custom CSS in WBakery?

There are multiple ways you add custom code with WPBakery and every single one of them is quick and easy. You can add custom CSS to the whole site, to a page, to a specific element, and in one case – to a particular part of the text (I’ll walk you through this a little later).

So let me show you how to add CSS to any element. I’ll use a text block as an example.

  1. Add the element, Text Block in this case, to the page;
  2. Open the element edit window by clicking on the edit icon in the green controls that will appear when you hover over the element;
  3. Scroll to the bottom of the edit window and locate the Extra Class Name section;
  4. Add an extra call name to the element;
  5. Click Save Changes;
  6. Go to the Page Setting by clicking on the gear icon on the top right;
  7. Locate the Custom CSS section;
  8. Add your custom CSS code snippet;
  9. Add the extra class name you chose before as the selector;
  10. Click Save Changes and your effect will be applied.

As you can see, it’s basically just 2 big steps – give an extra class name to an element and then add your custom code with the extra class name you gave before.

Glow/Shadow Effect

The first effect we’re going to be looking at is simple yet effective – it’s the glow effect that can easily be made into a shadow.

Glow effect

To apply a glow effect to text, you just have to add a Text Block to a page, give it an extra class name, like “glow-effect” for example, and paste the following code snippet into the Page Settings:

.glow-text {
text-shadow: 0 0 10px rgba(255,255,255);
}

These are the values of this code snippet:

  • Horizontal offset: 0
  • Vertical offset: 4px
  • Blur radius: 6px
  • Shadow color: rgba(255,255,255)

You can adjust these values to make the effect fit your layout. For example, making this into a shadow, not a glow would require you only to change the color to black.

If you want to apply a glow or a shadow to a box rather than a text, add an extra class name to a bigger block of content, like a column or row. You can do that the same way you would to an element, just by opening the edit window for each of those.

This is the code snippet for a box shadow:

.box-with-shadow {
box-shadow: 0 0 10px rgba(0, 0, 0, 0);
}

Box shadow effect
Both of these effects can really elevate your design and highlight the most important things.

Effect on a specific word or phrase

Let’s say you don’t to add an effect to the whole text but you want to highlight a specific word or phrase within your text. That is easily done as well.

Glow effect for words

Start by adding a Text Block element and in the TinyMCE editor, choose the Text tab instead of the Visual tab.

Class name for text

Here instead of adding an extra class name to the whole element, you’ll have to add a class name to the specific words. If you already know how to do that, that’s great! But if you don’t you can ask ChatGPT to do that for you. This is the prompt I used to add the class name “traveling-glow” to the words “traveling is a way of living” in the first paragraph of the text.

ChatGPT promt

Now just replace the code original code with the one that ChatGPT generated, click Save changes and that’s the first and only step that’s a little different.

To add the effect, do the exact same as before. Add the code snippet to the Page Settings and change the selector to the class name that we gave before.

.traveling-glow {
text-shadow: 0 0 10px rgba(0, 0, 255, 0.7)}

Text highlight hover effect

Now that we’ve got the mechanics of adding CSS effects down, we can look at some more cool-looking effects. Like this hover effect that highlights your text in an interactive way.
This effect can be found on CodePen.

Here’s the code snippet for the effect:

a {
color: #000;
position: relative;
text-decoration: none;
}

a::before {
background: hsl(45 100% 70%);
content: "";
inset: 0;
position: absolute;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s ease-in-out;
z-index: -1;
}

a:hover::before {
transform: scaleX(1);
transform-origin: left;
}
Hover text effect

To apply it to text in WPBakery, you guessed it, follow the same steps:

  1. Add a Text Block element;
  2. Give the element an extra class name;
  3. Copy the code snippet from CodePen and paste it into the Page Settings;
  4. Replace all selectors with the chosen extra class name.
Hover text effect

And once you click “Save changes”, the effect will be added.

Image hover zoom effect

Another interactive hover effect is this zoom effect that can be applied to any image.

Image zoom effect

This is the code snippet you need to apply this effect:

.img-hover-zoom {
height: 300px; /* [1.1] Set it as per your need */
overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

.img-hover-zoom img {
transition: transform .5s ease;
}

.img-hover-zoom:hover img {
transform: scale(1.5);
}

Remember: If you add the same extra class name to multiple elements, columns, or rows, the effect will be added to all of them.

All other steps are the same: extra class name to the Single Image element, copy-paste the code snippet in the Page Settings and you’re done.

Start styling!

Adding some extra styling to your site can be an easy process if you know where to look for some code snippets and have the right tools to add them to the site. As we saw from the examples, the WPBakery page builder allows you to add CSS code snippets to elements on the page and you can see them come to life without leaving the page.

Start experimenting and watch how your WordPress website comes alive with interactive, eye-catching elements that truly capture attention.

How to Create A Perfect Post Grid

You are using WordPress page builder to create beautiful pages and posts for your website, but when it comes to post archive you are struggling. There is no content area defined where you could apply all the power of page builder and theme options have less customization than you expected.

Make Your Own Website Easy

Making your own website is a common case with so many platforms and tools available on the market. While top digital agencies offer costly custom solutions there are cases when you simply don’t need one. Or maybe your startup is in the early stage and every dollar counts. At this point, it is obvious you will start looking into ready-to-use solutions and free platforms like WordPress to help you make your own website easy.

Advanced User Role Management in WPBakery Page Builder

Recently we published article on our blog about WordPress User Role Management explaining all the basic user roles and their main purpose. The follow up question is what WPBakery Page Builder can offer for different user groups and how features available in our page builder plugin gets managed across them. WPBakery Page Builder has inbuilt user group access management mechanism allowing to restrict usage of WPBakery Page Builder for specific user groups, including custom user roles, and post types. There was also an easy way to control WPBakery Page Builder element availability for different user roles.

WordPress User Roles Explained

If your business requires multiple persons to manage your site or if you are running a blog with several authors and editors you must pay attention to how you manage user role access. Users should have access only to those parts of your WordPress site which are related to them directly. Why? Because you do not want to end up with unprepared staff members managing your pages or guest authors publishing posts before they are approved by an in-house editor.

5 Tips on How to Build a Better Product Page

If you are having e-commerce shop or sales page you must already know how important it is to display products in a customer-friendly manner. Here we talk about the quality of information, layout, and use cases – everything matters. In fact, it has a huge impact on whether potential customers will actually purchase your products.

The Key to Fast Web Design with Reusable Content

Whether you are a novice WordPress user building your first site ever or a pro web designer with multiple projects you want your site to get up and running in the shortest possible time. Different tools and plugins like page builder, slideshow manager, and so on can assist you there. Nevertheless, one of the most important parts you should pay attention to is if they care about reusability. With a great toolset, you can easily build some parts of your content from scratch and even manage it over time, but how about having reusable content to replicate it again and again on different pages or sections of your sites?

Building Successful WordPress Portfolio That Sells

Showing off your portfolio on the web is common practice and a must if you are looking for a way to attract more customers for your products or services. Whoever you are – photographer, freelance web developer, artist, singer, or plumber your customers will surely find your site more interesting if they will be able to see your previous works.

Making your life better with ready to use templates

WPBakery Page Builder is an amazing time saver and easy-to-use tool to build your WordPress pages. But we think that saving time is not just enough for you and your clients. While some people had the opportunity to craft their creative and design skills, others focused on business, engineering, etc., but this does not mean that they do not want super cool layouts, even if they are not able to figure them out.

Expanding WPBakery Page Builder with your set of WordPress shortcodes

While using WordPress shortcodes for website building and management many users struggled to combine different plugins and shortcodes in order to enhance the possibilities of their website. Different shortcodes required different input tools or mechanisms and in a typical site-building process users were required to switch between different interfaces to achieve their goals. The same issues were addressed to WPBakery Page Builder, as 3rd party shortcode developers needed to adapt their shortcodes to get recognized by WPBakery Page Builder. Obviously, such an approach was not user-friendly as not all developers adjusted their shortcodes.