Get started with Aliadoc

What can you do with Aliadoc?

Fine tune style of any public website, adjust padding and margins of page elements, change images, add effects, change fonts, edit text or add full page translations inline and more - all in a full featured free-form visual page editor. With Aliadoc enhancing any website is easy. Just point and click to select an element and start making changes.

Each time you modify a page, all your style changes are recorded into a custom stylesheet file (CSS). A Javascript code file handle any dynamic change added like effects or dynamic inline text updates. Publish your changes for everyone to see, with a simple publishing process that captures your current work into static resources and generates an embed code for a one-time install in your page. All your changes will be made available and served from our high speed custom-designed CDN.

Next time you add changes, just run the publish process again to update your static resources and that's it, your updates will start being served immediately.

What you need:

Note: You can use Aliadoc on most browsers on computers and mobile devices. However, at this time, you can only edit pages on a computer using Google Chrome or Mozilla Firefox.

Guide contents

Section 1: Add a page to edit Back to top

Add a page

Add a website page to start editing:

Page URL

Clicking the Add button will open a panel with a field to enter the URL of a page you want to change. Aliadoc automatically organizes all pages you add per domain name, and will take a screenshot of the first one added in each domain for visual reference.

Note: You must enter the full and final URL of the page you wan to edit. Currently, Aliadoc doesn't support redirects. To avoid getting a blank page due to a redirect, we recommend you to open your page in a separate browser tab first and copy the URL from there, then paste it back in the field.

Select elements

Once a page is added it is loaded in the page editor. Notice how as you pass the mouse pointer over the different parts of the page, elements begin to highlight indicating they can be selected. Just click on any to select it and start adjusting its properties.

When you select an element several visual indicators appear (from top to bottom):

  • The element hierarchy navigation bar to select parents, children and siblings easily.
  • An action button bar giving you access to:
    • Activate inline text content editing (enabled if text content is available).
    • Change or set an image: Add or change a background image or change an image from a IMG tag.
    • Revert changes (enabled only if the element was changed).
    • Open the style properties palette panel.
    • Clear the element selection.
  • A set of handles around the element to visually adjust margins, padding and size

Check our Application Overview page for additional information.

Responsive breakpoints

Aliadoc gives you the possibility to apply style changes for specific screen sizes. By default, any style change you add will be applied to all sizes. Additionally, you can define a specific target screen size for a set of changes you want to add.

When you activate a size breakpoint, Aliadoc's page editing area will adjust according to the size you selected. Any change you add while a responsive breakpoint is active, will be added just for that screen size.

Change history

Want to know what elements you've changed so far? The change history icon right next to the page URL bar gives you access to a handy list of all the changes you've applied to the edited page.

Ordered from the most recent to the least one, the list gives you the possibility to locate a modified element quickly and revert all the changes applied to it in case of need.

Section 2: Fine tune and change Back to top

Inline text content updates

Change any piece of text content inline directly whenever it is available. When you select an element with text content, Aliadoc will enable the pencil icon button which allows you to edit the piece of text directly.

To change text, just double click on any element with text content. Or, from the toolbar above, click the pencil icon to activate the editing mode and start editing text inline. The toolbar will change displaying a different set of action buttons, including: Translate, Repeat translation, Apply changes and Cancel.

Margins, padding and size

Adjusting margins, padding and size is simple. When you select an element, a set of draggable handles appear to modify each of those values visually.

Except for the blue resize handle at the bottom right corner, each of them let you change values for all sides of the element: top, bottom, left, right:

  • Margins: Dragging orange handles adjust element margins. Drag outward to adjust.
  • Padding: Drag green handles to adjust element padding for each side. Drag inward to adjust.
  • Re-size: The blue circle handle at the bottom right corner changes element size.

Set or change images

Change or set an image on any element you select. It doesn't matter if its a background image or an image element. You can set both easily by clicking the image icon from the toolbar displayed when an element is selected.

Any image you set with Aliadoc will be a reference to its resource URL. Images used in websites are ultimately resource URLs; references of image files to load from a web server. If you have a local image file to use, click on the image icon right next to the reference URL field to open Aliadoc's Resouce Manager: A panel to manage image resource uploads that also allows you to search for an image in different royality-free image services like Unsplash.

Effects: You can also apply a Parallax effect to any image from this same panel. Right below the image resource URL field, the Image parallax select field will let you choose among 7 different Parallax effect settings including Zoom.

Change style properties

A full range of style properties are available to customize appearance of a selected element. Once an element is selected, click on the color palette icon from the top toolbar to activate the style properties panel that will show up on the right hand side of the screen.

Big icons at the top left side of the panel includes a big orange check mark icon button to accept changes, a cancel (X icon) button and an arrow icon button to collapse the panel to show any element not visible because of it. The rest of the icons represent different style property groupings and serve as quick access links or bookmarks.

Available properties to change are modeled after CSS (Cascade Style Sheets) properties of the same name. Each property field has a value helper (small arrow next to each field) that can come in different forms: As a range slider, a list box or a color selector. Notice some sections have a lock icon at the top right corner to enable/disable value mirroring: A handy feature for all fields in the group so if you change one, the others change as well to match the same value.

Notable style properties you can change are: round corners, borders, text and box shadows, colors, change fonts, a full set of text and background properties and much more to fine tune everything.

Section 3: Add a page translation Back to top

Accept the modified property values.

Accept the modified property values.

Accept the modified property values.

Accept the modified property values.

Section 4: Preview and publish your changes Back to top