(V5) How does the visual editor work? Print

  • 0

Ozcart websites include a built-in theme editor that let you restyle your website to suit the look and feel you want to achieve. We've created a video to show you the live editor in action, changing the fonts and colours on our demo shop. It gives you an idea of the types of things that you can do with it and how it works:

To view it in YouTube: https://youtu.be/dMis7LTpwwg

Or to view it here:

 

Important Tips:

  1. Make sure to save if you're satisfied with your changes. Clicking 'Exit', without saving, does not save changes.

  2. Click the CSS Editor button to view your CSS code, if you have any. You can edit the code directly in there and, after 1-2 seconds, your changes should be visible. Don't forget to save when done.

  3. If you use the CSS Editor (the button on the top right) and you remove or add code and do not see your changes, save your work and refresh the page.

  4. To change pages, first click on the link in the live visual editor and a bar with a link will appear in the top left. It has a text of "Click here to navigate to: https://example.com". Click on that and you will switch to that page so that you can view and work on that page.

  5. You can make your styling change only apply to the page you're on by clicking the 'This Page Only' button next to 'Apply customization for'. Important: You won't see the CSS code in the CSS Editor if you switch back to 'All Pages'. You must navigate to that page again and click the 'This Page Only' button to view your CSS code in the CSS Editor. Therefore, we suggest noting it down somewhere that you have edited that certain page as it's easy to forget which page was edited.

  6. You can choose between editing the layout for desktop computers, tablets, and smartphones by clicking on the appropriate button in the top right next to 'View on'.

  7. When you have clicked on an element, or have added code that you do not want to use, and you don't wish to save your changes, to discard all current changes, you can simply refresh the page (which is the quickest way), or click the 'Exit' button and then click again on the button to activate the visual editor.

  8. When you click on an element, you will see a bar above with the word Menu. What is on the right is the class(es) that you'll be editing. If you click on menu, you'll get a pop-up that appears below menu, allowing you to select other selectors and options such as ':hover', ':focus', 'Parent element', 'Select it only'. E.g., if you want to change the hover colour, you would select hover. Important: if clicking on Menu doesn't let the pop-up appear, then first click on that element, then click on Menu. It is better to always click the element first, and then the Menu button.

  9. When you want to select text that already has a hover colour, the one you'll be editing is the hover colour instead of the normal colour. To select the non-hover text, first click on that text, then click on Menu above it. A pop-up appears. Click "Select it only". You can now edit the non-hover text.

Was this answer helpful?

« Back