WordPress Tutorials about Design & Layout
The best themes for creating a professional Wordpress website and blog for your business.
Editing Featured Images in Genesis
December 7, 2011
If you are running your WordPress website on the Genesis framework, you have the option to show featured images on both category pages next to post summaries and on Genesis featured posts or featured page widgets. This is a great way to spice up the look and feel of your website as well giving content clues and enticing readers to click through to a post to read more.
Most featured images are square and the area of the image shown is automatically selected from the centre of the image. This works out well sometimes but other times the cropped area looks awful and conveys nothing to the reader. Some examples…
- Full length people are cropped to show bellies only
- Logos are cropped to show only a small unrecognisable section
It is possible to edit the thumbnail version of an image so it shows the desired square section of the image while the original image remains the same. Keep reading to find out how to do this as well as how to setup Genesis to show featured images on category pages and how to select a featured image for a post or page.
You need to be a member to view this tutorial. Membership options below…
One Month | 3 Months | Lifetime |
| Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website |
| 1 month | 3 months | Forever |
| US$10 | US$30 | US$100 |
| More info... | More info... | More info... |
Already a Member?
Cropping & Resizing inside WordPress
December 7, 2011
WordPress now includes quite sophisticated tools to crop and resize images without leaving your website or having to purchase any special software. This is especially useful for reducing the size of photos from your digital camera and cropping just a selection of an image.
- Crop your image to an exact size for your slideshow or sidebar images
- Scale your image (keeping dimensions) to reduce the total file size (a great idea to keep loading times and hosting charges to a minimum)
- Rotate images or flip images vertically or horizontally
- Crop the thumbnail only to show the best square section
- Crop everything except the thumbnail
THIS IS A FREE TUTORIAL
Cropping an Image
If you downloaded an image and you only want to show part of it on your website, you can crop a section of your image.
- On your WordPress admin sidebar, go to Media/Add New
- Browse your computer and upload your image
- While the popup image window is still open, click on ‘Edit Image’ under the image preview
- Click on the image and drag a crop box over the section you want to show
- Adjust the cropped section by click on the points and dragging in or out
- Click on the crop tool above the image to complete the crop
- Click the ‘Save’ button to save changes
Scaling Your Image
Option #1 – keep same dimensions, reduce file size
- On your WordPress admin sidebar, go to Media/Add New
- Browse your computer and upload your image
- While the popup image window is still open, click on ‘Edit Image’ under the image preview
- Click Scale Image link top right
- Type either a width (first box) or height dimension
- Tick apply changes to all except thumbnail
- Click the Scale button
- Save Changes’ and close window or insert image
NOTE: If you need to crop and re-size your image, crop first, save your changes, then click the show link on the right of your image in the popup window and click on the edit image again to start resizing.
Option #2 – Scale to Exact Dimensions
- On your WordPress admin sidebar, go to Media/Add New
- Browse your computer and upload your image
- While the popup image window is still open, click on ‘Edit Image’ under the image preview
- Drag your mouse over the image and as you drag you will see the dimensions change on the right
- Once you have the right dimensions, click the crop tool to crop
- Apply changes to all except thumbnail
- Click the ‘Save Changes’ button and close window
See screenshot above under “Cropping an Image”. You can see the width and height on the right as the crop box is being dragged on the left.
Using Your New Image
Adding your image to your website:
If you were editing your image on the post you want it on, just click insert once you’ve finished editing, otherwise
- Edit the page or post where you want your button to appear
- Click the ‘Add Image’ icon above the post content box
- Add a new image or click the Media tab and find your finished button image if already uploaded
- Click on show to see details and make sure you have a relevant title and alt title on the image
- Select size and image alignment
- Click ‘Insert’ button
Using your image on another website
- Go to Media , then Library on your admin sidebar
- Click edit under the image you need
- Copy the link url for that image
- Paste into another website as html
- OR Click view under the image you need then right click and save the image to your computer to use at a later date.
For example. PayPal custom payment page banner, ads on other websites which need to be a specific size, slideshow images for your homepage slideshow which need to be an exact size.
Flexipages Dropdown Pages Widget
December 2, 2011
The Flexipages Plugin adds a dropdown list of pages to any widget area on your website. You choose which pages appear in the list providing quick access to a list of services, locations or another group of pages.
The dropdown layout means that you save space and by customising the widget background, title etc, you can make your pages box really stand out. You can use the widget any number of times with different pages available in each.
Keep reading to find out how to setup this plugin, how to add a custom background to the flexipages widget and see examples of WordPress sites using this plugin.
You need to be a member to view this tutorial. Membership options below…
One Month | 3 Months | Lifetime |
| Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website |
| 1 month | 3 months | Forever |
| US$10 | US$30 | US$100 |
| More info... | More info... | More info... |
Already a Member?
Genesis Theme Setup & Adding a Logo
November 24, 2011
Apart from how to install Genesis and a child theme, the question I am asked the most about Genesis is how to replace the default theme logo or text logo with your own logo.
Some of the newer Studio Press child themes have a special section inside WordPress admin where you can upload a logo directly to replace the default one. For most child themes, the file called logo.png just needs to be replaced with your own file with the same name.
Keep reading this tutorial to find out how to upload the Genesis Framework, then add a child theme plus how to replace the default logo with your own. Includes WordPress ftp tree diagram.
SPECIAL OFFER: Get the Genesis Framework for only $45. Offer ends 28th November 2011. Make sure you use the code THANKS at checkout and you can save 25% off of Genesis and any of the StudioPress child themes.
You need to be a member to view this tutorial. Membership options below…
One Month | 3 Months | Lifetime |
| Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website |
| 1 month | 3 months | Forever |
| US$10 | US$30 | US$100 |
| More info... | More info... | More info... |
Already a Member?
Guide to Genesis Featured Posts Widget
September 25, 2011
Like a shop window, this widget displays your newest, seasonal items in an attractive way in a place where no one walking past can possible resist taking a closer look.
The Genesis Featured Posts widget displays the most recent content from one of your blog categories in any number of different ways. Set the number of posts you would like to display, choose a category, then display title only, image only, title and excerpt, image and title just to name a few. You can use as many of these widgets as you like on your homepage, sidebar or footer to display a selection of your most recent content. You even get the option to include a link to more posts in the same category.
Keep reading for instructions on each of the ways you can use this widget, design tips and creative ideas, plus screenshots and links to websites using these widgets in different ways.
You need to be a member to view this tutorial. Membership options below…
One Month | 3 Months | Lifetime |
| Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website |
| 1 month | 3 months | Forever |
| US$10 | US$30 | US$100 |
| More info... | More info... | More info... |
Already a Member?
Create Custom Landing Pages in WordPress
September 13, 2011
A landing page is a webpage with a single focus which helps close your sale. Landing pages also allow you to focus your page titles and meta information for the best possible search engine optimisation for your key phrase.
This is the sort of page you want people responding to your advertising to land on rather than your homepage. Landing pages bypass your website layout so there is as little distraction as possible.
Common uses for landing pages:
Generate a newsletter signup, Sell a single product, Generate enquiries about a single property, Sell tickets to a special event, Introduce a product to a particular target market.
The Max Landing plugin lets you create custom landing pages from inside your WordPress admin choosing from a whole variety of different layouts including forms, photos and video. Keep reading to find out how…
You need to be a member to view this tutorial. Membership options below…
One Month | 3 Months | Lifetime |
| Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website |
| 1 month | 3 months | Forever |
| US$10 | US$30 | US$100 |
| More info... | More info... | More info... |
Already a Member?
Tips for Perfect NextGen Photo Galleries
August 29, 2011
The Next Generation Gallery Plugin for WordPress creates beautiful photo galleries to display on your WordPress website.
There are a lot of things you can do within this plugin to really make your galleries jump out of the page and sell your product including:
- the how and why of thumbnail sizes
- how to customise your thumbnails
- options for gallery layout and image sorting
- setting image effects for opening larger images
You need to be a member to view this tutorial. Membership options below…
One Month | 3 Months | Lifetime |
| Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website |
| 1 month | 3 months | Forever |
| US$10 | US$30 | US$100 |
| More info... | More info... | More info... |
Already a Member?
Optimise Photo Galleries for Google
August 20, 2011
Photo galleries can generate lots of great ‘Google juice’ as long as you make sure every image is search engine optimised.
Photo blogging is a great way to keep your website fresh and increase keywords on your site. Instead of creating blog categories, create photo galleries and regularly add images to your galleries. To find out if photo blogging is for you, answer the questions below:
- Is your business is more about the visual and less about the words?
- Are you in tourism, photography, design, retail, marketing, hair & beauty?
- Do you or your clients take lots of photos of your product?
- Can you draw, use Photoshop or take great photos?
By default Google can’t index your NextGen photo gallery images so keep reading to find out how to use NextGen gallery and the Yoast SEO plugin to optimise your images for search engines.
You need to be a member to view the rest of this page. Membership options below…
One Month | 3 Months | Lifetime |
| Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website |
| 1 month | 3 months | Forever |
| US$10 | US$30 | US$100 |
| More info... | More info... | More info... |
Already a Member?
Design Custom ‘Call to Action’ Buttons
July 28, 2011
Learn how to crop and re-size professional button images from Fotolia inside WordPress (no special software required).
A ‘Call to Action’ button is an eye-catching image on your website telling your visitors to take action. These buttons should guide your visitors through your website and help you achieve your website goals – things like making a sale, generating an enquiry, getting a newsletter signup.
Examples of effective ‘Call to Action’ buttons are: Apply Now, Register Now, Signup Here, Subscribe Now, Add to Cart, Book Now, Enquire Now, Download This Tutorial, Find out more. Your button should match your branding but also needs to stand out on the page. The wording should be appropriate to the information on the page, short and sweet and self-explanatory. The button should be clickable, taking the visitor to a shopping cart, enquiry/signup form or a page with further information.
This is a FREE TUTORIAL!
Finding a Button Image
Fotolia is a royalty free photo website with hundreds of professional icons and buttons for use on websites for as little as $1 per image. You will find finished ‘call to action’ buttons complete with text, button backgrounds only so you can add your own text and button sets with a variety of ‘calls to action’ placed on similar buttons. The later is great for keeping buttons consistent throughout your website when different actions are required.
- To find the image you need, go to the Fotolia website
- Sign up for a free account and stay signed in while browsing for images
- Enter a search phrase like ‘booking button’ or ‘website buttons’
- You might also add additional keywords like a particular colour or shape to narrow down your search
- When you see a button you like, click ‘add to shopping cart’ below the image
- When you have a few to revise or have found the right one, click on the ‘My Shopping Cart’ link to view them all
- Decide on an image and select the smallest option checkbox beside that image
- At the bottom of the page, buy credits
- Download your chosen image to your computer
Crop Images Inside WordPress
If you downloaded an image with lots of buttons on it, you will be able to crop each button inside WordPress.
- On your WordPress admin sidebar, go to Media/Add New
- Browse your computer and upload your Fotolia image
- While the popup image window is still open, click on ‘Edit Image’ under the image preview
- Click on the image and drag a crop box over the button you need
- Adjust the cropped section by click on points and dragging in or out
- Click on the crop tool above the image to complete the crop
- Click the ‘Save’ button to save changes
Re-size Images inside WordPress
If you downloaded a single button with text already on it, you will be able to re-size your image inside WordPress.
- On your WordPress admin sidebar, go to Media/Add New
- Browse your computer and upload your Fotolia image
- While the popup image window is still open, click on ‘Edit Image’ under the image preview
- Choose the ‘Scale Image‘ option on the right hand side
- Enter a width for your image (I would suggest approx 200 pixels)
- Apply changes to all except thumbnail
- Click the ‘Save Changes’ button and close window
NOTE: If you need to crop and re-size your image, crop first, save your changes, then click the show link on the right of your image in the popup window and click on the edit image again to start resizing.
Add Custom Text to Button Images
If you downloaded images with no text, follow the above steps to crop and re-size your button. Once your button background is as it should be, go to Media/Library. Hover over your image and click on the ‘View’ link. Right click on the image on your screen and choose ‘Save Image As’ to save the image to your computer.
If you have a PC, there is a program called ‘Paint’ where you can easily add text to your image.
- Go to All Programs, then Accessories, then open Paint
- Click the top left arrow and select Open
- Find the button file you saved
- In the Tools section, click on the ‘A’
- Click on your button and type the text you need
- Highlight text and use the options at top to change font, size, colour etc
- Drag the edges of your crop box to move the text into the right position
- Go back to top left arrow and choose ‘Save As’
- Save as a png file
Add buttons to a Page/Post
- Edit the page or post where you want your button to appear
- Click the ‘Add Image’ icon above the post content box
- Add a new image or click the Media tab and find your finished button image if already uploaded
- Click on show to see details and make sure you have a relevant title and alt title on the image
- Select full size as the size for your button and image alignment as none
- Click ‘Insert’ button
Add a ‘Call to Action’ Link
Click on your button once to select it, then click the unlink icon to make sure it isn’t linking to another version of the button. Then click on the button again and click the hyperlink icon to add a link. Enter a website address or choose another page on your website from the list.
Related Tutorials
Typekit Fonts for WordPress Headings
June 7, 2011
Typekit allows you to use a huge variety of fonts on your website so you are no longer limited to web safe fonts like Arial and Verdana which the majority of people have installed on their computer.
In the past, interesting fonts have been created in design programmes and inserted into a website as graphics. The problem with this is that search engines can’t read graphics so your SEO rankings suffer plus with a lot of graphics your page can take longer to load. Typekit now gives you the best of both worlds.
Keep reading to find out how to add typekit fonts to your WordPress website, get tips for choosing the right fonts and see some examples of typekit in action.
You need to be a member to view the rest of this page. Membership options below…
One Month | 3 Months | Lifetime |
| Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website |
| 1 month | 3 months | Forever |
| US$10 | US$30 | US$100 |
| More info... | More info... | More info... |
Download Tutorial
Purchase this tutorial – “Typekit Fonts For WordPress Headings” for US$4. Available to download as a pdf file immediately.
