How to Create a CSS & Text test

CSS & Text Tests let you make quick visual and textual changes directly on your existing pages — no duplicate pages, no redirects. With this type of test, you can modify button colors, typography, layout spacing, or even adjust the text of headlines, paragraphs, and calls-to-action — all within the same editor.

It’s a fast, lightweight way to discover which design and messaging combination drives more engagement, sales, or signups.

Step 1: Create a New CSS & Text Test

1. In your WordPress dashboard, go to Nelio A/B Testing → Tests.
2. Click Add Test.
3. In the dialog, select CSS and Text (under the “Global” test category).

💡 This test allows you to make small, on-the-fly design and text changes — perfect for fine-tuning elements like buttons, headlines, and product descriptions.

Step 2: Name and Define Your Test

Give your test a descriptive name (for example, (e.g., “CTA Button—Color & Label” or “Product Description Tone”).

In the right sidebar, you’ll find:

• Status & Management — Shows whether the test is Draft, Ready, Scheduled, or Paused, and lets you set start/end dates.
• Description — Summarize what you are testing and what you expect to achieve (for example, “More contrast + clearer copy increases sign-ups”).
• Test Scope — Define where your test will run:
  • By default, variants are visible on all pages of your website.
  • To limit visibility to specific areas, use the form to define URLs where the test should execute (for example, /shop/*, /landing/, /product/green-soil-lotus/).

Step 3: Create and Edit Variants

A CSS & Text Test compares alternative styles and text variations directly on your live pages.

Create New Variants

• Create a “Variant B” (or more than one) of your current CSS & Text.
• Each new variant starts as an exact copy of your current configuration.
• Rename each variant for clarity — for example, “Highlighted CTA.” or “Variant 2 – clearer copy.”
• Click Edit to customize each variant. You can also click Preview, Duplicate and Reset.

💡 Click New Variant to create a new alternative based on your current CSS style, or use Duplicate under any existing variant to create a copy of that specific configuration.

Editing a Variant

When you edit a variant, Nelio offers two complementary editing modes — the Visual Editor and the CSS Editor — so you can choose between simplicity or full control.

1️⃣ Visual Editor — Intuitive, No-Code Customization

The Visual Editor is ideal if you prefer to make changes without writing CSS. Simply select an element (for example, a button, heading, or text block) and use the sidebar controls to adjust:

• Colors: background and text color
• Typography: font family, size, line height, spacing, letter case
• Layout: padding, margins, and alignment
• Dimensions: width, height, and more

All changes appear instantly in the preview, allowing you to test visual improvements quickly and safely.

2️⃣ CSS Editor — Full Creative Control for Developers

If you prefer full styling flexibility, switch to the CSS Editor tab. Here you can write custom CSS rules to define exactly how elements should look or behave. You can target any selector and apply transitions, hover effects, or responsive adjustments.

.single-product .cart button.single_add_to_cart_button {
  background-color: #ff4d4f;
  color: #ffffff;
  border-radius: 8px;
  padding: 12px 28px;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
Code language: CSS (css)

💡 Tip: You can use the Visual Editor to find element selectors visually and then refine them with your own CSS in this editor.

3️⃣ Text Editing — Perfect Your Messaging

Beyond styling, you can also edit the text of any element directly from the variant preview. This includes headlines, button labels, paragraph content, product descriptions, and more.

Each text edit updates live in the preview so you can immediately see how it looks. Combining text and visual tweaks lets you test both appearance and messaging for maximum impact.

Step 4: Define Goals and Conversion Actions

Every test needs a goal — what counts as success.

Each goal can include one or more conversion actions that describe the specific behavior you want to track.

Name your goals, then click the Add Action button to choose from the available conversion actions.

You can combine multiple actions under one goal.

🔍 Learn more: What Are the Conversion Actions and Goals? →

Step 5: Add Segmentation Rules (Optional)

Segmentation lets you decide who participates in the test. You can target visitors by conditions such as:

URL parameter · Referrer · Language · Location · Logged-in status · Visitor Type · Day/time · Browser · Device type · Operating system · Window Width · Cookie · IP address

If you skip segmentation, all visitors to the tested pages are included automatically.

🔍 Learn more What is Segmentation and How to Use It →

Step 6: Start the Test

When everything is ready:

1. Review your setup summary at the top of the page.
2. Click Start.

Nelio A/B Testing will:

• Randomly assign visitors to variants.
• Track conversions anonymously via Nelio Cloud.
• Display real-time results in your dashboard.

⏯ Pause, Resume, or Stop Your Test

• Pause a running test if you need to make changes, then resume it later.
• Stop a test manually whenever you want, or let it end automatically under certain conditions such as duration, total number of visits or confidence results (available in Professional and Enterprise plans).
• Once a test is stopped, its results remain available for review.

Step 7: View Results and Analyze Performance

While your test runs, go to Nelio A/B Testing → Tests and click View Results to monitor its progress.

Summary of the results

In the right sidebar, you’ll find a quick overview of your test:

Goal selector – Choose which goal’s results to display.

Status icon – Indicates experiment status:

🟡 Collecting data.

🕒💛 Potential winner, low confidence

🟢🏅 Clear winner found.

🔴 No improvement over control.

Unique results – Filter duplicates.

Public results – Share a public link.

Export results – Download a CSV.

Summary – Shows status, duration, start date, and end condition.

Test Progress

The main area of the results page is divided into two tabs that visualize your test’s progress and performance:

• Conversion Rates — A line chart showing conversion evolution across variants.
• Views and Conversions — Compares total visits and conversions for each variant.

Confidence indicators appear alongside these charts, updating automatically as more data accumulates.

Below the charts, you’ll find a summary table with:

• A thumbnail preview (if available) of each variant.
• Number of visits and conversions.
• Conversion rate and improvement over control.

Step 8: Improve Your Web Conversion

You can end a test manually using the Stop button in the upper-right corner of the results page, or let it end automatically based on the configured end mode.

After completing a test and identifying a clear winner, manually apply the CSS and text changes from the winning variant to your live site using your theme customizer or site editor. This ensures your optimization becomes part of your site’s permanent design.