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, the 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 the 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 on 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.
- In the Enter URL of the page you want to test field, enter the URL of the webpage you want to test.
NOTE: To include or exclude URLs from the campaign, click
the ADVANCED tab present next to the URL field. Using this
tab, you can also define advanced pattern-matching options
to either include a broad URL with wildcard entries or a
specific URL. To learn about using different URL patterns,
refer to Using URL Patterns in VWO.
- From the What hypothesis are you testing? dropdown, select a hypothesis you want to work with. This is an optional step.
NOTE: If you do not have a hypothesis yet or wish to create
a new one, you can do so by clicking on the Create a New
Hypothesis option present at the bottom of the hypothesis
dropdown. To learn more about the hypothesis, refer to
Hypothesis in VWO.
- 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 color tooltip starts 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.