Pricing Tables #3

Custom designed 3 column pricing tables

Information

How to add to your site: Please check DOCUMENTATION

Custom CSS

.ds-price-col {
	background: #f7f7f7;
	padding: 0 30px 30px;
	border-radius: 10px;
        margin-bottom: 10px;
	display: flex;
	flex-direction: column;
}

.ds-price-col:hover {
	transform: scale(1.1);
	transition: transform 0.3s ease;
}

.ds-price-col h3 {
	padding: 40px 20px 35px;
	margin-left: -30px;
	margin-right: -30px;
	border-radius: 10px 10px 0 0;
}

.ds-price-col ul {
	height: 100%;
}


.ds-price-price {
	margin-bottom: -12px;
}

a.wp-block-button__link:hover {
	background: #ff6900;
}

This is a custom-designed pricing table for Gutenberg page builder. Most of the elements can customize inside the WordPress editor. I have added some custom CSS to further extend the styling and hover animation.

Button hover colour

To change the button’s background color when mouse over, please change the below snippet.

a.wp-block-button__link:hover {
	background: #ff6900;
}

Tables zooming effect

If you wish to change the zooming effect on hovering, please remove this part or change it the way you want.

.ds-price-col:hover {
	transform: scale(1.1);
	transition: transform 0.3s ease;
}

As you can see here I have used a Custom HTML block below the pricing tables to insert the CSS snippet. If you like you can remove this from here and add it directly to your website. If you don’t know how to add custom codes to your WordPress site, please check the below article.

How to add Custom CSS to WordPress: Beginner’s guide