Editing your datAvenger Service website

With datAvenger it is easy to update and make changes to your site. To start you first need to login to your datAvenger admin area, by going to yourdomain/admin.

Once you are logged in, to edit a page you will need to click the page that you want to edit. This will open up the editing window, where you can make any of the necessary changes to the content of that page. From here you will have the editing toolbar at the top of the window and the content area below that. Usually this content area is a large white box, but in some cases can be a different color based on your sites background color.

To start editing you need to first click inside the content area, this will activate the editing window, and the toolbar. Once you have done that you can highlight, change and edit anything in the content area.

Now that you know how to activate the content area, lets take a few minutes to go over the editing options in the toolbar.

  • format – here you have options for headings 1-6, normal, address and formatted.
    • Headings 1-6 allow you to set up a content hierarchy for the content on your page. In most cases we use the Heading 1 for the title on the page, so it is best to skip this heading and start with Heading 2. You would use these to setup titles for sections of your content. For instance the page title would be a heading 2 and sub categories/titles would follow suite with headings 3-6.
    • Normal formats your text to look like the normal text on your website.
    • Address by default is going to format text to be italicized. This setting is customizable but is something that we have to customize for you if you would like to change it.
    • Formatted is going to display the text set to formatted exactly as you type it, including all spaces and line breaks.
  • Font – allows you to set the font of the selected text to any given font in the list.
  • Size – allows you to set the size of the selected text to any given size in the the list.
  • Bold – Allows you bold the selected text
  • Italics – Allows you to italicize the selected text
  • Font Color – Allows you to change the color of the selected text. There is an array of colors to choose from, and you can slide the handle to the right up and down to change the shade of the colors. Also once you have selected your color, you will need to click ok to apply it to the selected text.
  • Justification – Allows you to set the justification of the highlighted text. You have the options for left, right, center and fully justified.
  • Undo/Redo – Allow you undo and redo something that has been done.
  • Numbered/Bulleted List – Allow you to create numbered and bulleted lists out of the text on your site.

The next icons are more of the web based icons and will allow you to add links, images, and tables to your pages.

  • Insert Web Link – This allows you to change the highlighted text or selected image into a link.
    • URL – Lets you set the link destination to be an external website, or a page that does not exist on your site.
    • Page – Lets you set the link destination to be a page on your site. Simply select the page that you want to link to from the drop down.
    • Anchor on Page – Allows you to set the link destination to be an anchor that exists on this page. I will go over anchors in detail with the next toolbar icon.
    • Asset – Lets you link the selected text/image to an assets that you have uploaded to the site. This can be an image or a document. If you want to link to an asset that you have not yet uploaded you can click the upload an new asset link in this window and follow the steps to upload the asset you want to link to.
    • Email address – Allows you to link the highlighted text to an email address so that if someone clicks on the link it will allow them to compose a new email to that address.
    • Title (tooltip) – is what will show up next to the mouse when someone hovers over the link you are creating. A good example of some to add here would be the title of the page you are sending people to, or if it is an external link the url you are sending them to.
    • Target – determines how the link you are creating will open. You have the following options under target:
      • none – which will open the link in the same window/tab you are in now.
      • new window – will open the link in a new tab or new window depending on your browser settings.
      • same frame – will open up the link in the same frame that the link is in – use this option only if you are using frames on your page.
      • top frame – will open the link in the top frame of the site, this will function much link the none option will. Use this option only if you are using frames on your page.
      • other – allows you to specify a specific location for the link to open.

    once you have changed all of the options for you link, click okay, and this will create the link for you.

  • Anchor – This allows you to create an anchor on the page you are on. An anchor can best be described as a jump to point on the page. When you click this icon a new window will open allowing you to give a now to your anchor. When naming your anchor make sure to use no spaces to ensure it works correctly, so use dashes (-), underscores (_) or just no spaces. Once you have named your anchor you can highlight the text you want to link to it, and click the insert web link icon where you will be able to select your anchor for the anchor on page drop down.
  • Insert/Modify Image – allows you to insert a new image or modify an existing image on your page.
    • Image URL – allows you to place an image from another website on your site. You will need to put the URL for that image in the box provided for datAvenger to know where to pull the image from.
    • Preview – allows you to preview the image that you select from the assets drop down or put in the image URL box. This preview will show up at the bottom of the Insert/Modify Image window.
    • Asset – allows you to select an image that you have uploaded to assets to display on the page. If you have not yet uploaded the asset you want to use, you can click the upload a new asset link and follow the steps to upload the new asset, then you can select if from the drop down.
    • Alternative Text – This is a short description of your image, that servers several purposes. The first is for search engines, as they cannot read images (yet), the alternative text will tell the search engine what the image is about. Second is for screen readers. These are used for a variety of reasons but one of the most common is for visually disabled people and the alternative text will tell the screen reader what the image is, the screen reader will read outloud what you put for alternative text. Lastly the alternative text is what will show up if for some reason your image does not load, so that people know what is supposed to be there. Usually if you have text in your image it is best to add this text to the alternative text field.
    • Layout – gives you some control over how this image is going to display relative to the text around it.
      • Alignment – lets you set how this image will align relative to the text around it.
      • Border Thinkness – lets you set a border around the image. If you do not want a border make sure to set this value to 0 as some browsers will add a border by default.
    • Spacing – controls the spacing around the image, both horizontal and vertical.

    Once you have made all of the necessary changes in this window to display your image click okay.

  • Insert Table – use this icon to insert a table into your page. Tables generally should only be used for tabular data or to have items show up next to each other. There are more table options than what appear in this window, and I will go over these in another video.
    • Rows / Columns – lets you set the number of rows and columns you will have in your table. Rows go down and columns going across the page.
    • Width – allows you to set the width of the table in percent, pixels or ems, all of which are web measurements. Percent will set that table to be that percentage across your page, this is flexible depending on page size. Pixels will set the width to be that exact amount of pixels, and EMs will set the width to me the exact number of ems you specify.
    • Fixed width columns – is going to set each column to be the same width evenly over your table, by percent. So if you have a 2 column table each column will be 50% wide.
    • Layout – Lets you set the layout options of the table.
      • Alignment – sets how the table will display relative to the text around it.
      • Border Width – lets you set a border width to the table. This border will show up around the edge of your table as well as between each row and column
    • Spacing – allows you to set the spacing between columns and rows and the text inside each cell. As a note, usually entering 5 in these boxes is a good place to start for spacing.
      • Cell Spacing – sets the spacing between each cell of the table in pixels
      • Cell Padding – sets the padding between the cell wall and the text inside the cell in pixels.

    Once you have changed all of the necessary settings for your table click okay to insert you table into your page.

  • Toggle Borders – By default in datAvenger (and most content management systems) if you have a table with a border of 0 then you will not be able to see the border of that table in the editor, and thus will not be able to see where to enter the data. By clicking the toggle borders toolbar icon you will activate a faint dashed line around the cells and borders of your table allowing you to see it’s boundries
  • Clean up HTML – Many times you will have the content that you want to use in another document outside of datAvenger. And you will want to copy and paste that content from that document into datAvenger. A lot of the time this will add extraneous code to your page and can cause problems for you down the line, as browsers do not know what to do with this code. That is where the Clean up HTML toolbar icon comes in handy. If you click that icon you will be presented with some options, check the options that apply to what you want to do and click ok, this will clean up the HTML with the specified options. An alternative to do this, is either paste your text into a text editor like notepad on a PC and text edit on a Mac, this will strip all of the styling out and allow you to style once in datAvenger, or you can just simply do everything in datAvenger and sytle as needed there.
  • Toggle HTML Source – This toolbar icon i used to view the source code for the page you are on. It is mainly for advanced users that have a prior knowledge of HTML and can edit it directly.

Please note that all measurements used in datAvenger are done in either pixels, percent, or ems. If there is not an option to change the measurement unit than it will be measured in pixels.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s