# Prompt Inspiration library for Evi Content

To learn more about the Evi Content, refer to the article [Using the Evi Content](https://docs.abtasty.com/web-experimentation-and-personalization/editors-and-widget/visual-editor/using-the-editor-copilot)

## User Engagement  <a href="#h_01jfjhdwpbkdvyfky4mgaev71j" id="h_01jfjhdwpbkdvyfky4mgaev71j"></a>

### Increase time spent on site <a href="#h_01jfjhe02eepewqzpfwb0vecxk" id="h_01jfjhe02eepewqzpfwb0vecxk"></a>

| **Animated Hero Section Headline**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>As a landing page, I want the main headline in the hero section to grab attention when the page loads.</p><ul><li><strong>Effect:</strong> The headline should fade in over 1 second, starting from 0% opacity to 100%.</li><li><strong>Timing:</strong> The animation should begin 500 milliseconds after the page is fully loaded.</li><li><strong>Style:</strong> Add a slight slide-up motion (10 pixels upward) to make the animation more dynamic.</li><li><strong>Behavior:</strong> No animation replay if the user scrolls back to the top.</li></ul> |

| **Progressive Image Reveal in Article Cards**                                                                                                                                                                                                                                                                                                                                                                                                          |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p>On my blog homepage, I want the featured images in article cards to appear progressively as users scroll.</p><ul><li><strong>Effect:</strong> Apply a fade-in effect combined with a zoom from 95% to 100%.</li><li><strong>Trigger:</strong> The animation should start when at least 50% of the image is visible in the viewport.</li><li><strong>Performance:</strong> Use CSS-only animations to avoid JavaScript performance issues.</li></ul> |

### Boost interaction with key elements <a href="#h_01jfjhpgrp247qbgy3k8jt8p56" id="h_01jfjhpgrp247qbgy3k8jt8p56"></a>

| **Hover Glow Effect on "Read More" Links**                                                                                                                                                                                                                                                                                                                                                                          |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my articles page, I want the "Read More" links to have a subtle glow effect when hovered over.</p><ul><li><strong>Effect:</strong> Create a soft outer glow around the text using a light blue color (#4A90E2).</li><li><strong>Duration:</strong> Smooth transition over 0.3 seconds.</li><li><strong>Behavior:</strong> The glow should disappear immediately when the user moves the mouse away.</li></ul> |

| **Animated Scroll-to-Top Button**                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my blog, I want a scroll-to-top button to animate when the user reaches the bottom of the page.</p><ul><li><strong>Effect:</strong> The button should slide in from the right and pulse three times to attract attention.</li><li><strong>Trigger:</strong> Animation starts when the user scrolls past 80% of the page height.</li><li><strong>Behavior:</strong> The button should smoothly scroll the page back to the top when clicked.</li></ul> |

### Make visuals more engaging <a href="#h_01jfjhtjk1fjjyzb8ccsas2187" id="h_01jfjhtjk1fjjyzb8ccsas2187"></a>

| **Add a Parallax Background Effect**                                                                                                                                                                                                                                                                                                                                                                                                         |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my homepage, I want the background image of the hero section to have a parallax scrolling effect.</p><ul><li><strong>Effect:</strong> The background should move at half the speed of the foreground content when scrolling.</li><li><strong>Style:</strong> Add a slight blur to the background to increase the focus on the text.</li><li><strong>Performance:</strong> Ensure the effect does not impact page load speed.</li></ul> |

| **Highlight Section Headings on Scroll**                                                                                                                                                                                                                                                                                                                                                                    |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my long-form article, I want each section heading to animate when it scrolls into view.</p><ul><li><strong>Effect:</strong> The heading should slide in from the left with a fade-in effect.</li><li><strong>Trigger:</strong> Animation should start when the heading is 25% visible in the viewport.</li><li><strong>Duration:</strong> The animation should complete within 0.5 seconds.</li></ul> |

## Conversion Optimization <a href="#h_01jfjhtvxjagefctj9wtbv3nah" id="h_01jfjhtvxjagefctj9wtbv3nah"></a>

### Optimize conversion funnels <a href="#h_01jfjhv5hk3y74n4z63pmtrm3b" id="h_01jfjhv5hk3y74n4z63pmtrm3b"></a>

| **Active Form Field Highlighting**                                                                                                                                                                                                                                                                                                                                                                                                     |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my checkout form, I want the active input fields to visually stand out.</p><ul><li><strong>Effect:</strong> Change the border color of the active field to green (#28A745) and add a subtle box shadow.</li><li><strong>Behavior:</strong> The highlight should disappear immediately when the user clicks outside the field.</li><li><strong>Style:</strong> Keep the animation subtle to avoid distracting the user.</li></ul> |

| **Step Highlight in Progress Bar**                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p>On my multi-step registration form, I want the current step to be visually highlighted in the progress bar.</p><ul><li><strong>Effect:</strong> Change the current step's background color to blue (#007BFF) with a slight pulse animation.</li><li><strong>Behavior:</strong> Automatically advance the highlight as users complete steps.</li><li><strong>Style:</strong> Add labels to show the percentage of completion (e.g., "Step 2 of 5 - 40% Complete").</li></ul> |

### Increase click-through rates (CTR) on CTAs <a href="#h_01jfjhvmbvxahx85x76nknn52p" id="h_01jfjhvmbvxahx85x76nknn52p"></a>

| **Animated CTA Button Hover Effect**                                                                                                                                                                                                                                                                                                                                                                                                  |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my pricing page, I want the "Get Started" button to animate when hovered over.</p><ul><li><strong>Effect:</strong> The button background should gradually shift from light green (#28A745) to darker green (#1C7D31).</li><li><strong>Duration:</strong> Transition over 0.4 seconds.</li><li><strong>Behavior:</strong> The button should return to its original color instantly when the user moves the mouse away.</li></ul> |

| **Pulsing "Add to Cart" Button**                                                                                                                                                                                                                                     |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my product page, I want the "Add to Cart" button to pulse periodically.</p><ul><li><strong>Effect:</strong> Scale the button to 1.05x its size and back over 1 second.</li><li><strong>Timing:</strong> The animation should repeat every 3 seconds.</li></ul> |

### Reduce cart abandonment <a href="#h_01jfjhwtefmp2q76rtdbg3jeb6" id="h_01jfjhwtefmp2q76rtdbg3jeb6"></a>

| **Visual Feedback for Invalid Fields**                                                                                                                                                                                                                                                                           |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my checkout form, I want to provide instant visual feedback for invalid inputs.</p><ul><li><strong>Effect:</strong> The border of invalid fields should flash red (#FF0000) three times.</li><li><strong>Behavior:</strong> Show an error message beneath the field with a red exclamation icon.</li></ul> |

| **Highlight Cart Section on Hover**                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my cart page, I want the summary section to visually stand out when hovered over.</p><ul><li><strong>Effect:</strong> Add a shadow and change the background color to light yellow (#FFF9C4).</li><li><strong>Behavior:</strong> The highlight should disappear smoothly over 0.2 seconds after hover.</li></ul> |

## Personalization <a href="#h_01jfjhxdmc2sgc4wkwy33f33rp" id="h_01jfjhxdmc2sgc4wkwy33f33rp"></a>

### Adapt content to audience segments <a href="#h_01jfjhyknycp6e6yzfgx189z8w" id="h_01jfjhyknycp6e6yzfgx189z8w"></a>

| **Show a Custom Welcome Message for Logged-In Users**                                                                                                                                                                                                                                                                                                                                                                                         |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my homepage, I want to display a personalized welcome message for returning users.</p><ul><li><strong>Effect:</strong> Replace the default "Welcome to Our Site" with "Welcome back, \[First Name]!" dynamically.</li><li><strong>Behavior:</strong> The message should appear instantly when the page loads.</li><li><strong>Fallback:</strong> If no name is available, display "Welcome to Our Site!" as the default text.</li></ul> |

| **Change Background Color Based on User Preference**                                                                                                                                                                                                                                                                                                                                                                   |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my profile page, I want the background to reflect the user's theme preference.</p><ul><li><strong>Effect:</strong> If the user prefers dark mode, set the background to #121212 and the text to #FFFFFF.</li><li><strong>Trigger:</strong> The change should occur dynamically when the page is loaded.</li><li><strong>Fallback:</strong> Use the default light theme for users without a preference.</li></ul> |

### Add dynamic elements for engagement <a href="#h_01jfjhyzh8a8rjx52aj3bx7nfr" id="h_01jfjhyzh8a8rjx52aj3bx7nfr"></a>

| **Countdown Timer for Flash Sales**                                                                                                                                                                                                                                                                                                                                                                                                                        |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my homepage, I want to display a countdown timer to create urgency for ongoing flash sales.</p><ul><li><strong>Effect:</strong> Display a live countdown showing hours, minutes, and seconds dynamically decreasing.</li><li><strong>Style:</strong> Use bold red text (#FF0000) with a clean font to make it stand out.</li><li><strong>Behavior:</strong> Reset the timer when the sale ends and replace it with a "Sale Ended" message.</li></ul> |

| **Personalized Call-to-Action for Returning Visitors**                                                                                                                                                                                                                                                                                                     |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <ul><li><p>On my product page, I want to tailor the call-to-action text for returning visitors.</p><ul><li><strong>Effect:</strong> Replace "Add to Cart" with "Add Another Item to Your Cart!" if the user has previous purchases.</li><li><strong>Trigger:</strong> Update the text immediately when the page loads for known users.</li></ul></li></ul> |

### Improve relevance of recommendations <a href="#h_01jfjhzh6g5v5yfyn6qawctnxd" id="h_01jfjhzh6g5v5yfyn6qawctnxd"></a>

| **Show Recently Viewed Products**                                                                                                                                                                                                                                                                                                                                                                                               |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my product pages, I want to display a horizontal carousel of products the user has recently viewed.</p><ul><li><strong>Effect:</strong> Populate the carousel with the last 5 products the user clicked on.</li><li><strong>Behavior:</strong> Allow users to scroll through the carousel horizontally.</li><li><strong>Fallback:</strong> If no history is available, display the top 5 most popular products.</li></ul> |

| **Display Location-Based Promotions**                                                                                                                                                                                                                                                                         |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my homepage, I want to show special offers based on the user’s location.</p><ul><li><strong>Effect:</strong> Show "Free Shipping to \[City]!" dynamically based on the user’s IP address.</li><li><strong>Style:</strong> Use a banner with bold, localized messaging at the top of the page.</li></ul> |

## User Experience (UX) <a href="#h_01jfjhzt5ecj3pa06rx4ppzdfc" id="h_01jfjhzt5ecj3pa06rx4ppzdfc"></a>

### Simplify user journeys <a href="#h_01jfjhzxv70z0w78tfmtsz088n" id="h_01jfjhzxv70z0w78tfmtsz088n"></a>

| **Auto-Scroll to the First Error in Forms**                                                                                                                                                                                                                                                                                                            |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p>On my contact form, I want the page to automatically scroll to the first invalid input when users submit the form.</p><ul><li><strong>Effect:</strong> Add a smooth scroll effect to bring the invalid input into view.</li><li><strong>Behavior:</strong> Highlight the input with a red border and display an error message beneath it.</li></ul> |

| **Add Smart Autofill for Address Fields**                                                                                                                                                                                                                                                                                          |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my checkout form, I want address fields to auto-suggest based on user input.</p><ul><li><strong>Effect:</strong> Show a dropdown of matching addresses dynamically as users type.</li><li><strong>Behavior:</strong> Populate the remaining fields (city, state, ZIP) automatically when a suggestion is selected.</li></ul> |

### Enhance accessibility <a href="#h_01jfjj0b991hvxe1xyk9w85r9q" id="h_01jfjj0b991hvxe1xyk9w85r9q"></a>

| **Add Keyboard Navigation for Menus**                                                                                                                                                                                                                                                                               |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my navigation bar, I want users to navigate menu items using the keyboard.</p><ul><li><strong>Effect:</strong> Highlight the current menu item with a blue border when using the Tab key.</li><li><strong>Behavior:</strong> Ensure Enter activates the menu item, and Escape closes any dropdowns.</li></ul> |

| **Improve Readability with Adjustable Font Sizes**                                                                                                                                                                                                                                                                                                 |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my article pages, I want users to adjust the font size for better readability.</p><ul><li><p></p><ul><li><strong>Effect:</strong> Add small, medium, and large size buttons that dynamically change the font size.</li><li><strong>Behavior:</strong> Maintain the chosen size even when users navigate to another page.</li></ul></li></ul> |

### Reduce friction and improve usability <a href="#h_01jfjj0tzy33an55aez6whadva" id="h_01jfjj0tzy33an55aez6whadva"></a>

| **Add Real-Time Validation for Email Fields**                                                                                                                                                                                                                                                                                                 |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my signup form, I want the email field to validate user input as they type.</p><ul><li><strong>Effect:</strong> Display a green checkmark when the email format is valid, and a red warning icon when invalid.</li><li><strong>Behavior:</strong> Show the validation feedback immediately without requiring form submission.</li></ul> |

| **Add Loading Indicators to Buttons**                                                                                                                                                                                                                                                                                                                                    |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p>On my checkout page, I want the "Place Order" button to display a loading spinner when clicked.</p><ul><li><strong>Effect:</strong> Replace the button text with a spinner icon and disable the button until the action completes.</li><li><strong>Behavior:</strong> Revert to the original text once the order is successfully placed or an error occurs.</li></ul> |