Go Back

Pop-up Visual Editor

January 29, 2018

You can create a new pop-up from scratch without CSS, HTML and JavaScript knowledge. It’s easy with Piwik PRO pop-up editor. To build a pop-up you just need to drag and drop elements from our components library and upload images.

1. Log in to your Piwik Pro Marketing Suite application.
2. Go to Content Personalization section – click “Content personalization” link in top bar menu.
3. Choose proper website from the drop-down menu.
4. Click on “Pop-ups” option in Content Personalization menu.
5. Choose a pop-up’s name you want to edit.
>6. Open pop-up-s visual editor by click “Edit” button on the top.

7. Edit pop-up’s area by selecting it and changing settings in the right sidebar.
8. Drag and drop components located in the left sidebar. Click on component placed on pop-ups area to activate its settings (located in right sidebar).

9. To add images switch to “Images” in left sidebar then drag and drop an image from your hard drive.

10. Click “Save” button if you want to save changes.

Edit pop-up’s area

To manage pop-up’s styles and dimensions:

1. Choose a pop-up’s name you want to edit.

2. Open pop-up-s visual editor by click “Edit” button on the top.

3. Click on pop-up’s area pop-ups area to activate its settings. Please note if you’ll click on another element than the pop-up area you’ll activate settings form of those elements.

4. Pop-up’s area settings are available in the right sidebar. You can set:

  • dimensions
  • corner radius
  • background color
  • border styles
  • close button properties

    • 5. Click “Save” button if you want to save changes.

    Please note you can’t move elements outside pop-up’s area.

    Add and manage pop-up’s components

    You can build your pop-up with components from Components Library. There are available few types to choose as:

  • Header
  • Paragraph
  • Link/button
  • Shapes
  • Images

    • Add a component to a pop-up and change its settings:

    1. Click on “Pop-ups” option in Content Personalization menu.
    2. Choose a pop-up’s name you want to edit.
    3. Open pop-up-s visual editor by click “Edit” button on the top.
    4. In the left sidebar, there are available components to choose.

    5. Choose any of components then drag and drop it on pop-up’s area.
    6. Click on component placed on pop-ups area to activate its settings.
    7. Component’s settings are available in the right sidebar. Example settings:

  • Text (Header, Paragraph, Link)
  • Position and Rotation
  • Styles (like color, font, size etc.)
  • Moving up or down compare to other components

    • At the bottom of settings, there is a button (“Delete this element”) to remove a component from pop-up’s area.

    8. Click “Save” button if you want to save changes.

    Add images

    You can add images to your pop-ups. You can upload them during pop-up edition or earlier in “Image browser” section.

    Upload images during pop-up edition

  • Click on “Pop-ups” option in Personalization menu.
  • Choose a pop-up’s name you want to edit.
  • Open pop-up-s visual editor by click “Edit” button on the top.
  • In left sidebar choose “Images” option.
  • Drag and drop image to “Image browser” page

    • Image restrictions

  • Acceptable format: PNG, JPEG, GIF
  • Weight: up to 8MB
  • Dimensions: up to 1000 x 1000px
  • Wait until it will end to upload a file.

    • Use already uploaded images

  • Open pop-up-s visual editor by click “Edit” button on the top of the Pop-ups section.
  • In left sidebar choose “Images” option.
  • Find your image then drag and drop it on pop-ups area.
  • You can move the image within pop-up’s area if it’s needed.

    • Select an image placed on pop-up’s area to see its options in the right sidebar:

  • Image properties – here you can set dimensions, position, and rotation
  • Arrange – here you can bring an image to front or put it back
  • Delete this element button allows you to remove an image from pop-up’s area (it won’t be removed from your images library).

    • Please also check