Notice that WYSIWYG-editor changes will only work if you have jQuery on your website or allow us to add jQuery to your website. This setting can be found by going to My websites -> Click on your website -> Edit website and then check the Add jQuery checkbox.
Change the color of an element
To do changes with the WYSIWYG-editor you simply right-click the element you want to edit. Note that it's really important that you select the correct element for your changes to work.
Let's say you want to change the color of a button. Right-click the button and then select Edit style.
You will now get a popup menu with different style settings for this element. This is preset with the element's current style values. To change the color of the button simply click the current color in the background setting.
Now use the color picker or enter the hex code for the new color in the input field to change this. This is now set and you will see the changes in the editor straight away and the editor has generated code for this. To close the Element style popup simply left-click anywhere on the website.
The WYSIWYG-editor has now generated code for this change. You can see this by clicking Show code and then clicking on the CSS tab.
Changing the copy of an element
Let's say you wish to change the copy of the button. Right-click the button and then choose Edit content and then Edit text.
You will now get a popup where you can edit this text. Change it to what you want and click Apply.
You will see your changes straight away and you can also see the generated code for this if you click Show code and then click the Javascript / jQuery tab (if you aren't already viewing that tab).
Notice! The WYSIWYG-editor will make your changes to that exact element by setting the changes to its CSS selector. This means that it sets the shortest most unique CSS selector for that element (on this exact page). This does not mean that it is unique for the whole website.
If an element on another page of the website has the exact same CSS-selector that element will also get these changes (if Audience is true on that page as well).
This also means that if you have multiple similar buttons that you wish to change you need to do this change on each of them by repeating the steps. Or you can modify the generated code so that the CSS selector points to all of them. This does however require some code skills or at least some knowledge about how CSS selectors work.
Moving an Element
Let's say we want to move the image to the left and the text and CTA to the right. The first thing we do is right-click the image to select it.
Then we have to figure out if we have selected the correct element for this change. The currently selected element is the image. Usually, you want to get the utmost container element when you move an element. This is because the element can have CSS rules (styles) that are tied to the elements container element (parent).
You can check this and select the outmost parent element by using the Select -> Select parent function. This will show a list of parent elements to the current clicked one, starting with the parent and then listing that parent element's parent and so on.
If you hover over these choices the element selection displayed in the editor will change. Try to get the utmost parent of the element you wish to move. In our example above it's the .container choice that is the outmost element that includes all the elements we wish to move (the image) and not any other elements.
If we hover over the next one in the hierarchy the selection includes the left part (the text and button). So we move up again and click the .container to set this as selected.
Now that the container element of the image is selected we can modify this. Now choose Cut in the still open menu.
Then we need to choose where to paste this. So once again we need to select the correct element to paste this (after, before, inside, etc). So right-click somewhere where you want to start off from and then step your way up to the intended element and then click this element to select it and then click Paste and choose paste location.
In the example above we started by right-clicking the text "Convert More." and then step our way up to the utmost container element that holds the text and button via the Select -> Select parent function as earlier.
Now you can see the changes and you can also see the generated code for this by clicking Show code and clicking the javascript / jQuery tab.
Now, all we have to do is set some padding to make these changes look good. So we select the correct element and then choose Edit style. Then we scroll down to padding and click on More options to be able to set specific padding. Then we change padding-left to 100px by entering this in the input field. Now, we are all set.
Now Save your project and set your Audience and then Preview the project to test that Audience is correct and also see that your changes work and look good.
How to undo changes
The WYSIWYG-editor always adds the code after any previous changes, which also means that these changes will happen in this order. If multiple changes are made to the same element the code for that change will be added NOT modified by the editor.
This means that if you change the copy of the button (as mentioned in the example before) multiple times the changes will generate code for each change and the button's copy will change multiple times before it reaches the latest change. This will of course happen so fast that it won't be noticeable but beware if you make huge changes. It might be better to start over with a clean slate rather than adding just keep making changes that overwrite themselves.
If you wish to start all over you can always click on Show code and simply delete the generated code and click Apply in each tab. If the website isn't back to the original look you might need to hit Save and then reload the browser window.
If you want to undo the latest changes you can use the undo button in the editor. This will undo the changes in steps starting with the latest one and back as long as it remembers.
You can also manually remove the generated code for the changes you wish to undo. So it might be a good idea to keep an eye on the generated code.