jQuery Archives - Untame

How To Create Full Screen Background Images In WordPress

Posted by | Tutorial, Video, WordPress | One Comment

WordPress Background Manager

As the internet changes into a more fluid experience, with websites being accessed from tablets, smartphones, laptops, kiosks and even cars, a trend has started to emerge. In an era wherein “Intentional Layout” is dying off, designers must find new ways to provide visual interest. Commonly, this search has led to the use of images. Because, hey, images are interesting by their very nature. In this post, I will show you how to replace your current WordPress background tool with the incredible WordPress Background Manager plugin. Read More

Responsive Web Design: Videos With FitVids

Posted by | Tutorial | No Comments

We have spent a lot of time covering ideas behind responsive web design. However, up until this point we have focused almost solely on the “Big Picture”. So today, let’s take some time and dive into an element that is essential when it comes to designing responsively. Video!

After all, it would be easy to say that people love watching videos online, so it only makes sense that we should design responsibly to meet our users where they are, on the devices they are using. So with that in mind, let’s take a look at FitVids.js by Chris Coyier and Paravel.

FitVids is a light weight responsive web design jQuery plugin that allows designers to not only design responsively for small screens, but also for large environments as well. It could make sense that using a tool like FitVids could allow you to embed several blog format videos into a page, and also create awesome full screen video backgrounds! Cool huh?!


If you would like to use FitVids within your own projects, it would be a good idea to check out the video above and follow along. However, if you are in a hurry then simply follow these steps.

Step 1: Download FitVids.js

Step 2: Include the plugin within your javascript (See Video for Example)

Step 3: Activate FitVids


<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

That’s it! Now you are up and running with FitVids and Videos placed within collapsing containers will bend to your will. So play around with it; I promise that you will find it capable of solving your problems and perhaps even providing a bit of inspiration! Just think of what you can create with a tool like FitVids in your pocket. So get back to designing your next cool site!

WordPress Slideshow Tutorial: How To Add a WP Orbit Slider

Posted by | Tutorial, WordPress | 3 Comments

Sometimes it is nice to add some interactivity to your pages. A Home, About or Gallery page can spice up user interaction with the addition of a slideshow, for example. You might assume that cool javascript tricks such as this are out of reach for beginners. However, today I am going to show how you can integrate a great looking slider on your site all with a few simple clicks (and without writing a single line of code).


Step 1: Go Fetch

First, lets take some time to go to the WordPress plugin page for the WP Orbit Slider. Once there, you can read through some of the documentation, faq’s and more. When diving into the use of any plugin, it is a good idea that you familiarize yourself with its area on the WordPress plugin repo as you may find tips that could save a bunch of time.


Step 2: Install

Next, lets get the orbit slider installed on your WordPress blog. We could download the plugin straight from the repo, upload it via FTP and then install it manually. However, thankfully WordPress has a built-in area to take care of that for you.

Log into the WordPress dashboard, then find the plugins page. Next, click “Add New” at the  top of the page. Search for the plugin by typing “WP Orbit Slider” into the search field.

Once the plugin has been found in the search, simply click “Install Now”. Pretty easy right? Once you have become familiar with this process, the entire WordPress Plugin Repository will become your virtual playground; experiment and have some fun!


Step 3: Setting Up The Slider

Next, we can set up the slider to display on any page that you would like but first we need to add a few slides. To begin adding slides to your new slider simply head back to your WordPress Dashboard. Now, locate the item on your navigation sidebar that says “Slides”, click and jump into the slides main page. Just as with the plugins before, we can now begin to add new slides to our slideshow. If you would like a bit more of a walkthrough, check out the video below for a step by step introduction to adding slides to our slider, declaring them as featured images and adding a descriptive title.



Step 4: Start Sliding

Finally, we can add our WP Orbit Slider to the desired page. To do this simply head over to the lucky page within your WordPress dashboard admin. Select “edit” and within the editor place the slider by typing in this shortcode

[orbit-slider]

Now, click on the Publish button and voila! Your new slideshow should be working in full force now. At any time, you may add this slider to another page. It is up to you!




I hope that you have found this tutorial to be an insightful look at how even a WordPress beginner can pull off professional level results with the help of a really neat plugin. Do you need some extra help setting up a site of your very own? Don’t hesitate to let us know via our contact page.

 


Start planning your project today. Get Started