Adding CSS to a Page in Visiopt

Overview

This guide provides a detailed process for adding CSS to a page in the Visiopt visual editor. This method allows users to introduce additional CSS elements without modifying the server or client server's original CSS files.

Step-by-Step Instructions

Step 1: Accessing the Add CSS Option

1. Open Add CSS Option

·   Locate and click the "Add CSS" button in the Visiopt editor.

Step 2: Adding CSS Code

1. Paste CSS Code

·   Copy the desired CSS code.

·   Paste the CSS code into the provided box.

·   Example CSS classes:

·   .bold to make text bold

·   .responsive for responsive typography

·   img to make an image responsive

·   .white-back to set a white background

·   Click "Save" after pasting the CSS code.

Step 3: Using the Added CSS Classes

1. Class Availability

·   The newly added CSS classes are now available for use within the editor.

2. Update Class in HTML Mode

·   Even though these classes are not loaded into the original CSS file of the site, you can still use them in the editor.

·   Click "Change Mode" to switch to HTML mode.

·   Update the HTML by adding the new CSS class as needed.

Step 4: Advantages of Adding CSS Through Visiopt

1. No Server Access Required

·   This method allows you to add CSS without needing to access or modify the server.

·   Provides practically unlimited design freedom on the page without touching the original code.

Conclusion

By following these instructions, you can easily add and utilize custom CSS classes within the Visiopt editor, enhancing your design capabilities without modifying the original CSS files. In the next video, we will explore solutions for situations where a style or image does not load.