Get started 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.
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:
- 10 Minutes
- A publicly accessible website
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.
Section 1: Add a page to edit Back to top
Add a page
Add a website page to start editing:
- From the Websites overview page, click the
+ Add button at the top right corner.
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.
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 tweaking. Note that in Aliadoc, you can select any element in a page either directly by clicking or through its hierarchy position. We encourage you to try find the best element to modify to get the desired results (It's common to find nested elements you can only access through hierarchy navigation).
When you select an element several visual indicators appear (from top to bottom):
- PRO: The element hierarchy navigation bar to select parents, children and siblings easily.
- An action button bar for 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 panel for fine grained style changes.
- Clear the element selection (X mark).
- PRO: A set of handles around the element to visually adjust margins, padding and size.
Check our Application Overview page for additional information.
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.
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.