Adding and Managing Links with datAvenger

Adding links is simple with datAvenger and datAvenger Pro.  You can link both text and images on a page, and can link to just about anything that lives on the web today.

If you want to link some text to something just add the text to your page, and highlight it.  Then click the insert web link icon in the toolbar, it looks like a world with a link over it.  Then fill in the appropriate areas for the link you want to create in the window that comes up.  The options you have are:

  • URL: is for adding a link to an external website, a site that does not  You will need to include the entire url including the http:// part for this link to work.
  • Page or Page on site: is for linking to a page you have already created on your site.  Just select the page from the drop down.
  • Anchor on page: is to link to an anchor that exists on your page.  You will need to create the anchor before you can link to it.  This feature is only available in datAvenger service.
  • Asset: lets you link to an uploaded asset from your site.  If you have not yet uploaded the asset you want to link to click the upload a new asset link and follow the steps to upload the new asset.
  • Email address: lets you link to someone’s email.  Just put the email address in here and whenever someone clicks the link it will compose a new email to that address.
  • Title (tooltip): is like help text.  This is what shows up next to the mouse when someone hovers over your link.  If you are going to use this it is good to put the url that you are sending people to or the site name.
  • Target: tells the browser how to open this link.  The main 2 you should use are none, and new window.  None will open the link in the same window/tab you are in, and new window will open the link in a new window/tab so that if a user closes the link tab it will bring them back to your site.  Use the new window option when you are linking to external websites.

To link and image to something the process is relatively the same, but instead of highlighting the image you just need to click on it so that you see the bounding boxes around the edge of the image, then click the insert web link icon in the toolbar and everything else is the same.

To edit a link that has already been created you can click the link and then right click and select modify link from the menu, or click the link and click the insert web link icon in the tool bar.

That is pretty much all there is to links in datAvenger.  Fell free to let us know if you have any questions.  To learn more about how you can use datAvenger and datAvenger Pro check out our other tutorial videos.


datAvenger Service does Analytics

Did you know that the lastest version of datAvenger Service has Google Analytics support to help you track site visitors and see trends of what’s happening on your site, and the best part is it’s super easy to setup.  To start you need to go to and setup the analytics account.  Once you have setup the analytics account, you need to get the code to put on your site: it usually looks like this:

<br />
<br />
var _gaq = _gaq || [];<br />
_gaq.push(['_setAccount', 'UA-xxxxxxx-x');<br />
<p>(function() {<br />
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;<br />
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : http://www') + '';<br />
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);<br />
})();<br />
<br />

You can find it in your Google Analytics Control Panel. Follow these screenshots:
Click the settings icon on the right side of the dashboard navigation bar.

Click Tracking Code tab

Copy Code from step 2 on this page

Now that you have the tracking code go into your datAvenger service admin area. Click the setting tab, then click tools, and paste your Google Analytics code into the box provided for Google Analytics. Click save and now your site will track the user’s behavior while on they are visiting the site.

5 questions to ask when comparing CMS options

We’ve shown that having a content management system for your site is important. But there are a number of content management systems available for use on sites. Web development companies usually pick one or two they like best; they might develop their own (for example, we built a CMS called datAvenger at Sephone), or they may choose to use an open-source CMS to power the sites they make.

But what should you compare if you’re looking at a few CMS options? Here are five questions to ask.

Is it hard to learn how to edit my site?

If you make a lot of changes to your site (or even if you don’t), the most important piece of the CMS puzzle is feeling comfortable with the area where you edit your site. If it’s a hassle or burden to find the page you want to change, wrangle with an editor, and then stumble to push the page to the live site, you’ll find yourself frustrated – fast.

If, on the other hand, editing makes sense and is easy to do, you can have an up-to-date site that changes whenever you like. There’s no reason why a simple content change on your site should take more than a few minutes. Don’t compromise on a CMS that makes you do more work.

Will my site play nice with search engines?

It’s important that people can find your site on the web. Search engine optimization (or SEO) isn’t all about the content on your site; it’s also about how your site itself is built. A good CMS can help your site shine on search engines.

A good first check is to see how the page addresses (known as URLs) look for your site. Many older content management systems use a combination of codes and ID numbers in the URLs for every page:

These kinds of URLs are tough for search engines to understand because they don’t say anything about what’s on the actual page. Look for a CMS that builds URLs using the title of the page, or another set of keywords you can customize:

These make it easier for both search engines and your visitors to remember your site.

Bonus tip: Ask how a site’s CMS handles mistyped or broken links. In the tech world, we call these 404s. Ideally a CMS should show a screen that tells your visitor that the page is not available. It should also send a special server status code (a 404) so that search engines and other sites can tell that the page doesn’t exist. This helps search engines remove a page from their results after you delete it from your site.

What kinds of content can I have on my site?

Form moduleAs we mentioned in our “What is a CMS?” post, most content management systems allow you to edit text in a rich text editor. This allows you to style text, add links and images, and more. Chances are, though, that your site isn’t only text. What if you want to add a form for visitors to fill out, an image gallery, or a widget from another site? Make sure that the CMS you choose can support the kinds of content you need (or can be customized to adapt to what your site needs to do).

Can I preview my changes before everyone sees them?

The administration area for some content management systems allows you to see how the changes you make will look on your site before you publish them to your live site. This is a great feature if you’d like to be able to tweak what you write before the world can see it.

Bonus tip: See if your CMS saves drafts as you work. If your browser or computer crashes, you don’t want to lose all of your changes!

Are pages for my site ready to be shared on social networks?

A link shared on FacebookFacebook and Twitter make it super simple to share links. Will the pages you share look their best, though? Facebook, for example, lets pages choose what they want for a description and image of a page when it’s shared. Check to see if your CMS can control how this looks instead of posting just the first few words from the page (or just the page title with no text at all).

These five questions are a good starting point when you start to compare your CMS options. If you’d like to know more about how content management systems can help your site, read more on our blog or get in touch with us!

datAvenger is a product of Sephone Interactive Media.

What is a content management system?

We all know how important it is for your business or organization to have a presence online. When you first decide to set up your site – or when you decide to make a change in how the site is run – one of the most critical decisions you can make is whether the site will use a content management system (CMS).

A content management system allows you to make changes to your own site, even if you have little technical knowhow. Instead of calling up a developer every time you’d like to change some text, rates, or a phone number on your site, a CMS lets you log into an administration area with a username and password and make the change in an editor. Once you’ve made the changes, they’ll appear instantly on your site.

Features of most content management systems

Content management system editor

Content management systems often feature rich text editors that allow you to style the text of your pages.

Most content management systems allow you to do a number of common tasks on your site.

  • Adding and removing pages
  • Editing pages in a WYSIWYG editor
  • Inserting links and images on pages
  • Customizing page titles and addresses

Reasons to use a CMS

There are a number of reasons why content management systems make a lot of sense for businesses.

  • Save money: Instead of paying a web developer every time you want to change your site, you can make edits whenever you like.
  • Save time: The changes you make in a CMS are published instantly; there’s no waiting hours (or days) for a change to be done.
  • Stay in control: A CMS lets you have complete control of what’s on your site. If you want to add or remove a page, or if you’d like to change some text, it’s easy to do!

We’re about to release the latest version of our own advanced CMS, datAvenger Pro. Over the next couple of weeks we’ll feature more posts about content management and how to make the most of your site!

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.

Learn how to update your datAvenger website navigation

To start, login to your datAvneger (this is found at yourdomainname/admin) and you will be brought to the content dashboard.  From here click the Settings tab at the top of the screen.

From Settings you have a bar with 4 options, Navigation, Theme, Tools, and Account.  As we are going to be dealing with the navigation we want to select the navigation tab.  This will bring you to a screen where you will see a drop down that asks “how would you like to control your navigation?”  The choices are Automatic, which will display all of the pages you have in alphabetical order in your website navigation.  The other option is manual, which gives you a bit more control.  Select the manual option and you will see 2 columns, your navigation and available pages.  Available pages are all of the pages you currently have created on your site, and your navigation are the pages that will show up in the navigation of your site.

To add specific pages to your site navigation simply drag the specific page from the available pages column to the your navigation column and drop it there.  Once you have moved all of the pages you want to the your navigation column, click update and this will save your site navigation.

This process is the same for removing navigation just drag the pages from the your navigation column to the available pages column and then click update and this will remove pages from your site navigation.

To watch a video demonstration of how to update your datAvenger website navigation click here or watch the video below.

A new update for all datAvenger users

It’s been a while since we’ve pushed any new features to datAvenger users. Well, starting today you might notice some new goodies in your admin area. Let’s run through some of the changes!


If you have the Form module available on your site, you’ll see that we’ve added one of our most-requested features: checkboxes! Checkboxes work a lot like selection fields, but they allow you to select more than one choice per field. The selected choices will appear as a comma-separated list in the notification email you receive when someone completes a form on your site.

Speedy admin

We’ve done a bunch of work to make the admin area speedier overall. Pages in the admin area load more quickly, and opening a page to edit takes less time now, too. We’d had a few reports of frequently-edited pages not showing up in the editor, and we’ve taken care of that with this release as well.

General cleanup

We’ve added additional polish all around the datAvenger interface: help text to tell you what sizes of images are best in the Theme Builder, a password reset utility if you forget your login information, and more. Hope you enjoy this new release!

Two years with datAvenger

Near the end of October 2008, I stood up in our conference room full of co-workers and presented a secret project I’d been developing under the radar: the newest version of our own content management system, datAvenger. We’d been using versions of datAvenger for years as the engine to drive the sites we build, but I believed this new version was the best we’d ever produced.

Two years and many updates later, it’s still the machinery that makes many of our sites work. We believe that you should be able to manage the content that’s on your own site. datAvenger lets you do that with style. Need to add some formatting or an image to your home page? It just takes a few clicks. Want a page with a form or a photo gallery? It’ll only take a few minutes to create. Recently we’ve added features to make site management even easier, including drag and drop asset uploading and Google Analytics integration. (We’re even working on a way to integrate datAvenger with mySephone. More about that soon!)

We built datAvenger ourselves so that we can listen to requests from people who use it and keep delivering enhancements all the time. We use a bunch of great tools under the hood (CakePHP, jQuery, and more), and every site that uses datAvenger as its engine receives the latest new updates and features free of charge as soon as we release them.

We’re really happy with the results. After two years, there are now over 250 datAvenger accounts. datAvenger sites as a whole have just under 600 pages, and users have added almost 8,000 assets (images and documents) to their sites. Visitors like it, too; we average around 200,000 pageviews per month if you combine the stats for all of our datAvenger sites. Best of all, there have been over 19,000 revisions to datAvenger pages; a revision is created whenever somebody makes changes to a page. I’m especially happy with that last stat, because I think it speaks to how easy datAvenger makes it to manage your own content.

Thanks to all of our dA users for the last two years. Some of the 250 accounts are using our completely free version of datAvenger; if you think you might be interested in simple content management, go sign up for datAvenger and try it for yourself!

Making uploads easier

We’re excited to announce the latest feature in datAvenger: drag-and-drop uploading in the Assets tab! We’ve made a short video to show how it’s done:


Using this new addition is really simple. Just drag files from your computer right onto the datAvenger screen to add them to your site. You’ll see a yellow border around the area where you can drop the files, and a message will appear in the bottom corner to let you know the progress of your upload.

Drag-and-drop uploading works in the latest versions of FirefoxSafari, and Google Chrome. If you’d like to use another browser or can’t upgrade to the latest version, you can still use the “Upload additional assets” link to add files to your site.

The new Sephone Resource Center will solve your website editing woes

Technology and the Web are constantly evolving and changing. It seems like every day there’s something new to learn. We know it can be tough to keep up with, and while we try to make our products easy to use, we know some of you might need a helping hand to step into Geekdom.

Sephone Resource Center - for people who feel like this when editing their website. (Photo from

And so the Sephone Resource Center was born! We often have similar questions about the “how-to’s” for the person that is just learning, or if there is a new person doing the job.

The Resource Center is a collection of tutorials for how to do common (and some uncommon) tasks in services like our content management system, datAvenger and datAvenger pro. This list of tutorials will continue to grow with new text and video tutorials and will continue to cover even more Sephone services.

Here are some examples of tutorials that are currently available:

Check it out! Visit and click on ‘help’.