Change the color of a 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 selected 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 elements 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 genereted code for this change. You can see this by clicking Show code and then click on the CSS tab.
Changing the copy of a 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 you 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 it's 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 do however require some code skills or at least some knowledge about how CSS seletors 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 outmost container element when you move an element. This 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 element 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 outmost 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 intented 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 outmost 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 click 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 a specific padding. Then we change padding-left to 100px by entering this in the input field. No 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 till generate code for each change and the buttons copy will change multiple times before it reaches the latest change. This will of course happen so fast that it won't be noticable 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 them selves.
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 original 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 remember.
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.