Highlight Your Images with Ultra Vision

Ultra Vision

Images in blog posts can help to create an emotional response. Ultra Vision by Headway Themes is no different.

Ultra Vision is the perfect template for highlighting your blog images. A minimal design that puts your content first.

With Headway Themes powering your site, you can be rest assured that your site is going to load wicked-fast and your visitors are going to get your content quicker.

Some of the many features of Ultra Vision:

  • HTML5
  • Responsive
  • 3 different layouts
  • Threaded comments

Get started with Ultra Vision today. It’s very easy to setup and customize with the flexibility of Headway’s Visual Editor.

Ultra Vision and all other official Headway Templates and Blocks are included in the Headway Developer license.

Don’t own a Headway Developer license? Upgrade or Purchase one now!

Creating a Portfolio Website with Headway

Screen Shot 2014-02-19 at 12.02.07 PM

Portfolio themes focus on your work – often with big, beautiful graphics in the case of Photography, Web or Graphic Design portfolios. Today we’ll use the free WP Types plugin alongside a premium community Headway Extend Block, Article Builder, to make a beautiful portfolio layout.

Get Started

To complete this tutorial, you will need to download and install WP Types (Free) and purchase and install Article Builder (Premium). Activate both plugins. In this demo, we happen to be using the Carnegie Headway Template to jump-start our design.

Create A New Post Type

Before we can add portfolio items and create our layout styles with Article Builder, we will need to create a post type. Creating a separate post type will create another sidebar item in the WordPress Dashboard (we will call it Portfolio) where we can add our Portfolio items just like we do Posts and Pages.

To create your new type, go to Types -> Custom Types and Taxonomies and click on Add Custom Post Type.

Screen Shot 2014-02-19 at 8.51.51 AM

Fill in the blanks like so:

Custom Post Type Name Plural: Portfolio
Custom Post Type Name Singular: Portfolio Item
Slug: work

The slug will be what appears as part of your URL for each portfolio item. Here, I chose ‘work’ because I’d like to have a main landing page called ‘Portfolio’ – and setting this slug to ‘portfolio’ would conflict with a Page with a slug of ‘portfolio’ as well.

We will leave most of the other fields on the page at their defaults. You can read more about each option and what they do at WP Types. The one change you want to be sure you make is to check “Thumbnail” under “Display Options”. This is a portfolio – we need to display a featured image with each! Save your custom post type, and you will see “Portfolio” appear on the left – probably under “Comments”.

Screen Shot 2014-02-19 at 9.03.29 AM

Add a few Portfolio Items

Get started by adding a few portfolio items. Make sure you add a featured image to each one!

Screen Shot 2014-02-19 at 9.15.18 AM

Customize the Portfolio Page Layout

I created a page called Portfolio and added some simple introductory text.  Later, I can enhance this by adding call to action buttons, such as “Get a Quote” or “Read Testimonials”.

Screen Shot 2014-02-19 at 9.17.16 AM

 

Open the Portfolio page in the Visual Editor (Grid Mode) and either clone from an existing layout or start fresh with a preset or black grid. Make sure you have a Content Block set to default if you’d like to show the introductory content added on the Portfolio page, and then drop another block on the page – this time, choose Article Builder.

Configure Article Builder

Screen Shot 2014-02-19 at 11.58.22 AM

Filter Content

Under Filter Content, edit the Post Types filter to choose Portfolio from the list.

Build Layout

On the Build Layout tab, choose whether you will create a grid (Float) or list (Stacked) of portfolio items under Orientation. I’ve chosen Float.

Next define the number of items and columns, and modify as needed for mobile users. (Remember, mobile devices are much narrower so you probably want fewer columns). Finally, set the width between the items.

We’re creating a grid of previews with no space between and only hover effects – like a Portfolio Quilt – so we will remove the spacing entirely and set all these values to 0.

Build Articles

Finally, we can define the elements that appear for each Portfolio item. In this case, our “quilt”, we are only going to display the featured image, but you could choose to display the Title, Thumbnail, Excerpt, a Read More link, as well as post, author and comment meta.

In this case, we’re only displaying the Thumbnail [thumb] and nothing else.

Use the options on the left under ‘Build Articles’ to configure the display of various items. Choose ‘Thumb’ and adjust the thumbnail size as well as the hover effect to your liking.

Save and View

Voila! You have a simple grid with a pretty sweet hover effect, if you chose one – and it’s responsive, too. If you’d like to further style these elements in Design Mode, Article Builder is fully integrated into Design Mode of the Visual Editor, allowing you to modify all of the elements just as you would any other part of your website.

Screen Shot 2014-02-19 at 11.08.03 AM

Reduce the padding around the Article Container to really pack your thumbnails close together!

Part II: Advanced Techniques with Custom Fields

Stay tuned! Next week, we will expand on this tutorial and show you how you can gather custom data for each Portfolio Item using custom meta boxes and display it with Article Builder in your layout — no PHP needed!

Our Top 9 Best Free Stock Images Sites to Get You Started with Blogging

When it comes to blogging images are probably the most important piece to a blog post. And a lot of times, people are too impatient to when it comes to reading, but if you select the right images it will make visitors more likely to read your content.

I’ve found that a lot of bloggers don’t put too much time into looking for the right image to help connect with their visitors to read the article. I’ve even found theme designers and developers not find stock images to show off their latest WordPress themes.

At Headway Themes, we’ve had many discussions about where to find the best images for our templates and we wanted to share those with you as well. We’ve collected a list of free high quality stock image sites for you to use in your next project.

Unsplash

This is probably our favorite site for finding high quality pictures for Headway Templates. If you’ve taken a look at some of our templates — specifically the demos — you might notice some images from this site. Unsplash provides 10 new photos every 10 days. It’s probably the best license out there when it comes to images as they are CC0, which is basically public domain. You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission. I thought it would be good to include a few examples.

tumblr_myebs04aLi1st5lhmo1_1280 tumblr_mzgz6yFP0u1st5lhmo1_1280 tumblr_mzgz8arzYo1st5lhmo1_1280 tumblr_mzgzd79XMY1st5lhmo1_1280

Pixabay

Another site I personally like searching for images on is Pixabay. Pixabay provides images free of copyrights as well. All pictures are published under Creative Commons public domain deed CC0 (same as unsplash). You do need to be care of what images you click though as they will return some images from Shutterstock. It’s simply to finance Pixabay and provide a choice of professional photos. Here’s a few examples.

bird-197052_640 fighter-jet-63028_640 japan-220696_640 singapore-river-255116_640

PhotoPin

PhotoPin is a search engine of sorts as you can search based on terms. PhotoPin helps bloggers find photos for their blog and makes adding them to their posts fast and easy. It uses the Flickr API and searches creative commons photos to use for your blog. PhotoPin also has some results from iStockPhoto, which I’m guessing is to help keep their site up and running. Here’s a few examples of what you can find.

medium_434200569 medium_3918064684 medium_4152334926 medium_6263741160

Little Visuals

Like unsplash, Little Visuals provides the creative commons public domain deed CC0 high-resolution images. However, they only provide 7 images, zipped right into your inbox, every 7 days. I’ve never seen an image that was on Little Visuals end up on Unsplash or vice versa, so it’s always helpful to have multiple places to get images from. Here’s some samples of Little Visuals images.

bronica fresh left vik

Superfamous Studios

Superfamous is the Los-Angeles-based studio of Dutch interaction designer Folkert Gorter. He provides his images on this site under the Creative Commons Attribution 3.0 license. Basically meaning that you can use the work for your own purposes — including commercial use — as long as credit is provide. Here’s a few examples of Folkert’s images.

9790841974_44f467e88d 9044624044_48f9b1d533 9027758425_08e0616618 310185029_271e0ef24e

Dotspin

Dotspin is a photo-sharing platform created by lovers of sharing responsibly, and in an ordered manner. It’s main goal is to create the world’s largest bank of photographic content shared under Creative Commons licenses. Dotspin offers users a fun experience through which they can share pictures and receive well-deserved rewards.

I think one of the coolest sites I’ve come across, the way it works it pretty cool. When you snap a photo with Instagram or Twitter and tag it with #dotspin, they are then voted upon and evaluated by their community. If the photo is outstanding, you’ll get credits towards cool rewards.

0cb6d9fedeb111e1a2ab22000a1e87b3-7 1bf76fd4b2b711e2bfbf22000a9f1935-7 e10a16ec4d1111e3aacd12e8ce7ae5be-8 Foto-7

Death to the Stock Photo

Death to the Stock Photo provides free high-resolution lifestyle photography to you monthly directly in your inbox. It even allows you to do whatever you want with the photos. I’ve only recently found this one and have got a few images.

View More: http://deathtothestockphoto.pass.us/brick-and-mortar View More: http://deathtothestockphoto.pass.us/brick-and-mortar View More: http://deathtothestockphoto.pass.us/brick-and-mortar View More: http://deathtothestockphoto.pass.us/brick-and-mortar

We Function

We function, offers a few photos that are free and worth taking a look at for any project you may be working on. I like a lot of the photos they provide, but I can’t say that I’ve used them a ton in my projects.

012 015 016 017

Gratisography

Gratisography by Bells Design is a site that gets updated weekly with new free high-resolution pictures. They allow you to use them on both personal and commercial projects. Just click on an image and you’ll start downloading the high-resolution version. Here’s a few that I like.

44HH 54H 63H 65H

And that concludes the list. I would definitely take a look through each of these sites the next time you are needing an image for your blog post or Headway Template. Images go a long way in explaining your content, and it’s high time that we start finding better quality images to go along with out content.

If you’ve got any sites you go to that provides high-quality free stock images, please let us know in the comments. We’d love to take a look and add them to our list!

Use Custom Social Media Icons in the Social Block

The new Social Media Block in Headway 3.6 offers you an easy way to drop a predefined set of social media icons into your layout. Just choose the icon set, then choose the network, add link, rinse, repeat, and you’re done! Headway offers two options out of the box, a Peel Icon Set and SoftContinue Reading

Headway Quick Vids Changing the Background of a Headway Template

We’ve been getting a few questions recently about wanting to change the background of a Headway Template so I thought I’d make a quick video showing you how to do that. In the video, I’m using the Carnegie template. It’s available over in Extend for $29.00. Take a look at changing the background of aContinue Reading

Five Quick Tips for Your New Headway Site

Building a new Headway site is exciting, but as you get started don’t forget these quick tips to make your experience as smooth as possible! Free Resources Abound! Don’t be afraid to look around for free vector images, stock photos and even textures and buttons to give your site a professional look.  Try Vecteezy! for freeContinue Reading

Headway Quick Vids Resetting Headway

In this quick screencast we cover how to reset Headway. Sometimes you might want to reset Headway because you have messed up and want to start over or you may want to do a redesign. In either case you can easily reset Headway to be the reset to the “factory” settings.

Headway Quick Vid Responsive Block Hiding

In tis quick screencast we talk about Responsive Block hiding and how you can use it with the Responsive Grid. Learn how to easily add or remove blocks for certain media queries with the Responsive Block hiding feature.

Headway Quick Vid Responsive Overview

In this quick screencast we start to cover responsive design and how to enable the responsive grid on your site. Learn how to enable the responsive grid and get a basic understand of what happens when you enable it.

Headway Quick Vids Moving Blocks Part 2

In this quick screencast, we continue our discussion on how to move blocks between wrappers.

Headway Newsletter

Get the latest updates from our blog directly in your inbox! Are you ready to learn the latest from Headway Themes?

Copyright © 2013 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress