Creating Variations using the Fibr Editor

With Fibr's WYSIWYG editor, you can easily create personalized variations in minutes. Before we jump to the features of the editor here's how you can launch the editor from the dashboard.

You can also choose to assign a variation from a list of existing variations in that campaign.

Change Text Elements

To change a text element in the FIbr editor, simply click on the text to select it, edit the content in the side panel and then click anywhere outside the side panel to save the change.

Change Image Elements

Similar to text elements you can simply click on any image to select it and then edit from the side panel. The Fibr editor supports uploading an image from your device. Alternatively, you can just enter a URL where the image is hosted.

While changing an image element we recommend that you the new images you use be of the same size as existing ones.

Changing Styles

The Fibr editor allows you to change the styles of both text and image elements. Style properties refer to CSS properties of the elements on the page

The style properties for text elements include font, size, weight, color, and alignment.

In case of images you can change the size of the image from the editor. There are also different fitting options provided in the editor which you can choose to show the best size of the image

There are also general Style properties applicable to all elements. These include background image, opacity, visibility, and background color.

Personalize CTAs

Your Calls to Action (CTA) are crucial to driving conversion on your site. Personalizing your CTAs can have a large impact on conversion rate.

To personalize your CTAs, open the Fibr editor and click on the link you want to personalize. Using the editor options in the right hand panel, personalize the text and the redirection link.

Using Breadcrumbs

While selecting elements to edit you might encounter cases where the editor is unable to pick the exact element you want. This could be due to nesting of elements within divs. In order to edit such elements in the Fibr Editor you can use "Breadcrumbs" to navigate to 'children' or 'sibling' elements of a div. Here's an example to explain this:

In the image below I want to edit the text starting with "Fibr empowers scale," but I am unable to select that specific text directly.

In order to select my desired text I can navigate through the breadcrumbs as in the clip below:

Don't be a stranger

Last updated