WordPress Tutorials about WordPress Designs
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?
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
Design a Vertical Features Box
July 7, 2011
Display your product options vertically inside a table with specially formatted headings, summary of main features and ‘call to action’ buttons at the bottom of each section.
Learn How to Design This Table
NOTE: Although the ‘call to action’ buttons on this table link to a shopping cart, this tutorial would work just as well with ‘Book Now’ or ‘Sign Up Now’ or ‘Get a Quote’ buttons linking to an online form (you can skip step 1 below if this is you).
If you have a lot of products, you may be better listing them one under the other in a table with the ‘Call to Action’ button in the right hand box on each row.
Keep Reading to find out how to design a table like the one above using a combination of WordPress plugins and other online resources.
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... |
WordPress Websites Get Mobile
May 28, 2011
The WPtouch Pro Plugin lets you create a mobile friendly version of your WordPress website so when people access your website using their iphone, ipad etc, they see your information and graphics easily on their small screen and can quickly navigate to other areas of your website.
Some of the features that set this plugin apart from other mobile plugins are:
- You can choose which page users see first so you can create a special homepage just for mobile users
- You can easily upload your logo to appear at the top of every page
- You can select a custom menu showing just the pages and categories you want
- Use your featured images/thumbnails as icons on pages and posts
- Upload custom icons for your menu as well as using the preloaded selection
Keep reading to find out how to use this plugin, what to put on your mobile website, how to add the features listed above and examples of other websites using this plugin.
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 – “Create a Mobile Version of Your Website”.
Available to download as a pdf file immediately.
Member Login
If you are already a member, please login below to view this page.
How to Get a Facebook Username
May 15, 2011
Once you get 25 fans on your Facebook business page, you can get a proper username.
This means that instead of having a string of letters and numbers in your Facebook address, you can just have www.Facebook.com/businessname. So much easier for people to remember and looks way better when listed on business cards and in email signatures. If you’re running a special promotion via facebook, you can promote your address without needing a full sized banner ad.
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... |
Member Login
If you are already a member, please login below to view this page.
Automatic Child Page Summaries
March 13, 2011
The Sub Page Summary plugin automatically adds a summary any top level page with one or more subpages. The summary includes a title linking to the subpage, a text excerpt and a thumbnail-sized image.
Many website owners worry about what to put on their top level pages when there are a number of subpages dropping down underneath. The solution is often to cut and paste custom summaries and link them to the pages below. This is time-consuming, often looks messy and needs to be manually updated everytime a new subpage is added. The Sub Page Summary plugin does all this for you automatically effectively creating a table of contents for each main section of your website.
This plugin does for pages what category pages do for posts. Keep reading to find out how to use it, ideas for different ways to use it and examples of websites already using it.
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
Available to download as a pdf file immediately.
Member Login
If you are already a member, please login below to view this page.
Ingredients for a Successful Homepage
January 31, 2011
Your homepage is the most important page on your website, the page the majority of your website visitors will see first. You need to include snippets of your most important information here, making sure the main info is ‘above the fold’ ( this means you should be able to see it on screen without having to scroll down the page).
- Print Homepage Planning Checklist below to plan your homepage
- Download Homepage Design Wireframes to mockup a layout for your website
- Checkout some Sample Homepage Designs below to get the ideas rolling
You need to be a member to view the rest of this page.
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
Available to download as a pdf file immediately.
Member Login
If you are already a member, please login below to view this page.
Flickr Photos in Website Design
September 19, 2010
Flickr is a photo sharing website which when integrated with WordPress adds a new dimension to your website layout.
Flickr photos from Orbis users on the Orbis website homepage.
As you add new photos to your Flickr account, they appear in the designated spot on your pages and keep your website looking fresh and interesting. Using the flickrRSS plugin means you can have your most recent Flickr images displaying across your homepage, in your website banner, in your sidebar or any other location on your website. I use Flickr to display screenshots of all the websites I’ve designed (see latest in my right sidebar) so it isn’t just limited to photos, although photos of local places on a tourism related website looks fantastic.
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... |
Member Login
If you are already a member, please login below to view this page.
WordPress Theme for Real Estate
June 23, 2010
WordPress and real estate are a match made in heaven especially when you start with a WordPress theme made especially for Real Estate like the AgentPress Theme from StudioPress.
View the new goodGround Real Estate website…
Multiple Categories
You can write property listings (blog posts) under as many different categories and sub categories as you like. They all fit seamlessly into the website’s navigation and can then be searched or viewed by category, sub-category or keyword. Adding the Multiple category selection widget means many categories can be searched at once. Eg. Price, Location, No. Bedrooms etc. The Agent Press theme lets you show an image and content summary for each category. Click on photo below right.
Easy Photo Uploading
Upload multiple photos to a property listing all at once and click ‘Insert Gallery’ button to add them to the post. Sizes are setup in your administration so resizing is automatic and you get a professional looking gallery on each listing in minutes. With one click you select a main photo to represent each listing and this appears on your homepage and category pages. Click on photo right.
Multiple Authors & Access Levels
WordPress can handle any number of different users with varying levels of access creating and/or publishing new listings. By adding an author box (see image below), you add an agent’s photo and details to every property listing. You can also separate each author’s feed to show properties by agent. Access levels can allow users to publish new posts, only write new posts or only edit their own posts – the combinations are endless.
Superior Search Engine Optimisation
WordPress publishes blog content as a feed so search engines can easily index any new listings as they appear. Each post allows you to add custom titles, permalinks, meta descriptions, keywords and tags pertaining that listing. Pretty permalinks mean that the website address of each and every page/post consists of keywords (not random letters & numbers).
Automatic Promotion of your Listings
Adding plugins such as Sociable, Twitter Tools and Other Category Posts let you and your readers easily promote each and every listing. Your feed can be linked to an email newsletter to automatically send new listings to your subscribers once a day, once a week or once a month. Setup one newsletter or one for each category or agent.
Why Use AgentPress?
Here are just a few of the things which make AgentPress the best choice:
- Set any number special fields to appear on every post (see image below)
- Show special properties in slideshow on homepage (make this part of a promotional package)
- Promote more special properties on the homepage
- Write a blog with tips and news for sellers and buyers
- include a second navigation bar showing main categories
Purchase the AgentPress theme here.
Other Plugins Used to Enhance Agent Press
- Multiple Category Search Widget
- My Favourite Posts plugin
- List posts by author
- Genesis Simple Sidebars
- Gravity Forms on sidebars
Change Your Website for a Promotion
April 3, 2010
These days, there’s a whole generation of people (including myself) who visit a website to find products and services or just to check things out before they ever visit a shop or purchase a product.
If you’re spending time and money on catalogues, sale flyers and print advertising, don’t forget to add promotions, sales, events and new products to your website too. Adding graphics or changing colours on your homepage, header or sidebars wont take you or your web designer long. Make sure you write a post too for search engines.
Promotions on Your Website
Here’s a screenshot of what we changed on the Evergreen Garden Centre website to promote their annual plant sale. Visit www.egn.co.nz for a live demo (until end of March).
Web Versions of Your Graphics
By getting web versions of your promotional graphics when you get your print graphics done you will save heaps of time and money. Ask your graphic designer, web designer or printer for the following:
- PDF versions of all catalogues and flyers (these can be viewed in Acrobat)
- A 72dpi screenshot of all catalogues and flyers (include on your blog post or homepage as a teaser and link to downloadable file)
- A square graphic for your sidebar (72dpi, either 125 pixels x 125 pixels or 250 pixels x 250 pixels depending on the size of your sidebar)
- A banner graphic for your header (72dpi, approx 400 pixels x 100 pixels depending on the space on your website header not taken up by your logo) [Read more]
