avatar
master slider creation in WPBakery Page Builder WP Bakery Page Builder

• Assuming you have a design available, take advantage of using WP Bakery's expand/collapse content feature. When the plus/minus icon is clicked, it allows you to easily create collapsible sections on your website.

• First, we need to create a row that contains three columns with a ratio of 1/4 + 2/4 + 1/4. In the middle column, which has a ratio of 2/4, we will add a Text Block and a Toggle element in that order.

In the next step, you will need to adjust some settings in the `Toggle` element, including the Toggle content, Toggle icon, and Icon position. As for the Toggle title, you can skip that field and leave it as empty text.

In some cases, you can create extra class named `toggle-icon-custom` and style as below:

.toggle-icon-custom > div > div > a > span::before {
    border: 0 !important;
    width: 24px !important;
    font-size: 205% !important;
    height: 24px !important;
}

• On the other hand, you could opt for using one row for each question and styling it accordingly. The structure of the Edit Page would appear as shown below:

To adjust the style in the Inner Row, you can use an extra class and create a new class called `question-toggle`. This will allow you to apply styles to each question or toggle as needed.

.question-toggle {
    width: 60%;
    text-align: left;
    margin-left: 20%;
}
.question-toggle > div > div {
    border: 1.5px solid #DEE1E5;
    border-radius: 24px;
    padding-top: 16px;
    margin-top: 24px;
}
You need to login to do this manipulation!