The screen is divided in columns and expands on the right as you go further down the hierarchy, a little bit like a file explorer.
<%= help_img 'Overview', 'overview.png' %>The very first column displays your login name (e.g. admin). At the bottom you have a "Logout" button so that you can securely finish your working session.
<%= help_img 'Logout', 'logout.png' %>And then the second column is your starting point which represents as close as possible the sections of your website.
<%= help_img 'Menu', 'menu.png' %>The item you've selected is always blue in order to show you the path you've been through, again like a file explorer.
<%= help_img 'Subist', 'sublist.png' %>When you have reached a column like the last one on this image, it is a list page.
<%= help_img 'List', 'list.png' %>This can be a list of blog articles, a list of images or a list of contact details. The presentation will always be similar. You will see a relevant title, a relevant image (if there is one), and buttons for actions.If you click the title of the item you'll be able to edit the information of this item.
<%= help_img 'Edit', 'edit.png' %>The "delete" button allows you to delete the item.
<%= help_img 'Delete', 'delete.png' %>While being irreversible and potentially dangerous, the Bureau will warn you and give you the opportunity to cancel before proceeding.
When you rollover the top of the item, your cursor will turn into a hand which is a clue that you can re-order the items by drag-and-drop.
<%= help_img 'Sort', 'sort.png' %>Sometimes this hand does not appear, it means that the items cannot be sorted manually, generally because they are sorted automatically, alphabetically or by date for example.
When you want to create a new item, you can click the "plus" button.
<%= help_img 'Create', 'create.png' %>Items will sometimes have other items attached to them. For example a blog article can have a list of images or an artist can have a list of social medias. These are called relationships.
When this is the case, you will have links for each relationship at the bottom of the items and when you click on them, the system will bring you to another list column which follows the same structure.
<%= help_img 'Children', 'children.png' %>Once you get to finally edit or create something, the page will be a form like the example below.
<%= help_img 'Form', 'form.png' %>This page will probably be quite familiar to you. Field names within forms are meant to be as explicit as possible. For example they also include ideal image dimensions.
Press "Save"/"Update" when you are finished editing the item.
<%= help_img 'Save', 'save.png' %>All images on the website should be exported for web in one of the following formats:
— Jpeg
— PNG (if it requires transparancy)
— SVG (for logos and anything vector-based)
— Gif (not recommended unless a short animation is required)
You will not be able to upload images above a predifined maximum, usually 1MB. Typically most images saved for web can be compressed down to a file size between 150KB and 500KB.
On most text fields, you can add links or make text bold or italic with a simple markup called markdown. Here is an example of what you can do:
Markdown is good for *making things look italic* or **making things look bold**. Your can also create links [like this which links to Google](https://www.google.com). Although if you write a URL or an email address, you don't have to do anything because it will be turned into a link automatically anyway.
Which will be rendered like this:
Markdown is good for making things look italic or making things look bold. Your can also create links like this which links to Google. Although if you write a URL or an email address, you don't have to do anything because it will be turned into a link automatically anyway.
*Surrounding with stars makes text italic*
**Surrounding text with double stars makes it bold**
Links look like: [text to link](http://website.com)
It should be self explanatory but you can do much more with markdown. If you are interrested, we encourage you to read the full documentation.