Fibr Support
  • Fibr Docs
  • Get Started
    • Intro to Fibr
      • What is Fibr?
      • What products does Fibr offer?
    • Account Settings
      • Inviting Your Team
    • Fibr Script
      • What is Fibr Script?
      • Configuring the Fibr Script for your website
      • Configuring the Fibr Script for your Shopify Store
      • Impact of Fibr Script on Website Performance
    • FAQs
      • How to Whitelist Fibr in Your Website’s Content Security Policy (CSP)?
      • Can You Run Fibr on Your Local Machine?
      • What is Statistical Significance & Smart Traffic Routing?
  • Fibr Experimentation
    • Intro to A/B Testing
      • How to Create an A/B Test in Fibr?
      • How do you create a bulk AB campaign?
    • Audience Selection
      • Define your Audience Segment
      • Location-based Segmentation
    • FAQs
      • What are Traffic Allocation and Traffic Split?
      • Can I change an experiment's configuration when it is running?
      • Can I Run Fibr Tests on a Website That Has Cookies Disabled?
      • Can I Run Fibr Tests on Sub-domains?
      • Scheduling a Campaign in Fibr
  • Intro to Copy Experimentation
    • What is Copy Experimentation?
    • How to Set Up a Copy Experimentation Campaign?
  • Fibr Personalization
    • Ad Personalization
      • How to create an Ad Personalization campaign?
      • How to create a bulk Ad Personalization campaign?
    • Audience Personalization
      • How to create an Audience Personalization campaign?
      • Defining the audience for Audience Personalization
      • Location-based Segmentation
      • How to create a bulk Audience Personalization campaign?
  • Fibr Editor
    • Using Visual Editor to Create Variants
    • Using Visual Editor to track events
    • Using Fibr Editor for Bulk Variant Creation
  • Metrics
    • How can I define metrics on Fibr?
    • How do the GTM metrics work on Fibr?
    • What is a Primary Metric?
  • Integrations
    • Integrating Fibr with Google Analytics 4
    • Integrating Fibr with Google Tag Manager
    • Integrating Fibr with Google Ads
    • Integrating Fibr with Meta Ads
Powered by GitBook
On this page
  • Video Tutorial
  • Getting Started
  • Understanding Editor Modes
  • Editing Text and Style
  • Advanced Content Customization
  • Working with Images
  • Layout Adjustments
  • Grouping and Loading Elements
  1. Fibr Editor

Using Visual Editor to Create Variants

Learn how to use Fibr's Visual Editor to easily create and edit variants—modify text, images, styles, and elements on your website with a simple, click-based interface for personalized content.

PreviousHow to create a bulk Audience Personalization campaign?NextUsing Visual Editor to track events

Last updated 19 days ago

Video Tutorial

In this guide, we will explore the capabilities of the Fibr Editor, which allows for extensive editing of your website content. The Fibr Editor functions like a presentation tool, providing an interface where you can click and edit any element you see. This guide will take you through the process of editing text, changing images, and customizing styles to personalize your website as per your needs.

Getting Started

  • Open the Fibr Editor from your campaign dashboard

  • Install the Fibr Chrome Extension from the Chrome Web Store

  • Use the extension to launch your website inside the editor

  • Note the variant name and use the reload button to refresh

  • Toggle between desktop and mobile views for responsive editing

Understanding Editor Modes

  • Use Edit Mode to make changes to your site elements

  • Use Navigate Mode to browse and interact with your site like a user

Editing Text and Style

  • Click the text icon to manually edit or generate content using AI

  • AI-generated content adapts to your site’s tone, layout, and branding

  • Customize font, size, weight, color, alignment, opacity, and visibility

  • Modify background colors of elements as needed

Advanced Content Customization

  • Track CTAs by tagging elements for event tracking

  • Select or create new metrics to track user interactions

  • Use HTML Edit to:

    • Add buttons with JavaScript functionality

    • Move, insert, or modify complex components

  • Edit nested elements (like divs with spans) by selecting the child elements

Working with Images

  • Replace or resize images

  • Edit image URL or upload new assets

  • Adjust how images fit inside containers

  • Add SRC sets for responsive images when applicable

Layout Adjustments

  • Use the Move tool to reposition elements inside their divs

  • Ensure alignment is maintained across variants

  • Use the Resize tool to change div or text box dimensions

  • Adjust text size directly by selecting the text and changing font size

Grouping and Loading Elements

  • Group elements together to load them simultaneously

  • Useful for pages where elements load at different speeds