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.
Last updated
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.
Begin by familiarizing yourself with the Fibr Editor. The editor opens your website in a way that enables you to click and modify any element you see.
To edit text, click directly on the text you wish to change. Delete the existing text and type in the new text that you want to appear on your landing page. After editing, click outside the panel area to save your changes.
Additionally, you can use the AI feature to generate alternative text suggestions. You have the option to choose the language for generating text suggestions. Fibr supports multiple languages, making it a versatile tool for various use cases. The AI will present four options. Choose the most suitable option for your needs.
In addition to modifying text content, you can adjust text styles. Fibr supports all fonts available on your landing page. You can also change any other text style properties.
To edit images, click on the image element and upload a new image. Upon uploading an image, the image URL will update. Alternatively, replace an image by pasting its URL if it is hosted online.
If your website uses src sets or picture tags for images, Fiber allows you to manage multiple image sources. In such cases, upload your image to one tag, then proceed to upload different images for other sources separately. Alternatively, you can use the "apply to all" feature to replicate changes across all image sources. Same process applies to image elements set up as picture tags
Fibr's breadcrumb navigation is useful for accessing elements not readily selectable. For instance, if you wish to edit a specific text, navigate through the breadcrumbs to access the desired element. For instance, if you wish to edit a specific text, navigate through the breadcrumbs to access the desired element. Continue navigating through the breadcrumb trail to locate and modify the text, making it easy to customize content.
Use the breadcrumb feature to efficiently access and edit content that is deeply nested within the page layout.
You can also edit call-to-action (CTA) elements, such as buttons. You can edit the redirection link of a particular button. You can also enhance tracking by adding parameters to the existing link.
You can also change the CTA text by just selecting it and editing it like a normal text. Other than that, Fibr's editor also allows you to customize the button's background color by navigating to styles and selecting a new color.
In order to hide elements on a page you can simply set the visibility of your element to "No". In order to unhide it, select the same element and set the visibility to "Yes".
Fibr editor also allows you to delete elements on the page. Simply select the element you want to delete and click on the "delete" button in the top right of the panel.
The Fibr Editor typically applies edits to both website and mobile views. You can make the edits in the mobile view as well in the same way that is done for desktop.
(In italics): desktop changes to mobile and so on...
Once you are satisfied with the changes, use the preview feature to verify that all changes are correctly applied in both mobile and desktop views. Once all changes are verified, click "finish" to save.
