In this guide:

The Websites Dashboard
The Page Editor
The Styles Panel

Application Overview

Getting to know the Aliadoc user interface

The Page Editor Back to top

After adding a web page to edit, you will be taken to a screen like this.

This is an app navigation button that lets you go back to the dashboard page.

Each time you select an element with the mouse, you'll have an additional way to select other elements near the one selected. This tool lets you select based on the structure of your page and the currently selected element. With this selection tool you can:

  • Select any parent element: Select any parent of the currently selected element all the way to the root <body> element.

  • Select siblings: When the selected element has siblings, left/right arrow buttons will activate to let you select a previous or next immediate element siblings.

  • Select children: If the element selected has other element siblings, a button will enable to select the first one.

A field that displays the URL of the currently edited page.

This button activates the change history menu. A list with all the element changes you've applied to the page from the very least to the most recently updated one. It has the following functionality:



  • Highlight & locate a modified element.
  • Roll back changes from an element.

The page options menu. From here you have access to the following functionality, please note some options in this menu are not available when using our Shopify App:



  • Publish page edit: Once you have a set of changes ready, this option displays a dialog to run the publishing process of your changes.

  • Publish history: Shows a dialog with a listing of the different times you have run the publishing process for this page.

  • Get embed code: When you publish a page you will get an embed code to install in your page source code. You can get the code again anytime from this option. For more information about the install process check out our Installation guide

  • Preview changes: Preview your page changes as if they were published.

  • Discard all changes: Rollback all page changes so far if you want to start over.

  • Report a problem: Are you experiencing an issue with your page? Let us know with this option.

Each time you click on an element or pick one with the selection tool, it will highlight in a blue box.

These are available options you have for a selected element, each will highlight depending of the selected element:



  • Change image: If the selected element is an image, this button will activate to let you change it. Note this does not work for background images, for that case you will need to use the style dialog.

  • Revert style changes: If the selected element has style changes, roll them back with this button.

  • Open the style properties panel: This button activate the style properties panel. Details of this panel are presented later in this guide.

  • Close: Unselect current element selection. You can do the same by pressing the ESC key.

    Additionally, when an element with text content is selected and edited, a different toolbar # with options specific to text edit sessions is displayed with the following options:

    # #

    - Auto translate: Apply an automatic translation for the text content. Will display a dialog to let you # choose between 4 different translation engines.

    - Revert text changes: If the selected element has text content changes, this button will # let you roll them back to the original text.

    - Accept changes: Apply text changes made to the element.

    - Cancel: Cancel the editing session. No changes to the text will be applied.

There are times when content or whole page sections are hidden and only become visible if the user interacts with the page. The interaction mode allows you to stop selecting elements and use the mouse to click and reveal content that may be initially hidden like menus, sections, roll-overs, etc...



You can cancel an interaction session by clicking on the top button (the one with the Stop icon) so you can go back to select elements again.

Aliadoc support a set of responsive break points, the basis of modern responsive design. By selecting one of these breakpoints, the current page view will shrink/enlarge according to the one selected and every style change applied will automatically be applied only for the selected breakpoints. Available breakpoints are the following:

  • All: No responsive breakpoint selected. All style changes apply to all sizes. This is the default value.

  • Phone: The smallest size for mobile phones. All styles applied when this breakpoint is active will only be applied to small screens.

  • Desktop: Changes applied when this breakpoint is active will only be visible on devices with large screens.

The Styles Panel Back to top

When activating the style button action, the styles panel will appear.

Accept the modified property values.

Cancel any modification made.

Collapse panel to reveal content below.

General style properties to control layout behavior.

Margin and padding style properties.

Border style properties including round corners.

A full set of style properties for text content.

Style propeties for the background of elements. Includes background image changes.

Special style properties like shadows for both text and boxes.

Change the fill and stroke colors of SVG elements in a page. With the selection tool you can select the inner parts of an SVG element.

A handy feature to change multiple values in a group at once. Activate by clicking the lock icon, then if you change any field of the group, all others will change matching the value.