Optimal UX helps you make changes to your website without touching the code. Whether you need to update content, modify styles, or restructure elements, this guide will help you understand the available modifications and how to use them effectively.

Update Content

Update Content replaces existing content while keeping styling intact. It's perfect for updating text, headlines, or HTML content, like changing "Sign Up" to "Get Started Free" on your buttons.

Add to Beginning and Add to End insert new content inside existing elements. Use these when you need to add labels, badges, or additional information without disturbing the existing content. For instance, you can add a "New!" badge before a menu item or append "Limited Time" after a price.

Style and Attribute Changes

Update CSS lets you modify how elements look without changing their structure. You can adjust colors, sizes, borders, and other visual properties to match your design needs.

Update Attributes helps you modify element properties and create new ones. This is particularly useful for updating links, images, or form fields while preserving existing functionality.

While Update Attributes replaces existing attributes, Append to Attribute adds to them.

Structure Changes

Replace Element completely swaps out existing elements with new ones. This is ideal for major changes, such as replacing a simple button with a complex call-to-action or converting a text input into a dropdown menu.

Insert Before/After adds new elements around existing content. Use these modifications to add promotional banners, notices, or any new content that should appear before or after existing elements.

Visibility Changes

Hide Element makes elements invisible while maintaining the page layout. It's perfect for temporarily removing seasonal content or features without affecting surrounding elements.

Delete Element completely removes elements and their associated space from the page.

Best Practices

• Modification Order Matters: Changes at the top of your modification list take precedence over those below them. If you have conflicting modifications, consider their order.

• Be Specific: Target only the elements you need to change. Being too broad with your selections can affect performance and cause unexpected changes. Also remember that CSS selectors can match different elements across different pages. For example, the selector .header-title might match your blog post titles and your product titles simultaneously but they all will get the same content.

• Test Your Changes: Use the preview feature to ensure your modifications work as expected before publishing.

• Use the Active Toggle: Each modification has an "Active" toggle. Use it to temporarily disable modifications without deleting them – perfect for testing or seasonal changes.