• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Genesis Page Template With Multiple Loops For Pages & Posts With Featured Image Hover Overlay

This page template enables you to display featured images in a grid, with hover overlay text from posts and pages in full width sections like this :

Post Page Grid Image Hover Overlay

In this example, the template is named front-page.php however you can name it anything you like and use it as a single page template with template header.

// Template Name: Page for Multiple Loops

The file includes several custom loops and produces the same result as the code in this tutorial but using far less code.

Demo Video #

Shows the featured image for posts and pages with hover overlay text displaying in a responsive grid in different sections on the front page.

Tested using the Genesis Sample child theme by StudioPress however will work in most Genesis child themes without modification.

Installation Steps

There’s 2 steps :

# Step 1 : Upload the file named front-page.php to your child theme folder.

# Step 2 : Copy & paste the CSS from style.css file to the end of your child themes style sheet and clear caching.

Download Folder

Related Tutorials

  • Front Page Template Showing Genesis Featured Pages & Posts In Responsive Grid
  • How To Add Image Hover Overlay Text To Gutenberg Images

CSS Grid Columns Featured Image

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.