Our highly responsive and visual web content editor allows you to design informative and interactive content to display to your contacts. Using web content in your workflows allows you to establish direct communication with the customer and create a personalized experience for them.
How to access it
You can access the web content editor through two routes:
1. From “Content > Web”. Click Create new web content to generate new content, or click More and select Edit to modify existing web content.
2. From the "Send web content" node in a workflow, by clicking (Edit node settings). You can click Create new email to generate new content or Edit to modify existing web content.
The web content editor is composed of three blocks:
1. Preview and save: to save or discard the changes you’ve made. You can also preview the final result of the content that will be inserted in your ecommerce site or review its HTML version.
2. Design: to visually build the email using the structures and components of panel 3 (tools).
3. Toolbox: to configure all content properties and make use of layout components. This panel can be collapsed or expanded by clicking (Open tools) or (Close tools).
How it works
The web content editor has a drag-and-drop design to give you a quick, easy and very visual way to design your content.
1. Edit general style
In the Toolbox (3), panel, click on the General tab to edit the parameters of the overall look. You can also access it by clicking General properties on the design panel (2).
The common parameters to be defined are:
Name: name you want to give the content to identify it in your Connectif account.
- Tags: catalog your email and locate it quickly by clicking Enter tags and adding key words that will help you identify it.
- Borders: color, thickness and style of your content's border.
- Background: color and image effects for the background layer of your content.
- Shadow: color and shading effects of the structure that will display your content.
- Z Index: numerical value indicating the order of overlapping layers.
- Responsive: responsive design threshold (up to what screen width will be understood as a mobile device).
2. Build a web content by blocks
In the Toolbox (3) panel, click the Components tab to create your composition by dragging and dropping structures or elements in the design panel (2).
Distribution that a block of elements will adopt within the web content design set. Can be presented in one or more columns, with different or identical proportions.
The structure must be defined first. If none is included, the single column structure will be used by default.
Once a block of elements is created, position the mouse over it and click (Edit block) to modify it, (Duplicate block) to create an identical one or (Delete block) to delete it.
Elements are the basic pieces of functional content from which to build your web content design, by dragging them to the blocks created in the design panel (2). Like the structure, you can edit them by hovering the mouse over the element and clicking (Edit element) or over the content itself. You can also duplicate them by clicking (Duplicate element), or remove them by clicking (Delete element).
The available elements are:
Edit your text by applying rich text format (bold, italics, links, etc.), inserting dynamic variables or modifying its layout in the inserted block.
If your image is already published on the internet, paste the image URL to include it in the web content. If you prefer to upload it from your device, click Upload image or ( ), and select the file in the pop-up browser. Once uploaded, the image URL will automatically be completed.
As additional settings, you can also assign a link to the image, adjust its position within the block that contains it or change the background color. Optionally, you can set the Alternate text (which will appear if the image doesn’t load) and the Title text (the text that is displayed when you position the mouse over the image, also known as the alt attribute).
Define the text that appears on your button, the title attribute and the link (can be a single specific link or a predefined one to carry out a particular action). To configure its appearance, select text and background colors, customize the borders and corners, and adjust their position within the block.
Configure the color and layout of the vertical line that separates content visually.
Define the amount of white space you want to insert between two blocks. By default this block is transparent, but you can set a color if necessary for your design.
Insert a carousel of products that will be filled with items of interest for the contact. You can select one of the three default templates (Product with rating, Product with brand or Product with price) or customize the final look in the text editor. You can also define its row and column structure according to the device.
Embed custom HTML code and adjust its layout.
Add a button for users to contact you or share the page they are visiting on WhatsApp. Define the text that will appear on your button, the 'title' attribute, the type of action and the default message that will be sent. To configure its appearance, select text and background colors, customize the borders and corners, and adjust their position within the block.
Paste the URL of the YouTube or Vimeo video you want to show in your content and set its playback options. If valid, the video cover will be displayed in the design panel (2). You can configure the appearance by adjusting the layout of the video or changing the color of the background.
Configure the countdown clock by setting an end date and its format. Customize the font, size, and color of digits and tags, whose text you can modify. Select a background color and adjust the counter layout.
Form elements collect contact information from your web content, allowing you to capture leads, run questionnaires, surveys, etc.
The available form elements, according to the type of data they collect, are:
- "Text": for one or more words, all characters are valid.
- "Number": for any numeric value with or without decimals.
- "Date": for a date in day, month and year format, internally compatible with ISO 8601.
- "Email": for a valid email address.
- "Multiline": for several lines of text.
- "Radio": to display a list with a series of options from which only one can be selected.
- "Selection": to display a drop-down with a series of options from which only one can be selected.
- "Checkbox": to display a list with a series of options from which one or more can be selected.
- "Send button": It allows the contact to send the form and collect its data in Connectif.
3. Create and use existing custom templates
Under Custom templates in the tool block (3), click Create template to save the design you've created as a template. Select the block or blocks that will be part of the template then in the preview and saved bar (1) click Create template.
In the pop-up window, assign a name and tags to the custom component and click Save.
You can also design your web content quickly in the Toolbox panel (3) by dragging the custom components you’ve created from the Custom templates section of the Components.
4. Review variables
Variables are elements that allow you to customize your content. Check the variables created and how many times they appear in the text elements using the Toolbox (3), panel, on the Variablestab. To edit its format, click .
5. Preview final result and save
You can see the final result of your web content in the preview and save panel (1).
All the content created is responsive, so you can click Preview to check the final result. Click (Desktop view) to see the result on desktop, or (Mobile view) pfor mobile devices.
Once you’ve got the right design, click Save to save your changes to your web content.
To make the most of your Connectif account, we recommend reading these articles next:
Create a personalized product block in email or web content, to tell clients about products they’re interested in.
- Show personalized products in content,, to show personalized products to each contact using dynamic content and a workflow.
- Show percentage discount only when there is a discount in web content, to highlight discounted prices and their percentage discount in content.
Home page recommender, to show products that your contacts have visited on the home page.