Firstly, let’s load some PuZZlE as you may see there is already a lot of popups ready to use. Now click on the one you like to load it let’s check how it will look every element has its own settings to make element active. Just move a mouse over it let’s change image of this popup for example I will change it to one of Google Photos select image and click on copy image address now return to PuZZle builder select image element and click on ‘edit element settings’ icon paste image address to the URL field click on ‘store & close’ button as you may see new image is loaded check preview with new image.
Let’s change background color for left panel move to attributes tab data-ao-animaze-on-popup attribute used to apply pop-up animation for it. Click on field with magic wand to edit it at bgColor animation group let’s change color from #705f5b to #333 check preview as you may see background color of panel is changed change the texts to the one we need after every change don’t forget to click on ‘store’ or ‘store & close’ button, so it will apply changes.
Predefined Button Colors
if you click on ‘close’ it won’t store changes check preview let’s change text on button too ok, now change button color there is a few button predefined button colors. It’s: ao-btn-black, ao-btn-red, ao-btn-green, ao-btn-blue and also every color has -lighten and -darken additions, i.e ao-btn-blue-lighten. So, move to style tab and change button color class to the one we need – ao-btn-blue-lighten check preview let’s change button position a little button position is set via animation same as panel background color, so we need to move to attributes tab click on the field with magic wand and move to ‘move’ animation settings group at ‘To Y’ group change the value a little – it will change button vertical positioning check preview so it’s Done!