Classy Ink Homepage

This tutorial will cover how to setup the Homepage for the Classy Ink theme.  These steps will walk you through how to setup the Post Carousel (or Photo Slider) and the call to action section right below the carousel.

Front Page 1 – Post Carousel

This step may already be done if you installed the plugins and widget content. If you haven’t installed the themes plugins or widget content please follow the next steps below.

1. Install Plugin

Click on PLUGINS >> ADD NEW. In the search box type in WP Responsive Recent Post Slider. Click INSTALL NOW >> ACTIVATE.

2. Setup Widget

Click on APPEARANCE >> WIDGETS. Next, click on CUSTOM HTML then chose FRONT PAGE 1 from the dropdown options.

Copy the following code then paste it into the widget. Click SAVE when done.

This is how the Front Page 1 widget section should look.

View your site to see the Post Carousel. You can change how many posts you would like shown by changing the number 5 (see in the code above).

Front Page 1 – Optional Photo Slider

If you would like to display a photo slider instead of the post carousel… CLICK HERE to follow the steps. When finished please return back to this page for the next steps.

Front Page 2 – Call To Action

1. Set Background Image

By default it will have a grey background but if you would like to use your own image… this is how.

Click on APPEARANCE >> CUSTOMIZE >> BACKGROUND IMAGES. Next, click CHANGE IMAGE then click (or upload) the image you would like to use. Click CHOOSE IMAGE (bottom right) when done. Click PUBLISH.

2. Add Call to Action Boxes

Blank Widget

Click on APPEARANCE >> WIDGETS. Click on CUSTOM HTML then choose FRONT PAGE 2 from the dropdown options. You do not need to add anything in this widget. Leave it blank. Click SAVE.

Features

Click on CUSTOM HTML then choose FRONT PAGE 2 from the dropdown options.

Copy the code below then paste it into that widget.

You can change the words by changing the following in the code:

  • view the
  • features
  • come see

Click SAVE when done.

Call to Action Boxes

Now it’s time to add the call to action boxes. Click on CUSTOM HTML then choose FRONT PAGE 2 from the dropdown options.

Copy the code below then paste it into that widget.

This is how Front Page 2 should look now.

Change this info to your own:

  • Category – change this to your title/page name.
  • https://studiomommy.com – change this link to your page link.

Repeat the steps above to add 2 more call to action boxes.

Camera Icon

The icons come from Font Awesome. You can easily change the icons by replacing fa-camera in the code (see code above) with the icon code of your choice. Click HERE to view all the free icons.

Click the icon of choice as shown in the example below.

Copy the icon code that starts with fa-
So in the example below I would only copy fa-grin-hearts

Your new code will look like this:

Tada! The homepage is done. Please return back to the Classy Ink tutorial to finish the rest.