Application Overview

Getting to know the Aliadoc user interface

The Websites Dashboard Back to top

When you first log into your account, you will land in a screen like this. NOTE: This does not apply for our Shopify App.

This is the main navigation menu. From here you have access to every part of the platform:

  • Websites: The current view.
  • Recent edits: A dialog showing a list of the pages you recently edited.
  • Resources: Acess to our asset management dialog. It currently supports images you can use anywhere. From here you have access to a stock library search bar powered by Unsplash, a super complete and free to use stock imaging service to update any image on your website. You will soon become familiar with it as its used every time you need to change an image while editing.
  • Account: Your user account information and settings.
  • Log out: To just sign out from the app immediately.

From here you will have access to all the pages you have edited organized by domain name. By default a screenshot of the first page you edit is taken to be used as a visual representation for the pages of the domain, so you don't have to deal with just URLs to remember the pages edited.

Note the screenshot won't update when you update the page, its just there to help you recognize better the kind of pages edited under that domain. This is useful when you have a large number of websites.

From here you have access to the following options:

  • Edited pages: Access to the Edited Pages dialog with a list of the pages you edited under that domain. Each page entry has action buttons to activate commonly used functionality.

  • Verify website: A dialog giving you access to the website verification options. Currently only TXT DNS record verification method is available.

  • Delete: When you activate this option it will display a confirm dialog before proceeding to delete all page edit records you had. Any published resources will be unavailable after this. This action cannot be undone.

This button activates the Add and edit a new page dialog:

When we say "You just need a public web page URL to get started" we refer to this. You really need just a web page URL to start editing. Once filled in and clicking on the Continue button, you will be taken straight to the editor with your page loaded.

If this is the first page you edit, an entry for the page domain will also be created automatically and a page thumbnail will be taken. There's one caveat though: You need to paste the full final public web page URL here as the system won't follow redirects.

These are standard buttons to access two common menus in any modern web app. Notifications will show you recent system messages. The user icon will display a menu with the following options:

  • Edit new page: This is the same as clicking the Add blue button at the top.
  • User settings: Sends you to the user account settings page.
  • Increase quota limits: If you need more than what our monthly free quotas provide, you can buy higher ones here.

  • Help resources: Takes you to our help resources page.

  • Sign out: Logs you off.

This is a small menu with quick links to the help resources currently available.

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.