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.

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

PreviousHow to Set Up a Web Performance Test?NextUsing Visual Editor to track events

Last updated