As a best practice in Ascend, we recommend entering single variation values and allowing Ascend’s AI engine to find the best performing combination of the individual variations. However, there are times when a specific combination is desired.

Combining variations into a single Ascend value can easily be done several ways depending on the nature of the changes. For example, you may want to test a call to action (CTA) that has a red background color and white text or an H1 or H2 combination.

Example 1: Call To Action - combining the background color, border color, and text color.

The simplest way to do this is by using the custom CSS action but you can also use a custom JavaScript action and use JavaScript or jQuery to apply the CSS changes. In this example, I will use the CSS action.

Step 1: Select the CTA in the Ascend wireframe editor

Step 2: Click on the element

Step 3: Select the custom CSS action

Step 4: Change the values of the "background-color", “border-color”, and “color”

Step 5: Preview your changes in the editor

Example 2: Ensuring the H1 content changes are combined with H2 content changes.

Although you can use the HTML replace action we recommend avoid this action unless it’s necessary because of the potential experiment side effects outlined here. The best practice is to use the JavaScript action and apply the changes to each element (H1 and H2) in the value.

Step 1: Select the parent element of the H1 and H2 (it can be the “body”)

Step 2: Click on the element you just saved

Step 3: Select the JavaScript action

Step 4: Apply the changes in JavaScript

Step 5: Preview your changes in the editor

Did this answer your question?