build card view with image and text with border radius WP Bakery Page Builder

• Before using the WP Bakery Page Builder, it's important to have a design ready. So, let us start by preparing one.

Note: Please setup `full` for `Single Image` element.

• Firstly, we need to add new `Row` element and enter custom layout for your row: 1/1 + 1/1. Hence, you will reach the layout as below:

Note: You should add `cardview-mobile-box` in `Inner Row Settings`.

• Next step, we will write custom CSS and store in `Page Settings`. You can reference code as below:

.cardview-mobile-box {
        background: white;
        padding-bottom: 32px;
        margin: auto 2px;
        border-radius: 8px;
        box-shadow: 0px 4px 10px 0px rgb(0 0 0 / 10%);
.cardview-mobile-box > .wpb_column:nth-child(1) > .vc_column-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;	
.cardview-mobile-box > .wpb_column:nth-child(1) > .vc_column-inner > .wpb_wrapper > .wpb_single_image > .wpb_wrapper > .vc_single_image-wrapper > img {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;	
.cardview-mobile-box > .wpb_column:nth-child(2) {
        text-align: left;
.cardview-mobile-box > .wpb_column:nth-child(2) > .vc_column-inner {
       margin-top: 24px;
       margin-left: 8px;
       padding-right: 20px;
.cardview-mobile-box > .wpb_column:nth-child(2) > .vc_column-inner > .wpb_wrapper > .kleo_text_column > .wpb_wrapper > h2 {
        margin-bottom: 16px;
add image from Figma to WP Bakery Page Builder text image box in WP Bakery Page Builder layout icon and text in Text Block using wpbakery plugin
You need to login to do this manipulation!