This article aims to give you a simple overview of what the Webascent Toolbox can do for you and the techniques you need to make it work. By the end, you should have the skills required to edit text and images on your site, allowing you to create its initial content and then to up date it whenever required.
The Webascent Toolbox — showing the Image Library.
An Overview
The topics covered in this article are listed below. As the objective is to provide an easy introduction to working with your website's pages, we won't be delving into every little nook and cranny, but aim instead to touch on the most important aspects. There will be other Articles and Tutorials with more in-depth information, illuminating not just the "hows" but also the "whys" of working with the Toolbox.
- Why the Toolbox?
- Logging into the Toolbox
- Selecting an Edit Box
- What is an Element?
- Adding to, Deleting and Re-arranging an Edit Box's Elements
- How to Edit Text
- Adding and Deleting an Image from your Webascent Image Library
- How to Edit an Image
- Publishing your changes
Why the Toolbox?
Our goal when we set out to create the Webascent Toolbox was to develop for our customers a simple to use tool sufficient for most routine editing without exposing them to the often confusing and geeky world of high-end Content Management Systems (CMS). The Webascent Toolbox doesn't try to be the Swiss Army knife of tools, performing every function you can think of. Its purposes have been carefully thought through so that it meets the day-to-day editing needs of the small business website without being overly time-consuming, unwieldy or complex.
Because the Webascent Toolbox concentrates on the 95% of what is required to create and maintain content in a website, we were able to keep it clean and simple to use.
Opening the Toolbox & Logging in
To start doing work on a page on your site, you first need to open the Toolbox. You do this by clicking on a (usually) small hidden link located in the footer area of each of your site's pages - you will know where it is! This will open up the Toolbox's Main window, where you enter your User Name & Password to log in.
Logging into the Webascent Toolbox
Your User Name is not case sensitive, so Smith, SMITH and smith will all work. Your Password on the other hand must be entered exactly as it was given to you — run87y and RUN87Y are not equal.
Selecting an Edit Box
Once you've successfully logged in, the web page you are editing will display a blue dotted outline around each of the current page's Edit Boxes. An Edit Box is an area of the page where you have control over the Elements located within it. To change the contents of an Edit Box you need first to activate it. You do this by clicking on the Edit Box Button, which is located at the top-left of each Edit Box (see image to the right).
When the Edit Box is activated the outline will change to a solid green. Each of its Elements will be identified by an Edit Button (a small button with a Pencil on it). The Toolbox's Main window will also display a list of all the Elements contained in the activated Edit Box.
The Toolbox showing the list of Elements in a selected Edit Box
To select an Element for editing, you can either click on it directly on your web page (by clicking on its Edit Button, the one with the little Pencil) or by selecting it from the list of Elements in the Toolbox's Main window (as you move your mouse over each listed element, it will be highlighted on your page in bright green, making it easier to see what you are selecting). Once you have selected an Element, its Pencil Edit Button will turn yellow, and its outline to solid red, to show that it has been selected.
What is an Element?
An Element is the building block of everything that can go in your Edit Boxes, in other words, the bits of your page that you can change. There are two basic types of Elements — a Text Element and a Component Element. Let's take a look at the Text Element first, as it is the one you'll be using the most when working on your pages.
The Text Element
A Text Element is a box that holds text. The words on your page. These can be a page headers (titles, subtitles), paragraphs, or lists, etc. The following image shows a selected Paragraph Text Element (you can tell that its a paragraph by the little <p> in the Element's Edit button, and if you hover your mouse over it, it displays "<p> Paragraph" in a tool-tip)
A Paragraph Text Element
The Component Element
A Component Element is a pre-built set of sub-elements and is identifiable by its Edit Button having a small "gear" icon on it. Sub-elements can by pictures, the titles of those pictures, items on a list etc. The picture of a Component Element to the right shows a component that contains an image and a title. Hovering your cursor over a Component Element's Edit Button will show a tool-tip with that component's name (in this case the component is called "Callout Right").
When you select a Component Element, the Toolbox will display a list of its sub-elements. You can either select a sub-element directly in the Component Element (by clicking on the sub-element's green circle button) or by choosing an item from the list in the Toolbox.
Components let us (the Webascent web designers) build pre-defined "sets" of elements that you can use on your page, giving you potentially complex elements in a form that is ready to use. Examples of Component Elements might be items in a restaurant's menu or a company's products, with images, descriptions and prices — the uses are limitless.
Adding to, Deleting and Re-arranging an Edit Box's Elements
With the Toolbox you can add a new Element to an Edit Box, or maybe duplicate/copy an existing Element (which can save quite a bit of time, if you are adding many similar Elements) and delete Elements that are no longer required.
Adding a New Element
To add a new Element to an Edit Box :
- Make sure the Edit Box has been selected.
- Select the existing Element that you would like to add the New Element next to (either above or below it).
- Select the New Element, that you would like to add, from the New Element Drop-down Menu (see image below), located in the Toolbox's Main window.
Selecting the Above button will add the New Element above the currently selected element, or if you haven't selected an element in the Edit Box, will add it to the top of the Edit Box's list of Elements. The Below button does the same, just below the currently selected element or at the bottom of the Edit Box's list of elements.
Adding a <ul> Bullet List element from the Add Element drop menu
Adding a Component element from the Add Element drop menu
Please note that each Edit Box defines its own set of Elements that it lets you add to it. Some Edit Boxes might offer you the choice of only a single Element that can be added, others might offer dozens of them (the images above are simply to show where the various Element types are located in the Add Menu).
Deleting an Element from the Page
Deleting an existing Element from an Edit Box is simple. You can either select the Element that you would like to delete and press the Delete button on the Toolbox's main window, or more easily, just right-click on the Element's Edit Button and choose Delete from the context menu that appears. (you can also select the Element to delete and choose Delete from the Element menu located in the Toolbox's main menu bar.)
Moving an Element to a new location on the Page
Often you will find that you want to move an existing Element to a different location in the Edit Box. To move the Element, you Cut (removes the element) it from its current location and then either use Paste Above, or Paste Below, to add it above or below another element in the Edit Box. These options are also located in the right-click context menu and the Toolbox's Element menu.
Copying and Pasting an Element (Duplicating)
To make copies of an existing Element, use Copy from the context menu and then either use Paste Above, or Paste Below, to add it above or below another element in the Edit Box. You can also choose to Duplicate an item at its current location.
These options are also located in the right-click context menu and the Toolbox's Element menu.
How to Edit Text
Editing Text is the mainstay of working with your website. Using the Webascent Toolbox to edit text is simply a matter of selecting the Text Element you wish to edit and then changing the text displayed in the Toolbox's Text Editor area.
The Webascent Toolbox's Text Editor
As you modify the text in the Text Editor, you will see the text in the selected Element change as well. The Text Editor allows you to make part of your text into Bold or Italic (the B and I buttons). The Chain Link button lets you add a hyper-link to your text and the Paste Text button lets you paste text from programs such as Microsoft Word or other text editors.
Adding and Deleting an Image from your Webascent Image Libraray
The Webascent Toolbox provides a simple, yet powerful Image Editor that lets you quickly add and modify images on your pages. To place a new image on your web page, you first upload the original .jpg file from your computer to the Toolbox's Image Library. Once an image is in the Library, it is available to be used in any Component Element that contains an image.
Adding a New Image to the Library
To add a new image to the Toolbox's Library, you must first select a Component Element on your page that contains an image and then select the image itself to open the Image Library (see The Component Element above to see how to select a Component).
Once the Image Library is visible in the Toolbox, click on the Add Image button, located at the bottom of the Toolbox (the button with a green "+" sign on it). This opens up a dialog box asking you to choose a .jpg image on your computer to upload.
Selecting a .jpg to add to the Image Library
Note: You should make sure the .jpg image you are uploading is no larger than 2500 x 2500 pixels in size and 72dpi.
Once you have selected the image you want to upload, click the Continue... button and the image will be uploaded to the Image Library (it might take a few seconds for the image to upload, depending on the speed of your connection and the size of the image being uploaded, so be patient). When the image has finished uploading, it will be displayed at the last position in the Image Library.
Deleting an image from the Library
Simply select the image you would like to remove from your Image Library and then click on the Delete Image button, located at the lower-left of the Toolbox (the button with the red "x" on it).
Image Library view options
The row of buttons along the top of the Image Library lets you change how the images are displayed in the Library and helps you navigate to the currently used image or the currently selected image.
The Image Library's view option buttons
These buttons let you change the size of the thumbnails displayed, view the library images at their original size (in a separate window) and let you jump to the currently selected or currently used images. Hold your mouse over each button for a brief description of what they do, and click on them to see what they do.
How to Edit an Image on your Web Page
To change an image in a Component Element, first select the image in the component (so that the Image Library is visible in the Toolbox). Then select the image you would like to use, located in the Image Library (if it's not there yet, you will need to upload it to the Library before you can place it in the Component).
When an image is selected, it displays a green outline and a round button with a triangle in it. To open the selected image for editing with the Toolbox's Image Editor, click on the triangle button. A new window will then open and the selected image will be displayed in it at its original size.
The Toolbox's Image Editor
The Image Editor lets you do the following:
- Resize an Image (using the Image Size slider control)
- Set the Crop area by dragging the image
- Add a Sharpen filter to the placed image
- Change the size of the Crop area if required
- Placing the Image in the selected Component
Resizing an Image
To change the size of the image, drag the Image Size slider back and forth until the desired size is reached. The Image Editor will not let you make the image smaller than the Crop Area.
Setting the Crop Area
The Crop Area is the part of the image that will be placed into the Selected Component, and is visible as the bright area of the image with a dotted line around it. To change which part of the image is located in the Crop Area, click and drag anywhere on the image to move it around.
Adding a Sharpen Filter to the Placed Image
When an image is resized it often becomes slightly fuzzy (a by-product of recalculating the image's pixels). When a web designer is creating graphics for professional use, they will usually use Photoshop to run what is called a Sharpen Filter on the image, after it's been resized, to make it look crisp and sharp again.
The Webascent Toolbox offers a Sharpen Filter (a drop menu located at the top-left of the Image Editor) that you can use to give your placed images a professional look. There is no best setting for using the Sharpen filter — some images will require more, others less and if you don't change an image's size (scale) then it might look the best without any Sharpening. Trial and error is the only way to get the best result.
Note: The Sharpen Filter is only applied to the placed image and not to the image visible in the Image Editor window. You'll need to hit the Set It button each time you change the Sharpen Filter drop menu, to see the changes.
Change the size of the Crop Area
When you open an image in the Image Editor window, the Crop Area will be set to the Component's preferred image size (each Component's image has a preferred, a minimum and a maximum size). Often this provides the best result for placing an image into a Component, but there are times when you will want to modify the default size of an image. For example, the centered images in this article are of varying sizes, so we've changed the crop area for each one, letting us give them all unique sizes.
To change the default Crop Area size, just un-check the Preferred Crop check box. The Image Editor will then show two small buttons on the edge of the Crop Area, where you can click and drag to change the size of the Crop Area.
Changing the default size of the image's Crop Area
Note that it's not possible to change the Crop Area size for every Component's images, as this might break the layout in certain cases. You will only be able to move the drag handles as far as the image's edge or its Minimum/Maximum Crop Area size setting — whichever comes first.
If this sounds complicated, you'll find that actually trying it out clarifies the explanation and makes it all quite obvious - as with many of the Toolbox's functions.
Placing the Image in the selected Component
When you're satisfied with the piece of the Image that you've selected and you would like to see what it looks like in the selected Component, click on the Set It button, located in the lower right of the Image Editor. This opens the Image Description Dialog Box, where you should enter a textual description of what the image is (doing this is required to create a standards based valid image, and is used for browsers that don't display images and for things like screen readers for the visually disabled).
Image Description Dialog Box
The Image Tooltip (optional) field allows you to add a short piece of text that will be displayed when the user moves their mouse cursor over the image. It's fine to leave this blank.
When you've finished entering the Alternate text, click the Continue button to tell Webascent to create a new cropped, scaled and sharpened image and to place it on your page in the currently selected Component. If you see that the image isn't correctly sized or cropped, then just repeat the process until you are happy.
Publishing your Changes
As you work on your page it is a good idea to Publish your changes frequently. By pushing the Publish button you are saving your changes to your web server and making them visible to anyone viewing your site. The Publish button is located at the top-right in the Toolbox's main window.