Carpe Diem Homepage

This tutorial will cover how to setup the Homepage for the Carpe Diem theme.

If you already installed the Widget Content, you can skip these tutorials and change the widget info by clicking on “Appearance” then “Widgets”. Click on each “Front Page…” to change the info to your info for the homepage.

If you did not install the widget content or need further help with each “Front Page” please see the tutorials below.

Front Page 1

This is the section on the homepage where it says “Boss Babe Inspired” and an image on the right.

1. Add the Text & Button

Click on “Appearance” >> “Widget“. Next, click on “Custom HTML” then choose “Front Page 1” from the dropdown.

Copy the code below and paste it in the Custom HTML box.

Change the info to your own info then click “Save”.

2. Add the Image

Click on “Image Widget” then choose “Front Page 1” from dropdown.

Note: vertical tall images work best

Click “Select an Image” and choose your image. Next change Align to “Center“. Then click “Save“.

If you would like to add a hidden text box that appears when hover… place the following code where it says “Caption” in the Image Widget.

Click “Save” when done. You Front Page 1 should look like the image below.

Front Page 2

This is the second section of the homepage that says “First Impression is Paramount”.

1. Add the Text Widget

Click on the “Text” widget then choose “Front Page 2” from the dropdown. Enter a title and text then click “Save”.

2. Add 3 Featured Page Advanced Widget

Click on “Genesis – Featured Page Advanced” widget then choose “Front Page 2“.

Fill in the widget as shown in the image below.

Click “Save” when done then add 2 more by repeating #2.

When you’re done… Front Page 2 widget section should look something like this:

Front Page 3

This is a button section right below Front Page 2. You do not have to use this widget section unless you need an extra button added.

If you would like to add a button under Front Page 2… click on “Custom HTML” then choose “Front Page 3“. Copy/paste the code below then click “Save“.

If you setup a Shop… you can also add a “Products” widget or your Shop Style widget to Front Page 3 as well.

Front Page 3 should look something like the image below.

Front Page 4 – Testimonial

You can use this section for a testimonial or your favorite quote.

Click on “Custom HTML” then choose “Front Page 4” from the dropdown.

Copy/paste the code below then change the info to your own info.

Click “Save” when done. Your Front Page 4 widget section should look something like this:

Front Page 5

Use this area to showcase another page, category, or post on your site. The image will be on the left and the content on the right. This is the section on the homepage that says “Easily Captivate Your Audience”.

1. Image Widget

Click on “Image Widget” then choose “Front Page 5“. Click “Select an Image” and choose your image. Next change Align to “Center“. Then click “Save“.

2. Custom HTML Widget

Click on “Custom HTML” then choose “Front Page 5“. Give your widget a title. Copy/Paste the code below in the Custom HTML widget. Change the info to your own info then click “Save“.

When complete, your Front Page 5 widget section should look something like this:

Front Page 6 – Seen In

This widget section showcases the 3 logos siting side by side below Front Page 5 that says “Seen In & Trusted By”. This section will take a little bit of prep work.

Prep Your Logos

Your logos will need to be the same size. This will help keep your logos evenly spaced and sized. The demo site logos are 500px in width and 200px in height. You can use a photo editing software like Canva or PicMonkey (affiliate) to resize your logos.

Add Text Widget

Once your logos are ready click on Appearance >> Widgets. Click on “Text” then choose “Front Page 6” from the dropdown menu. Give it a title like “As Seen In” then click “Save“.

Add Your Logos

Next, click on “Image Widget” and choose “Front Page 6” from the dropdown options. Click “Select an Image”, click on the logo of choice, then click “Insert into Widget”.

Delete the “Title” and change “Align” to Center. Save your changes then repeat these steps to add another logo. You can add 1, 2, 3, or 4 logos.

Front Page 7 – Testimonial

You can use this section for a testimonial or your favorite quote.

Click on “Custom HTML” then choose “Front Page 7” from the dropdown. 

Copy/paste the code below then change the info to your own info.

Click “Save” when done. Your Front Page 7 widget section should look something like this:

Front Page 8 – About Me

Let your visitors know a little bit about you. There are 2 widgets to setup in this section: Custom HTML widget & an Image Widget.

1. Custom HTML

Click on “Custom HTML” then choose “Front Page 8” from the dropdown. Give it a title then copy/paste the code below.

Change the info to your info then click “Save”.

2. Image Widget

Click on “Image Widget” an choose “Front Page 8” from the dropdown options. Click “Select an Image”, choose your profile image, then click “Insert into Widget”. Delete the “Title” and change “Align” to Center. The Image size in the demo site is 450px in width.

Front Page 9 – Image Background

This section on the homepage has the scrolling background image. There are 2 steps to use this section.

1. Custom HTML Widget

Inside “Appearance” >> “Widgets“… click on “Custom HTML“. Choose “Front Page 9” from the dropdown.

Copy/paste the code below then change the info to your own info.

Click “Save” when done. Front Page 9 should look like the image below.

2. Set Background Image

Next, click on “Appearance” then “Customize“. Click on “Background Images” then “Change Image“. Choose your image then click “Publish” at the top.

Front Page 10 – Blog Posts

There are 3 widgets for Front Page 10.

1. Custom HTML

Click on “Appearance” >> “Widgets“. Click on “Custom HTML“. Choose “Front Page 10″ from the dropdown.

Copy/paste the code below then click “Save“.

2. Genesis – Featured Posts

Click on “Genesis – Featured Posts” then choose “Front Page 10” from the dropdown. Fill out this widget as shown in the picture below.

Click “Save” when done.

3. Custom HTML

Click “Custom HTML” then choose “Front Page 10” from the dropdown. Copy/paste the code below then change the link to your blog link. Click “Save” when done.

Return to Carpe Diem’s Tutorials