How to add point effect to a column in Elementor

Want to add a point effect to a column in Elementor?

Elementor is perfect for create a website, in which the emphasis is on design. In Elementor, you can add animation effects to make your website more interactive.

One of the animation effects that you can add to an Elementor powered page is a point effect. You can add a point effect to a section, column, or widget.

This article will show you how to add a score to a column in Elementor. By the way, if you are new to Elementor, you can refer to our previous article to find out how to install Elementor.

How to add point effect to a column in Elementor

In Elementor, column is a required element. This is where you can add widgets - the actual design elements to create your page. As with other types of elements in Elementor, you can also customize a column to make it elegant.

You can add solid color background, image background, shadow, for hover effect. Elementor's built-in hover effect lets you use a different background, a different border, and a different drop shadow when pointing.

To start adding a point effect to a column in Elementor, first click on the handle of the column you want to add the point effect on to switch to the column settings panel.

In the settings panel (panel on the left side), go to the tab Style and open the block Background. In the latter, you can open the tab AU OVERVIEW to set a different background on the pointing state.

You can use a solid color background, a gradient color background, or an image background. You can also set the transition duration (the transition from the normal state to the pointing state) in the Transition duration option.

To set a different border and a different box shadow on the pointing state, you can open the block Border. Click on the tab OVERVIEW  of that block and set the border style, border size, border color, border radius, and area shadow for the pointing state.

Adding an advanced hover effect to a column in Elementor

Unlike Divi BuilderElementor does not use the CSS transform for its hover effect. Therefore, you can only add basic hover effects. But like Elementor (the pro version) you allows you to add custom CSS, you can use custom CSS to add CSS transformation to add advanced hover effect.

Rollover effects are created using the CSS transformation. To add a CSS transformation to a column, first go to the Advanced tab and open the block Custom CSS (make sure the settings panel is in column settings panel mode). Add the following CSS code.

The code :

selector: hover {transition: all .2s ease-in-out; transform: scale (1.1); cursor: point; z-index: 1; }

• Matrix
• Translate
• Scale
• Rotate
• skew

The CSS code above uses the scale transformation. You can simply replace it with whatever transform style you like.

Read this page to learn more about the CSS transformation.

1. Visual Restaurant Reservation

Create the system online booking of your restaurant or cafe website, thanks to this excellent premium WordPress plugin. With the latter, you will have the possibility to create tables and seats by yourself on the grid that this plugin offers and let your customers reserve the free ones, this is the main feature of this plugin and what sets it apart of the other plugins in this list.

Using Drag & Drop, you can drag different types of tables onto your restaurant's grid and calculate the maximum number of seats for each table as well as the number of tables. Visitors to your restaurant can choose the shape of the table they prefer and the location of the table in relation to the other tables in the grid.

here for you 5 WordPress plugins to optimize category descriptions and labels

The customers of your restaurant will be delighted to make this choice directly on the internet instead of traveling. With this plugin they will be able to get an idea of ​​what will await them today.

It offers among other features: support for Drag and Drop, 3 types of reservation system, a fairly intuitive handling, complete customization of its layout, and much more.

Download | Demo | Web hosting

• What is the difference between a blog and a website?
• How to copy and paste text in WordPress without formatting issues
• SEO benchmarking: Competitive analysis
• 5 WordPress plugins to accept PayPal payments