The Power Of EverWeb’s Assets Tab Explained!

When you design your website using EverWeb, you’ll be adding images and other media such as audio and video to your site. Such content is referred to as in EverWeb as ‘Assets’. You can find any asset that you add to your website just by clicking on the Assets tab in the Inspector Window on the right hand side of the EverWeb User Interface.

Before Adding Images To Your Project…
One of the things that we recommend when adding assets in to your EverWeb project is to name the asset in question so that it reflects the contents of the asset as best as possible before you import it. For example, if you have an image asset of a yellow sailing boat, its file name may be just a string of letters and numbers, especially if you’ve used a camera to take the image in question that you’re going to add to the project. As such, we strongly recommend renaming the file to be called something more relevant e.g.’small yellow boat’, before you add it in to your project. There are a couple of good reasons for doing this. First of all it’s going to be easier to keep your assets organised, it will be easier to find specific assets more quickly, and thirdly, it’s better for your SEO to do this.

Adding Assets To Your Project File
There are a few different ways in which you can add assets to your EverWeb website project file. Typically you’ll just drag and drop assets such as images directly on to the Editor Window from its source location. Easy. When you add an image file to a page in EverWeb it will automatically be added to the Assets List. This is of great advantage as it means that if you want to use an image multiple times in your site (e.g. a company logo) you only need to add it once to the Assets List. Once it’s in the Assets List you can drag and drop it from there on to whichever page you want in your site and as many times per page as you want.

The other advantage of this approach is that it makes managing your assets easier, and it stops your EverWeb Project file from ballooning in size.

If you want to add assets to your project file for later use, you can easily do that as well. Just click on the Assets tab, then drag and drop the assets that you want into the Assets List. EverWeb will assign the asset(s) to either the ‘Images’ section or to the ‘External Files’ section. As you’ve probably guessed, your images will go in to the Images section and all other media in to the External Files section.

The third way of adding assets to the Assets List is when you use the ‘Choose…’ button to add a file e.g. you want to add an image in the FlexBox widget. You click on the Choose… button but if the file you want is not listed, you can then select the Choose… option in the menu list and navigate to the file that you want to add to the FlexBox. Again, when you do the, the file also gets added to the Assets tab so that you can use it anywhere in your project.

Adding External Media
All external media that you add in to the pages of your project will be added in to the External Files section of the Assets Tab list. For example, if you add the Audio widget to the page then select your audio file using the Choose… button, the audio file will be added in to the Assets List as an external file.

Basic Assets Tab Features
Once you add assets to the Assets Tab, you can reuse them whenever you want. For example, click on an empty page in your project then click on the Assets Tab. Drag and drop the asset that you want to use on the page from the list of assets on to the Editor Window. Easy! You can easily preview assets as well, just click on the Eye icon to the right of the asset and a preview will appear. You can also select the asset in the list and press spacebar instead to see a preview. When you have an image in preview, you can use your computers up and down arrows to scroll to the next and previous assets in the list which is very handy. The preview feature can also be used for External Files as well. When you have finished using preview, you can use spacebar again to close the preview.

Earlier in this post we mentioned about renaming asset files before you import them in to your project file. If you have not done so you can still rename assets that are in the Assets List at aa later time. To do this, simply double click on the asset in the Assets Tab, then rename it as you desire. As stated earlier, try to make the file name one that tells you about the content of the file. Once you have renamed the asset, press Enter to finish. We still recommend where possible that you rename files before adding them in to your project as this is best from and SEO perspective. Renaming the file in EverWeb is still good to do though although not as SEO efficient.

If you find that you have added an asset to the Assets Tab that you no longer need, you can easily delete it manually just by selecting it in the Assert Tab then pressing the backspace key on your keyboard. If the asset is currently being used in your project, it will be replaced in the Editor Window by a placeholder image. To replace the placeholder image, simply drag and drop another image on top of the placeholder. You can use this method if you have added the wrong image to the page and want to replace it with another. This technique is useful when you have already sized the image to how you want it on the page, so drag and dropping a replacement image on top of the original will save you both time and effort!

In our next post, we’re going to look at advanced Asset Tab features as well as how to best organize your assets if you need to structure hundreds or thousands of assets!