Screenshots of the layouts of Handdrawn Pro WordPress Theme

This theme provides two different layouts for the front page. To create a front page click on “add page”, assign a title to your page (eg “Home”) and on the right part of the screen, in “Page Attributes” -> “Template” select Front-page, or Front Page Hero Image. Save your page and go to “Settings” -> “Reading”; in the “Front page displays” select “A static page” and from the drop down menu, choose the page that you just created. Go back in the page edit screen, where you will find several options depending on the chosen template for the home page.

Front-page

Set of options available for the "Front Page" Layout

 

If you have chosen the template called “Front-page” you will find three groups of options: “Handdrawn Front Page Settings – Classic Layout”, “Handdrawn Front Page Settings – Middle Page” and “Handdrawn Front Page Settings – Bottom Section”. The last two groups are only possible, in the sense that a checkbox lets you choose whether to display or not these parts of the home page.

Handdrawn Front Page Settings – Classic Layout

Set of options available for the "Front Page" Layout

 

This group of options begins with the ability to choose whether to display a slider of images, or even a text next to the slider.

Then you must set the slider content, which may contain the “featured images” of the latest posts or of specially uploaded images. You must select the slides number to be displayed and the color of the caption. It should be specified that in the event that you choose “Latest Posts”, image captions will be the post titles, and when you choose “Uploads” the slider captions are captions of individual uploaded images.

You can choose to display a dividing line under the section slider, selecting one of the options provided to “Middle Divider Page Style” and its color.

If at first you chose to display a text next to the slider, it’s time to type text, specifying a link to which user it must be sent, the link of graphic style and its color.

Handdrawn Front Page Settings – Middle Page

This group of options allows you to display 2 to 4 images. For each image you can select the graphic style and the color of the clip mask, heading text, link, and its color. You can also specify whether to put or not another dividing line, its style and its color.

Handdrawn Front Page Settings – Bottom Section

The bottom of the front page is set to contain 1 to 3 text fields, each characterized by a graphic header for which you can choose the style, color, text and links. It follows the field to enter the actual text.

Hero Image

Set of options available for the "Front Page Hero Image" template
Set of options available for the “Front Page Hero Image” template

 

If for your home page you have chosen the template “Front Page Hero Image” you will find a range of different options than the classic front page, called “Handdrawn Front Page Settings – Hero Image”. The so-called “Hero Image” is an image that fills the entire contents of the browser window, a style that is very fashionable among today’s websites. This template allows you to create a home page with this style, although you can enter the middle section and the bottom of the home page that we examined in the preceding paragraphs. If you want that all the contents of the screen is occupied by the image, you can also turn off the Sidebar (specifically for the front page hero) from the Customizer. The first check that you will find in this group of options is the key that allows you to upload the image. As this type of front page almost always allows you to click on a link, follow the controls to specify the url of the link destination, the link text and its graphic style. You can also specify a text to insert in the page and its location (centered, left, right). Note that in mobile devices the text layout is always centered. You can specify the color of text and graphics, and decide whether or not to display the elements in the graphic part of the screen up or down. There are 6 styles, but you can select a random mode so that the graphic changes to every page load (unless you are using a cache system). The header color of the home page can be set by the Customizer, as we will see later.