What if we say, you can introduce new elements to your webpage without writing a single line of code?
Sounds interesting enough? If yes, let’s delve more into it.
Consider a situation wherein along with making changes on your website you wish to add a new CTA that makes it easy for customers to directly access the items on sale. Now, to do this you do not have any coding knowledge. For such scenarios, VWO platform lets you accomplish this task on your own by just using the WYSIWYG editor. Yes, this is possible.
Using the Add Element option of VWO Editor, anyone can create UI components per their requirements on the go. With this, you are no more dependent on your development teams to create the UI components for your webpage. The easy-to-use interface of VWO Editor provides you with the option to add different types of UI components.
These UI components are broadly classified into three categories:
- Basic Elements- using this, you can add List Item, Bulleted List, Content Block, Button, Numbered List, and Images to your webpage. For example, you can introduce a new CTA on your landing to make navigation easy for your customers.
- Typography Elements- using this, you can add a Paragraph, Heading, Blockquote, and Links to your webpage. For example, to add information about the ongoing promotional offers, you can add a paragraph element and write the relevant information inside it.
- Form Elements- using this, you can add Label, Input, Textarea, and Form Buttons to your webpage. For example, to add a new question in the customer feedback form, you can add a label element and a corresponding input element in the existing form.
Once you click on the Add Elements option present in VWO Editor, a dialog to add different types of element appears.
How to Add a New Component to Your Webpage
VWO Editor allows you to create new components in your webpage. You can create a new component in your webpage using the Add Element option present in VWO Editor.
- Login to your VWO account.
- Go to Testing > A/B.
- Click Create to create a new A/B Test campaign.
- From the Select from existing hypotheses dropdown, select a hypotheses.
- In the Enter URL of the page you want to test field, enter the URL.
- Click Next.
Your test page opens in VWO Editor.
- To add a new component, click the Add Element button.
Add Element dialog appears.
- From the Add Element dialog, click on the element you want to add to your webpage.
The Add Element dialog disappears.
- Hover on the page to choose the positioning of the element. On mouse hover, a green colour tooltip start to appear indicating where all you can position the element.
Info: The tooltip has the info about what element is being placed and where is it being placed. The tooltip format is- "Add <element name> <before/after/inside> <hovered element type>"
- Click the area where you want to add the element.
Note: You can place the element anywhere on the page (before, after, inside) with respect to an existing element. These options appear based on the type of element you are hovering over and the type of element you are adding.
- Once you have positioned the element on your webpage, you can then modify its properties and attributes using the edit operations.
- Click Done to save your changes.