Skip to main content
All CollectionsRelevic Crash Course
Advanced Guide to Personalization Editor Features
Advanced Guide to Personalization Editor Features
Updated this week

Overview

Relevic’s personalization editor offers a wide range of advanced features that allow you to craft deeply personalized, dynamic, and optimized experiences for your website visitors. This guide will walk you through the editor’s powerful tools, including dynamic content, UTM parameters, AI tools, responsive design features, and more. If you’re looking to take your personalization strategies to the next level, this guide is for you.


Dynamic Content Personalization

One of the most powerful features of Relevic’s personalization editor is the ability to use dynamic content. This allows you to show personalized text, images, and CTAs based on specific visitor behaviors, referral sources, and UTM parameters.

Using UTM Parameters for Dynamic Personalization

UTM parameters are critical for tracking where your visitors come from and delivering the right message accordingly.

  • What are UTM Parameters?: UTM parameters are tags added to the URL, such as utm_source, utm_medium, and utm_campaign, that help you identify the source, medium, and campaign that led a visitor to your website.

  • Example: If a visitor arrives via a Google AdWords campaign with the UTM tag utm_campaign=summer_sale, you can dynamically display a banner that reads, “Welcome to our Summer Sale! Get 20% off all items.”

In Relevic, you can set up rules based on UTM parameters:

  • Condition: You can use conditions like "Source equals Google" or "Campaign includes ‘holiday’" to trigger specific content.

Custom Variables for Personalized User Experiences

Beyond UTM parameters, you can also use custom variables to personalize content based on the visitor’s profile or actions.

  • Example: If a user is logged in, show a personalized greeting like “Welcome back, [User Name]!” This can be achieved by using dynamic placeholders that pull information from user profiles or session data.


AI-Generated Content and Image Editing

Relevic's editor includes AI-powered tools to help you generate or enhance content on the fly.

AI-Generated Text

Relevic’s AI tool can automatically generate text based on a prompt. This feature is ideal if you're unsure about the best wording for a headline, CTA, or body copy.

  • Example: Imagine you're running a holiday promotion. You can prompt the AI by typing something like “Create a catchy headline for a holiday sale,” and the AI might suggest something like “Wrap Up Your Shopping with Our Best Deals of the Year!”

You can also specify the tone (e.g., formal, casual, salesy) and word count to refine the output.

AI-Generated Images

In addition to text, Relevic allows you to generate images based on AI prompts, ensuring the visuals align with your content and audience.

  • Example: If you’re running a Black Friday promotion, you could generate an eye-catching banner image by asking the AI to create a graphic that matches your campaign’s color scheme and style.

You can adjust various image attributes, such as style (e.g., 3D, photographic, or illustrated), size, and color tone.


Layout and Design Customization

Relevic’s editor provides a robust set of tools to help you fine-tune the layout and design of your web pages, ensuring they align with your brand identity and user experience goals.

Managing Layouts and Sections

You can easily move, edit, or remove sections of your page. Relevic’s editor allows you to add new containers, divs, or flexboxes to create custom layouts.

  • Example: If you're designing a landing page for a product launch, you can add a new section at the top to feature a product video, followed by testimonials and key benefits in a grid layout.

Styling Elements

Relevic lets you control the style of every element on your page. You can adjust:

  • Typography: Change fonts, font sizes, letter spacing, and line height.

  • Colors and Backgrounds: Apply custom colors to text, buttons, and backgrounds.

  • Padding and Margins: Adjust the spacing around elements to create a clean, well-balanced layout.

  • Example: For a Valentine’s Day campaign, you might update the font to something more playful and change the color scheme to red and pink to match the theme.


Using the Code Editor for Custom Enhancements

For users with coding knowledge, Relevic’s personalization editor allows for deeper customization via the built-in code editor. You can insert custom HTML, CSS, or JavaScript directly into your page.

Custom HTML

  • Example: Insert a custom HTML block to add a third-party widget like a live chat feature or product review carousel that dynamically updates based on user behavior.

Custom CSS

  • Example: If you want to apply unique styles to specific elements that aren’t available in the visual editor, you can use CSS to create fully custom styling, such as applying unique hover effects on buttons or customizing form field designs.

Custom JavaScript

  • Example: Use JavaScript to trigger an action when a user clicks on a button or scrolls to a certain part of the page. You could use this to display a pop-up with a special offer after the user scrolls 50% down a product page.


Managing Dynamic and Responsive Design

With more users browsing on mobile devices than ever before, it’s essential to ensure that your page variations are responsive. Relevic’s editor helps you preview and adjust the layout for different devices, ensuring the personalized content looks great across desktops, tablets, and smartphones.

Responsive Layout Management

The editor provides tools to adjust the design for specific devices. You can hide or display different sections based on the screen size and adjust the layout to ensure that content remains readable and visually appealing.

  • Example: For mobile visitors, you may want to hide an image-heavy section and instead focus on delivering a clear CTA and concise text.

Dynamic Elements for Specific Devices

In addition to responsive layout controls, you can also target dynamic elements to specific devices. This allows you to show mobile-specific content or promotions.

  • Example: If a user is browsing on mobile, you can display a pop-up offering a discount on their first mobile purchase, which won’t appear for desktop users.


Creating and Managing Page Variations

Relevic’s editor makes it simple to set up variations of a page for A/B testing or personalizing content for different segments of your audience.

Setting Up Variations for A/B or Multivariate Testing

With Relevic, you can create multiple page variations to test how different headlines, CTAs, images, or layouts perform.

  • Example: You can create two variations of a product page, where Version A uses a more aggressive sales tone and Version B takes a softer, benefits-focused approach. By splitting traffic between the two variations, you can track which approach leads to more conversions.

Advanced Segmentation for Variations

Relevic also allows you to show different variations to specific audience segments. You can use filters based on location, referral source, behavior, or UTM parameters to target the right content to the right audience.

  • Example: Show a different version of your homepage to U.S. visitors who clicked through from an email campaign, using UTM parameters to identify the source.


Conclusion

Relevic’s personalization editor offers a wealth of advanced features that go beyond simple edits. By leveraging dynamic content, AI-generated tools, custom coding, responsive design capabilities, and advanced variation management, you can create highly personalized and optimized experiences for your website visitors. With these tools at your disposal, your website can become a powerful vehicle for engagement and conversion, customized to each segment of your audience.

Did this answer your question?