avatar
advanced carousel in wpbakery page builder WordPress

• First and foremost, you need to prepare plan to use WP Bakery Page Builder plugin. Let add new element named `Advanced Carousel` from popup dialog here:

• Most of configuration are kindly complicated and need more time to practice as well. Hence, we will go some of detailed based on the following design:

In tab General from Advanced Carousel Settings, we can set up orientation of slider is vertical or horizontal and number of slider existed in screen.

In tab Navigation from Advanced Carousel Settings, we can set up style, size, color for navigation dot and arrow icon.

In tab Animation, we will choose `Fade In Up` as default.

In tab Advanced, there are some advanced configuration as below:

You can set up margin, padding and border in tab Design.

• Slider Item - which includes specific layout and separate parts as design above. We will need to Inner Row and follow the design to build up.

  • 1/1 -> Custom Heading.
  • 1/2 -> Text Block
  • 1/2 -> Single Image

• After you can duplicate slider item (Inner Row) to have multiple item and modify content on each slider item.

• There are some custom by CSS, you can add custom class into Inner row and modify style.

With next Inner Row, you can keep `home-slider-item` as CSS default.

.home-slider-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: right!important;
}

.home-slider-item .ult-item-wrap {
    flex: 1 1 50%;
}
.home-slider-item .ult-item-wrap:first-child {
    flex: 1 1 100%;
}
.home-slider-item .ult-item-wrap > div{
    width: 100%;
}

/** First slider item */
.highlight-item {
    Your Custom --> 
}
24
align widget center in WP Bakery add image from Figma to WP Bakery Page Builder text image box in WP Bakery Page Builder advanced carousel in wpbakery page builder
You need to login to do this manipulation!