Creating The Home Page

Since it’s the most important page, let’s create a beautiful home page together.

Table of Contents:

Example: This Website’s Home Page

If you’d like to see how the home page of this demo site was created, simply go to: https://fae-tools.notion.site/Home-5949bc4ec38948f2a3b7c5bd357bd49d

Style 1: Centered Text

We recommend using this style first so your audience’s attention is focused on a short paragraph about you.

Simply copy the code below to your home page:


{{< spectral/section class="style1 center" wrap-inner=true >}}

{{< spectral/header >}}

## Here your audience can learn more<br>This section is centered

A short description of you, your website and/or your product. Add a couple of icons below to accentuate your brand if you’d like.

{{< /spectral/header >}}

{{< spectral/icons >}}
{{< spectral/icon "fa-diamond style1" >}}
{{< spectral/icon "fa-heart style2" >}}
{{< spectral/icon "fa-code style3" >}}
{{< /spectral/icons >}}

{{< /spectral/section >}}

This means that you create a section of the classes style1 and center, which are classes defined by the theme to give you the look you see on this demo site’s home page.

💡

Note that you don’t really need to worry about all the parameters. We will work with you to create the design you like.

The <br> in the heading means that we want the second part on a new line.

Adding Custom Icons

The icons have different styles that determine their color.

As you can probably tell, the icons are a diamond, a heart, and a code symbol. The fa prefix stands for Font Awesome. You can search for your preferred icons on their website.

Once you found an icon, simply create a similar shortcode. For example, if you decided to use the house icon and like style3, you simply put:


{{< spectral/icon "fa-house style3" >}}

Style 2: Spotlight Sections

After that, you can define a couple of spotlight sections, wrapped in a style2 section.

You could do it like this:


{{< spectral/section class="alt style2" >}}

{{< spectral/section-spotlight >}}

<!-- Please put an image here because this is the point of the spotlight section. Simply type '/image' in a new line. Then delete this. -->

## Spotlight 1

Some text for the spotlight section.

{{< /spectral/section-spotlight >}}

{{< spectral/section-spotlight >}}

<!-- Please don't forget to replace this with an image. -->

## Spotlight 2

Some text for the other spotlight section.

{{< /spectral/section-spotlight >}}

{{< /spectral/section >}}

Just copy the whole snippet to your home page, replace the HTML comments with a picture each and you’re good to go!

Style 3: Highlight Features

Next, you could highlight a couple of features about our business like this:


{{< spectral/section class="style3 center" wrap-inner=true >}}

{{< spectral/header >}}

## We have some really cool features

Below you will see all the features we have created for you.

{{< /spectral/header >}}

{{< spectral/features >}}

{{< spectral/feature "fa-paper-plane" >}}

### My First Feature

Some feature text.

{{< /spectral/feature >}}

{{< spectral/feature "fa-laptop" >}}

### My Second Feature

Some text for the second feature.

{{< /spectral/feature >}}

{{< /spectral/features >}}

{{< /spectral/section >}}

Again, simply copy the code to your home page.

Note that you can optionally add icons to your feature. Again, simply search for the icon you want and then add the name like fa-paper-plane and fa-laptop as a parameter to the spectral/feature shortcode.

Call to Action

If you have defined a call to action (cta) menu, you can add the following snippet as well:


{{< spectral/cta >}}

## I’m calling you to action!

On your website, you can define a call to action just like this one.

{{< /spectral/cta >}}

Contact Form

Finally, you might want to add a contact section like this one.

For more information about the formspree shortcode, please see Creating a Contact Form.


{{< spectral/section id="contact" class="style5" wrap-inner=true >}}

{{< spectral/header >}}

## Contact

Leave us a message.

{{< /spectral/header >}}

{{< formspree "your_formspree_id" >}}

```html
<div class="row">
	<input type="text" class="text" name="name" id="name" placeholder="Name" required>
	<input type="email" class="email" name="email" id="email" placeholder="Email" required>
</div>
<textarea name="message" id="message" placeholder="Your Message" rows="6" required></textarea>
<input type="submit" class="submit" value="Send">

{{< /formspree >}}

{{< /spectral/section >}}




## Conclusion

That’s it, you’ve successfully created a beautiful home page.

Or you’ve hit a roadblock, in which case we are more than happy to help you out. 😊



**Next step:** In case you are wondering how we made the summaries show up on [the posts page](/06edd7a1-8af2-4d59-ac5b-d84937d56caf "All Posts"), check out [Creating Post Summaries](/c7d64a18-deb7-48f5-9464-ad616bb293fa "Creating Post Summaries").