Creating a Responsive Landing Page for a WordPress

After learning how to use the wordpress capability manager we go on by creating a responsive landing page.  By using the Adobe Photoshop CS5 Slice tool, users can easily create a responsive landing page. It’s easy to convert PSD Web template designs over to HTML as some form of online layout. What first has to be done is create a design in Photoshop. The still elements of the ultimately responsive layout, such as buttons, images, text boxes and the like have to be drawn in Photoshop the same way that they would be if any other type of design was being made. Spend some time doing so to ensure that the layout is precisely how it should ultimately be in the end.

Slicing Up the Page

Once the custom .PSD web template file is finished, then a real blog landing page can be made from it. Start by opening up Photoshop and then:

  1. Select the file option and open up the file that the .PSD template document was stored in.
  2. Click on view.
  3. Select show and then select the guides option.
  4. Click on the view tab once again.
  5. Select snap and activate the snap grid tool. This will ensure that precise slices of the layout are made.
  6. Go to the main toolbar and select the square drop down box to activate the slice tool option. The mouse cursor should change into the slicing tool.
  7. Start in the upper corner and drag the mouse over the first layout corner.
  8. Make a square around the first region that needs to be cut out for coding.
  9. Ensure that the cut is as accurate as possible by using the blue snap guideline.
  10. Drag the tool over each of the individual buttons and then start to connect each square into regions that could be turned into HTML code.
  11. Make sure that everything that will become a hyperlink has been sectioned off.
  12. Select the “Save for Web and Devices” setting from the file menu to preview the sliced .PSD document.
  13. Click on the save button at the bottom of the window.
  14. Navigate to the new folder the save created.
  15. Ensure that all of the sliced objects from the file are located in that new folder.

It may be useful to count the number of files and ensure that this matches to the number of individual objects that were created as a result of the slices. Naturally most things will merely be coded into the main HTML document as a whole. Fewer numbers of objects will receive their own discrete files.

Making a Landing Page

While this will setup each of the individual sections of what will ultimately become a responsive wordpress landing page, it doesn’t actually create any real content. Anything that’s written will have to be provided later on by the user using wordpress services. It makes sense to write article landing page text into the Photoshop window before hand with the text tool, since the slice cursor can then have this text broken down into HTML. Naturally it’s completely possible to edit it later on with either an HTML or text editor, but then again it’s easy to get the step out of the way if the page is going to be only used once. Sample text should instead be used if the slices are to be reused constantly across a network, or if someone is attempting to create a template, which will then be distributed with the express concern of consistently reusing it as a template.