Creating a photography front page using GeneratePress

Creating a front page for a photography website based on WordPress can be a daunting task. Don’t worry, I’m here to help. In this video, we’ll be using WordPress alongside the excellent theme GeneratePress to create a front page with a so-called hero image. We will delve into editing the CSS code and creating a header element within GeneratePress.

Why choose WordPress for a photography website

WordPress is the most popular CMS for websites. And I think it makes the perfect backend for a photography website. GeneratePress is my favourite theme when working with WordPress. It is built for speed and simplicity.

While it isn’t targeted specifically at photographers it can make for a great photography website with a few tweaks here and there. Because many photographers aren’t technologically minded I’m here to help you toward building your perfect website! As always, leave any questions in the comments down below.

GeneratePress code snippets

Additional CSS

.page-hero-content {
    padding: 20px;
    border: 5px solid rgba(211,211,35,0.2);
    border-radius: 10px;
    max-width: 700px;
}

@media (max-width: 1200px) {
    .page-hero-content {
         padding: 10px;
         margin: auto;
    }
}

.inside-page-hero {
    display: -ms-grid;
    display: grid;
    grid-template-areas: "left right";
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
}

.page-hero-content {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: right;
	background: rgba(255,217,230,0.8);
	border: 0px;
}

@media (max-width: 768px) {
    .inside-page-hero {
        display: block;
    }
}

Front Page Hero Element

<div class="page-hero-content">
  <h1>Liam Alexander Colman</h1>
  <h2>Landscape Photographer, YouTuber, and Dad.</h2>
  <div class="page-hero-buttons">
		[widget id="lsi_widget-2"]
  </div>
</div>

Make secondary navigation transparent

.secondary-navigation {
    background-color: rgba(171,111,132,0.5);
}