Assuming you have already set up the payment integration with your preferred payment gateway and have a payment button ready, you can use CSS to style the button and place it on the Divi form. Here’s an example of how you can do it:

1. First, create your payment button using HTML. For example:

<button class="payment-button">Pay Now</button>

2. Add custom CSS to style the button and position it within the Divi form:

/* Style the payment button */
.payment-button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Position the payment button within the form */
.et_pb_contact_form .payment-button {
  /* Adjust the positioning based on your specific layout */
  position: absolute;
  bottom: 20px;
  right: 20px;
}

Make sure to adjust the bottom and right values to position the button where you want it within the Divi form.

3. Now, add the custom CSS to your Divi theme. To do this, you can go to “Divi > Theme Options” in your WordPress dashboard. In the “Custom CSS” section, paste the CSS code you created in step 2.

Remember that the example above assumes you already have the payment functionality integrated into your form. If you don’t have the payment integration set up yet, you’ll need to do that separately using a payment gateway service or plugin, following their specific instructions.

Step 1: Open the Page with Divi Fullwidth Slider Go to the page where you have the Divi Fullwidth Slider module added.

Step 2: Find the Background Image Class Inspect the full-width slider section to find the CSS class that controls the background image. The class should start with .et_pb_slider .et_pb_slide. It may also include a slide number, like .et_pb_slide_1 or .et_pb_slide_2.

Step 3: Add Custom CSS Animation In the WordPress dashboard, go to “Divi > Theme Options” and click on the “Custom CSS” tab.

Now, add the custom CSS animation to the background image class you found earlier. For example, let’s add a simple scaling animation:

/* Example of scaling animation */
.et_pb_slider .et_pb_slide_1 {
  animation: scaleAnimation 5s infinite;
}

/* CSS Keyframes for scaling animation */
@keyframes scaleAnimation {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

In this example, the background image of the first slide will have a scaling animation that lasts for 5 seconds and repeats infinitely. You can modify the animation properties, duration, and keyframes as per your requirements.

Step 4: Save and Preview After adding the CSS animation, click on “Save Changes” and preview your page with the Divi Fullwidth Slider. You should see the animation applied to the background image of the first slide.

Feel free to experiment with different CSS animations and properties to create the desired effect. You can use various animation properties like opacity, translate, rotate, etc., to create more complex animations. Additionally, you can apply animations to other slides by changing the slide number in the CSS selector (e.g., .et_pb_slide_2 for the second slide).