Adding a home page to your art site

Creating your artist website home page

Creating your home page

By the end of this tutorial you’ll have built a homepage for your WordPress artist website using the Klasik theme from ThemeForest.net. The page you’ll create will display similarly to the homepage of DarenRedman.com, but with your own font choices, colours and, of course, your own artwork!

Textile artist Daren Redman's homepage

Again this tutorial is fairly long, but is broken down into the following manageable chunks:

[ezcol_1half][/ezcol_1half] [ezcol_1half_end][ezcol_1half][/ezcol_1half_end]

Preparing your images for the homepage

In order to achieve a similar homepage to DarenRedman.com, you’ll need to select 5 images of your work to resize for the homepage. I suggest you choose your most striking or most successful work; remember this is what visitors will be greeted with when they land on your site. Another consideration is that these pieces won’t necessarily be seen in full on the homepage, so select work that looks good in detail; you’ll be resizing and cropping the images to very specific dimensions.

First of all let’s prepare the image that will appear in this space on the homepage.

Prepare images by cropping them to specific sizes required by the Klasik WordPress theme

Cropping the images

The easiest way to crop images to specific dimensions is using Adobe Photoshop, but you can also do it with free online tools. I’ll take you through how to do it with both.

[ezcol_1quarter]

Using Photoshop to crop your images.

1. Open photoshop.

2. Go to File>New.

3. Enter a title for the image.

4. In the ‘Width’ field enter 285 and make sure the unit value is set to pixels. In the ‘Height’ field enter 340. Then click ‘OK’.

[/ezcol_1quarter] [ezcol_3quarter_end]

Set image size in photoshop

[/ezcol_3quarter_end]

5. Drag and drop the image you want to use into the Photoshop file. The image will automatically fit to the size but won’t necessarily fill the entire space.

Drag and drop the image into Photoshop file

6. Select the image you’ve just imported, hold down shift and alt (shift maintains dimensions, alt resizes from the centre of the image) and drag the bottom right corner until the image fills the space.

Stretch the image to fill the space in Photoshop

7. Move the image to wherever you want it, in order to show the most visually engaging detail of the artwork.

Drag the image into your preferred position

8. Go to File>Save as.

Save the image in Photoshop

In the dialogue box that pops up, click on ‘Place’.

Place the image in Photoshop

Then choose where to save the file and click ‘Save’.

Choose where to save the image on your computer

9. Now, we need to convert the image to use on the web. Go to File>Save for web and devices.

Now save the image for the web in Photoshop

10. In the window that opens, choose to save the image as a JPEG. Select ‘High’ as the image quality (anything above this will mean the image file will be too large to load quickly on your site). Make sure ‘Optimized’ is checked.

Make sure the settings you choose optimise the image for displaying well on the internet

11. Click ‘Save’ and choose where to save the image on your computer.

Choose where to save the jpeg file


Using pixlr.com (free online tool) to crop and resize images

1. Go to pixlr.com.

2. Click on Pixlr Editor.

Use Pixlr as an alternative photo editing software to Photoshop

3. Select ‘Open image from computer’.

Open an image from your computer

4. Select the image you want to crop and click ‘Open’.

Choose the image you wish to edit

5. Click on the ‘Crop’ tool.

Select the crop tool in Pixlr

6. In the dropdown menu next to ‘Constraint’ (above your image) choose ‘Output size’. In the ‘Width’ field enter 285 and in the ‘Height’ field enter 340.

Enter the image dimensions you require

7. Click in the top left hand corner of the image and drag downwards.

The crop box that appears will be constrained to the dimensions entered, but not necessarily the exact sizes. You need to look at the Navigator on the right of the screen to make sure you only drag the box to 285 pixels wide and 340 pixels high. Once you have it at the correct size, take your finger off the tracking pad or mouse.

Drag the crop box to the part of the image you wish to show in detail

8. Click anywhere in the crop box to move it into the desired position. Once you have it framing the best part of the image, hit return on your keypad. The image will now appear cropped and at the correct size and dimensions.

Press return to crop the image in Pixlr

9. Go to File>Save.

Save the image in Pixlr

10. Name the file and choose JPEG as the format, then select where on your computer you want to save the image. Click ‘Save’.

Choose to save the image as a JPEG and give it a name

Importing the image to a WordPress Gallery

The next stage is to create a new gallery in WordPress. This gallery will only be used to show this one particular image on the homepage. In the Klasik theme, each image you wish to display on the homepage needs its own gallery.

1. Log in to WordPress at YourSiteName/wp-admin/. In the right hand menu, hover over ‘Gallery’ and click ‘Add new’.

Add the image to a Gallery in WordPress

2. Enter the title of the piece in the top field along with any other information you’d like to display when the image is hovered over (for Daren’s site we chose to simply display the title and the year the piece was created).

Name the WordPress gallery

3. Now scroll down and check the boxes next to ‘Disable URL’ and ‘Disable similar project’. This will ensure that the image stands alone; you don’t want the images on the homepage to be clickable as they will merely open the same image in a new window, which is pointless.

Disable the URL so that the image doesn't link through to anything

4. Now, click on ‘Set featured image’ on the right-hand side of the page.

Set the gallery featured image in WordPress

5. Click on ‘Upload’ and drag and drop the image you’ve just cropped.

Drag and drop the JPEG file into the WordPress media uploader

6. Add a title, some alternative text and a description. These should include pertinent information about the piece; apart from the title, this text won’t be seen by visitors. The words you choose are for the search engines to decipher what the site is about.

Leave the caption field blank.

Click on ‘Set featured image’.

Add a title to the image, some alternative text and a description

7. Click on ‘Publish’.

Click 'Publish' to send the gallery to your live WordPress site

Repeating the process

[ezcol_1half]

You now need to repeat this process with 4 more images. However, they each need to be cropped to different sizes, which are listed below.

    • As a reminder, Image 1 (the one you’ve just uploaded) needs to be 285 pixels wide, 340 pixels tall.
    • Image 2 needs to be 315 pixels wide, 217 pixels tall.
    • Image 3 is the same size as image 2: 315 pixels wide, 217 pixels tall.
    • Image 4 needs to be 651 pixels wide, 355 pixels tall.
    • Image 5 needs to be 285 pixels wide, 227 pixels tall.

[/ezcol_1half] [ezcol_1half_end]

Here’s a reminder of the process.

    • Crop the image in Photoshop or at Pixlr.com.
    • Create a new gallery in WordPress.
    • Upload the cropped image and set it as the ‘Featured image’ for the new gallery. Then publish the gallery.

At this stage, you still won’t see anything on your live homepage. You’ve uploaded all of the images, but you haven’t told WordPress to display them yet. That’s the next stage!

[/ezcol_1half_end]

Where will the images appear on my homepage in the Klassik theme for WordPress?


Sending the images to your homepage

1. In your WordPress dashboard, hover over ‘Pages’ and click ‘Add New’. Name the new page ‘Home’.

Add a new page in WordPress

2. From the ‘Template’ dropdown menu choose ‘Home 1’.

Choose the Home 1 template from the dropdown menu (Klasik Theme)

3. Some more fields will now appear at the bottom of the page.

Leave the fields for ‘Home title’ and ‘Home tagline’ blank.

In the ‘Gallery on home’ section, click on each gallery you’ve created in the order you created them (they won’t be in that order – they display in alphabetical order by default). It’s important to click on them so they appear in the list in the exact order you created them, as the images are specific sizes and fit specifically into the jigsaw of the homepage.

Find the gallery you have created in the Gallery on home block

Leave all other fields as they are.

4. Now scroll back up to the main text area and enter any text you’d like to appear on the homepage. I suggest you keep this to a minimum – let the images of your work do the talking on this page – just a couple of sentences outlining your uniqueness as an artist is enough.

Add some text to the home page of your artist website

If you want to include a line to separate the images from the text as I have done on Daren’s site, click on the ‘Text’ tab and add this piece of code before any of your homepage text; <hr/>

To add a line underneath the gallery, add the <hr/> code

If you want to include a heading that looks like ‘About textile artist Daren Redman’ select the heading text and choose h4 from the Format dropdown menu.

Choose the heading setting for the page title or headline text

Please note: To preview your homepage, you need to click on the ‘Preview’ button. It won’t actually display as your live homepage until the final step.

Final Homepage tweaks

To put the finishing touches to your homepage, you’ll need to make a couple more tweaks. In order for us to do this, we need to know the page id. To get the page id, click on ‘Get shortlink’ under the title field of the page.

Find the WordPress page ID

In the link that pops up, you’re looking for the number at the very end. It appears after ‘?p=’. For the homepage of DarenRedman.com the page id is 5.

The WordPress page ID in the shortlink

We’re going to use this page id to set some specific styling just for the homepage using CSS (meaning it won’t affect the other pages on the site).

The first thing we want to do is remove the big HOME title that appears by default; visitors know it is the homepage as it is the first page they land on. This big title is distracting and takes our attention away from the most important aspect of the page; the images of your art.

How your new artist website home page will display with all the changes

To remove the title, subtitle and the large space allocated to it, go to Options>Main and scroll down to the Custom CSS box. We’re going to add some code to remove the title.

Underneath any other code that you’ve already adding (in the previous chapter) type in:

Custom CSS for your art home page

We also want to make sure that the image titles display clearly when the image is hovered over. To ensure this, we need to change the colour of the text (the default colour is too light to show up). By default, a link appears when you hover over the image. It is pointless and distracting, as it links straight through to exactly the same image in another window.

How to customise the gallery images on the home page in the Klasik WordPress theme

Go back to your colour list and find the Hex value for the colour you selected to use for headings.

Enter this code in the Custom CSS box replacing my colour with your own:

CSS to customise home page gallery images


Setting your homepage in WordPress

Finally, for the page we’ve built to display as our homepage, we need to tell WordPress to show it whenever anyone navigates to your website address. To do this, in the right hand menu in your WordPress dashboard, go to Settings>Reading.

Setting your home page in WordPress

Under ‘Front page displays’ choose ‘A static page’.  From the drop down menu, select the name of the page you created (Home).

Allocating a front page in WordPress settings

Scroll down and click ‘Save changes’.

OK

Good work! Now if you navigate to your main URL, you should be greeted with a homepage that looks something like this!

How the home page displays at DarenRedman.com

border

Go to Chapter 7 – Creating your About page >>>

<<< Go back to Chapter 5 – Customising the look and functionality of your website

Does building a site from scratch fill you with dread?
Don’t worry – we’re here to help.

Click here to learn more about TextileArtist.org’s web design service
or register your interest below.

[mc4wp_form]

Hello and welcome to TextileArtist.org

TextileArtist.org is a place for textile artists and art enthusiasts to be inspired, learn from the best, promote their work and communicate with like-minded creatives.

NEWSLETTER FOR TEXTILE & FIBER ARTISTS

JOIN A COMMUNITY OF 60,000 STITCHERS

Share in the creative secrets of the world's most celebrated embroidery artists.

And discover how to create breathtaking art with textiles and stitch.

All Inspiration. No Spam.

Thank you for subscribing to our newsletter

What the artists say

"Textileartist.org is an invaluable resource. I am constantly sending students there and sharing it with other practitioners".

Nigel Cheney
Lecturer in Embroidered Textiles at NCAD

"The beauty of TextileArtist.org is that whenever you visit you'll discover something that you didn't already know".

Rachel Parker
Textile Study Group Graduate of the year 2012

"TextileArtist.org gives contemporary textile practice a voice; leading artists, useful guides and a forum for textiles".

Cas Holmes
Textile Artist and teacher

"This website is exactly what we need in the textiles world. A fantastic inspirational resource".

Carol Naylor
Textile and Embroidery Artist

  Get updates from TextileArtist.org via RSS or Email