- Identify if an element you can't change in the editor is an inherited style
- Override the inherited style in your Variation Code
If you are having trouble editing an element in the Visual Editor, it may be due to styling in the code of your site being marked as '!important'. This prevents the element's styling from being changed in the editor.
The following is a workaround that can be placed in your Variation Code:
1. Identify the element with inherited style
First, right-click the element and select Inspect Element within your browser. A console will pop up, and the element will be highlighted on the page.
- Right click the element and select Copy > Copy selector. You'll paste this selector into your variation code.
- Under the Styles section, search for a tag called "!important".
2. Use the Editor to create CSS
Next, you'll use the Editor to generate the CSS you'll use in your variation code.
1. Edit the CSS of the element with the Visual Editor.
2.Open the Code Editor to find your newly created CSS.
3. Add the new CSS to your variation code
Next, add the CSS to your variation code
1. Replace the element selector with the selector you copied from the browser. Tip: make sure it's still surrounded in quotes.
2. Use this code block as a template. Replace
yourSelectorGoesHerewith your selector, and
property:value with the CSS you generated in Step 2.
$('yourSelectorGoesHere').attr('style', 'property: value !important; property2: value2 !important');
It should look something like this:
Then, click Apply. You should now see your changes in the Editor.