Ready to tackle a new topic? We’ve got some ideas to share for changing up the content of a website with Sandvox.
The focus? Motion—this short article explains how to add a bit of motion and movement to a Sandvox website, to refresh existing content or add new material.
Remember when we showed you how to make a simple guitar lessons website search engine optimized? We’ll take it a step further and try to make it more attractive and attention-worthy by adding some motion to it. We’ll discuss three things you can add to make your website come to life: videos, slideshows, and moving images.
Videos
What better way to showcase how good your guitar lessons are than posting a sample tutorial video? The tricky part of embedding videos on websites is getting the format right. Of course, you would want to use a format that is compatible with as many visitors’ devices as possible. Fortunately, it’s quite easy to achieve that with Sandvox.
Inserting Videos From a Hard Drive
First, you have to export your video to the correct format. We suggest using mp4 format. From your video creation program, make sure that you export the video to be iPhone and/or iPad compatible if you want it to be viewable on mobile devices. Sandvox Help offers more information about video compatibility.
To insert a video, just drag it from the Finder to the main content area of your Sandvox document. You could also insert a Media Placeholder object first and then drag a video to it to make sure the video takes advantage of all available space in the design you’re using. Remember to test the video on your live site on as many browsers and devices as possible to ensure compatibility.
Inserting Videos From a Video Hosting Website
Another way (which may offer even broader compatibility) is to add videos by uploading them to a video hosting website, such as YouTube, and then embedding their location(s) within your website. A key advantage to embedding a YouTube video is that you don’t have to host videos, so they won’t be constrained by possible limitations set by hosting providers.
YouTube is also playable on virtually all devices, so compatibility gets easier to manage. Another neat feature of YouTube is it allows viewers to choose the video quality, which means your visitors can enjoy your videos whether they have very fast Internet connection or not.
Embedding a YouTube video to a Sandvox site can be done by going to Objects in the toolbar and selecting “YouTube”. If ‘YouTube video’ is the currently opened tab on your browser, Sandvox automatically inserts that video! (Just make sure you have the “Read URLs from web browser” box checked in Sandvox Preferences. This box is checked by default.)
If the video isn’t automatically inserted, go the Object Inspector and paste the URL, ID, or the embed code of the YouTube video in the “Video” field.
You can also add videos from other websites such as Vimeo by inserting a raw HTML object and pasting the embed code provided. The embed code can normally be found by clicking the “Share” or “Embed” button for the video.
Slideshows
Another great way of adding more life to your site is to use slideshows. Slideshows feature a series of related photos which advance by a set amount of time or on user input or both.
For our guitar lessons website, for example, we can use a slideshow that shows finger placement for a chord progression.
To do so, we’ll first make sure the pictures that will be used in the slideshow have the same aspect ratio so that none of them will be cropped.
We make our slideshow page by clicking “New” on the toolbar and selecting “Slide Show”. We will then drag our pictures to the slideshow placeholder either from the Finder or Sandvox’s Media Browser. And next, we will customize!
With the slideshow selected, we go the Object Inspector to select different transition effects, show or hide captions and adjust duration. One favorite feature here is the “Thumbnail” option under Navigation—it gives visitors a nice preview of all photos in the slideshow and allows them to quickly jump to any photo.
If we want our slideshow to be just part of another page and not a page by itself, we use Objects→Indexes→Slide Show to add a new slide show to the currently selected page. We then go to the Object Inspector and drag the “Collection to Index” to a photo album, another slideshow collection, or any collection which contains pictures.
Moving Images
Perhaps you can think of a funny three-second “moving picture” you’ve recently seen. That’s an animated GIF image. And while GIFs were introduced in the late 80s, they have recently been taking the Internet by storm. If done right, adding one to your site can make it more interesting. For our guitar website, we might create a GIF showcasing our guitar skills and make it in such a way that it looks continuous without a jarring break when the loop repeats.
if you want something a bit more subtle, try the cinemagraph, which looks like a normal still photograph but has a portion of it moving. The term was coined only in 2011 but it has steadily been gaining popularity. Cinemagraphs are usually published as GIFs.
“El Guitarista”, created by Sandvox user Christopher LeBlanc.
There are countless websites and apps which allow you to quickly make a GIF from a video or set of pictures for free. One thing you have to keep in mind is to create your GIF in the size you want it to appear on your website. Resizing your GIF in Sandvox will cause it to be converted to PNG or JPEG thus losing the animation.
We hope these tips will help you find new ideas for using Sandvox features that you haven’t yet explored, or even use your favorite ones in new ways. Enjoy!