Tag: CSS Grid Columns

Categories
Genesis Tutorials

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

Categories
Genesis Tutorials

Front Page Template Showing Genesis Featured Pages & Posts In Responsive Grid

This front page template includes widget areas you can populate with both the Genesis Featured Page and Genesis Featured Posts widgets which will be display in a grid with image hover overlay like this :

Genesis Featured Page Widget Image Hover Overlay

  • The 1st widget area is coded to display featured pages in a 3 column grid with image hover overlay.
  • The 2nd & 3rd widget areas are coded to display featured posts in a 3 column grid with image hover overlay.

Genesis Front Page Grid

By default, the caption is displayed, if added, otherwise the fallback text displayed is the image image description, if added, otherwise the entry title. This is easily changed if needed and support for PHP code modification is included for paid members.

Demo Video #

Shows the featured page and featured post widget entries displaying the featured image with hover overlay text for the entry title, caption or description in a responsive grid.

In this case, only the featured image is shown however the entry title and content can also be included using the widget settings.

Tested using version 3.2 of the Genesis Sample child theme by StudioPress however should work fine in most Genesis child themes.

Installation Steps

There’s 3 steps :

# Step 1 : Upload the files named front_page.php, title-overlay-featured-page-widget.php and title-overlay-featured-post-widget.php to your child themes root directory.

# Step 2 : Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of your child themes functions file.

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

Download Folder

You can add drag in the Genesis Featured Page widgets to the 1st widget area named 1 Featured Pages which are configured, as seen in the demo video, like this :

Genesis Featured Page Widget Settings

The Genesis Featured Posts widget settings are configured like this :

Genesis Featured Page Widget Settings

Related Templates

Categories
Genesis Tutorials

How To Add Image Hover Overlay Text To Gutenberg Images

This solution enables you to show text when images are hovered using the Gutenberg block editor. In this case, unique text is added to each image in the grid and shown on image hover.

No 3rd party plugins are required.

Gutenberg Image Hover Overlay Effect

Demo Video #

Shows images added to Gutenberg displaying with a text overlay on hover as well as the entire image linked to a URL

Tested using version 3.2 of the Genesis Sample child theme by StudioPress however, will work in any version of any Genesis child theme which supports Gutenberg.

Note : You could use a plugin to do this however, generally, you will be adding hundreds if not 1000’s of lines of PHP, JS and CSS code.

Installation Steps #

There’s 3 steps :

Step 1 – Upload the file named full-width.php to your child themes page-templates folder or the root directory of your theme and select the Template named Full Width Gutenberg from the Page Attributes box on your Edit Page screen. This adds a special body class to the page or post you are dealing with.

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

Step 3 – Modify the HTML for your images using this method :

Register for full access

Related Tutorials

Categories
Genesis Tutorials

Expanding Posts Grid Revealing Full Post When Excerpt Clicked

The code in this download displays excerpts in a grid. When one excerpt is clicked, the full post is displayed underneath the grid like this :

How To Create an Expanding Grid From Excerpt To Full Post

In this screenshot, the 6th excerpt is clicked displaying the full post after the grid of excerpts.

Watch the following video demo to see how it works :

Demo Video #

Shows excerpts for 6 posts displayed in a mobile responsive grid. When any excerpt is clicked, the full post content for that specific excerpt is revealed in full below the grid of excerpts.

Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme.

Installation Steps #

There’s 3 steps :

Step 1 – Upload the file named expanding-grid.php to your child themes root directory or page-templates folder.

Step 2 – Copy & paste the following CSS to the end of your child themes style.css file and clear caching.

Register for full access

Categories
Genesis Tutorials

Equal Height Logo & Header Right Widget Content On Desktops

The code in this download folder enables you to display your header image & a image in the header right widget area at equal heights on desktops.

On mobiles, the images will scale down to fit the size of the site header without leaving any space.

Desktop site header images

This way your images won’t be cut off on smaller mobile screens as seen in the following demo video.

Demo Video #

Shows the header image ( logo ) & image in the header right widget area displaying with equal height on desktops and scaling down to fit mobile screens without cutting off any part of the image.

This solution has been written to work with the Enterprise Pro child theme by StudioPress however the method used will work in any theme.

Installation Steps #

There’s 2 steps :

Step 1 – You’ll find the following code between lines 39 – 44 in functions.php. In this example, the values for the height & width have been set at 150px by 300px as seen in the following code example :

Step 2 – Paste the CSS from style.css to the end of your Enterprise Pro child themes style sheet and clear caching.

Download Folder

Categories
Genesis Tutorials

Zoom Featured Image On Hover With Title Overlay

This template for Genesis child themes can be used on any archive page type to display a grid of featured images with image zoom effect.

Zoom in Image CSS Effect

The post title is displayed over a background at the same time the image zooms in when hovered. You can also display the image description or caption otherwise the title displays by default.

Demo Video #

Shows a grid of featured images which zoom in on image hover and display the entry title of the post over the image.

Tested using the Genesis Sample child theme by StudioPress.

Installation Steps #

There’s 2 steps :

Create a new category named gallery and upload the file named category-gallery.php from the download folder to your child theme folder.

Download Folder

Copy & paste the following CSS to the end of your child themes style.css file and clear caching.

Register for full access

Categories
Genesis Tutorials

Genesis Blog Page Template Grid With Equal Height Entries – Wellness Pro

This template displays your posts in columns with equal height for each entry regardless of :

  • Title length
  • Content length
  • Featured image size

The template code is written to work with the Wellness Pro child theme by StudioPress and is a modified version of this template which was tested using the Essence Pro theme.

Genesis Blog Template Grid Equal Height

Demo Video #

Shows the blog page displaying posts in 3 columns with equal height for each entry regardless of title, image or excerpt content length.

Should work fine in most Genesis child themes without modification otherwise, try the blog page tag for templates tested in other child themes.

Note : While the code works with any sized featured images its best practice to crop your images to the exact same size before uploading theme on single posts.

Installation Steps

Download Folder

There’s 2 steps :

# Step 1 : Upload the page_blog.php file from the download folder to your child themes root directory and select the Custom Blog page template from the Templates drop down menu on the Edit Page screen.

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

Register for full access

Categories
Genesis Tutorials

Genesis Blog Page Template With Equal Height Posts In Grid – Essence Pro

The template in this download folder enables you to customize the blog page in any Genesis child theme.

Blog Page Grid With Posts in Equal Height

In this case, the template is coded to –

  • Full width content
  • Removes the breadcrumbs
  • Adds the blog page to the page attributes box on the Edit Page screen
  • Display each post ( entry ) exactly the same height regardless of title length
  • Sets a default featured image named default.png from your child themes images folder if no featured image added
  • Includes Posts per page setting for the blog page archive template only
  • Includes settings for include and exclude
  • Removes the default half-width-entries class included in the Essence Pro child theme. ( Remove this function if not using Essence Pro )
  • Set content to display with a content limit specific to this blog page
  • Customize/remove the read more text and link

You can also use any of the code from this template to further customize your blog page.

Demo Video #

Shows the blog page displaying posts of equal height regardless of title length.

Tested using the Essence Pro child theme by StudioPress however will work in any Genesis child theme. Some themes may require code tweaking.

Installation Steps #

There’s 2 steps :

Step 1 – Upload the file named page_blog.php to your child theme folder.

Step 2 – Copy & paste the following CSS to the end of your child themes style.css file and flush/clear all caching.

Register for full access

Related Templates

Categories
Genesis Tutorials

Custom Listings Template For Themes Using AgentPress Listings Plugin

This template enables you to display listings for any specific taxonomy term in a grid. Assumes you’re using the AgentPress Listings plugin with the AgentPress Pro, Agent Focused Pro or any other Genesis child theme.

Custom taxonomy term archive template for sold listings

In this example, the template displays listings for sold properties only by using the WordPress Template Hierarchy.

Demo Video #

Shows listings displayed using a custom template for the sold term.

The template displays the featured image and image caption for each listing in a 4 column grid.

Installation Steps #

There’s 2 steps :

Register for full access

Related Templates

Categories
Genesis Tutorials

Order Property Listings by For Sale & Sold In Each State

This custom template for AgentPress Pro theme users enables you to display listings by state or any other taxonomy term. It also enables you to display the listings under the For Sale and Sold terms as seen in the following screenshot :

listings-template-4sale-sold-state

Demo Video #

Shows your listings ordered by For Sale & Sold for each state.

Installation – Support Included #

There’s 3 steps :

Step 1 – Upload the file named listings.php to the AgentPress Pro themes root directory. Select the Template named Listings by State from the drop down menu in the Page Attributes box on any Edit Page screen.

Step 2 – Copy & paste the following CSS to the end of the AgentPress Pro themes style.css file and clear caching.

Register for full access

Related Tutorials

Categories
Genesis Tutorials

Create Custom Post Type With Archive Template

The code in this download folder enables you to :

  • Create a custom post type ( CPT )
  • Create custom taxonomy types
  • Customize your CPT archive template
  • Display CPT items in columns
  • Control the theme settings independent of the main Genesis > Theme Settings.
  • Add categories and tags to your custom post type.

Demo Video #

Shows how the code creates a CPT named portfolio with support for using categories and tags as well as creating custom taxonomy taxonomy types. Displays CPT items in a grid which can be changes to 2, 4 or 6 columns.

Includes the code to show/hide the featured image independent of the main Genesis archive settings.

Code Installation #

There’s 2 steps :

Register for full access

Categories
Genesis Tutorials

Blog Page Templates Like StudioPress

The templates in this download folder produce exactly what you see in the following screenshot and demo video :

StudioPress-Blog-Page-Templates

Based on this question from a member.

A grid-layout similar to https://studiopress.blog/ with a widget area on top so that categories are neatly presented.

Demo Video #

Shows entries in each category displayed in 3 columns with a responsive category menu widget added to the custom widget area before the loop on each category archive page including the blog page template.

Tested using the Genesis Sample child theme by StudioPress.

Code Installation #

There’s only 2 steps :

Register for full access

Related Templates

Categories
Genesis Tutorials

Copyblogger Style Front Page Grid

A member of the Genesis community recently sent this message :

I am reading your posts and they are great, here you have a new member on January 1st, if I subscribe now I forget about Christmas 🙂 I’m trying to create the post on the front page as copyblogger.com does. I love it, do you think you can do a tutorial of those? If you tell me if I subscribe tomorrow. Thank you

Here’s what you can do using the Genesis Sample child theme to replicate how Copyblogger.com display posts on their front page :

The download package includes CSS for media queries so each entry displays in a single column on smaller screens, as seen in the following demo video :

Demo Video #

Shows a similar layout to the front page of the Copyblogger website which you can use in any Genesis child theme. Note : The code may need modification for usage in other Genesis child themes.

Tested using the Genesis Sample & Authority Pro child themes ( works without any modification ).

Code Installation #

There’s 3 steps relating to usage of the files inside the download folder :

Step 1 : Upload the front-page.php file to the Genesis Sample child themes root directory.

Register for full access

Related Templates

Categories
Genesis Tutorials

Blog Template To Show Latest Post On Top of Entries In 2 Columns

This custom blog page template show the latest post full width ( 2 columns ) and then all other post underneath in 2 columns like this :

Note : This solution was written specifically for the Infinity Pro child theme. If you’re not using Infinity Pro, this solution may work better in your theme.

Demo Video #

Shows the latest post displaying full width with all other entries in 2 columns.

  • All posts display in a single column at screen widths under 960px width.
  • Also works with 3, 4 & 6 columns.
  • Works best when posts per page set to display a odd number of entries.

Code Installation – Included #

There’s 3 steps relating to usage of the code in the download folder :

Step 1 : Upload the page_blog.php file to the Infinity Pro theme folder like this :

Register for full access

Related Tutorials

Categories
Free Tutorials Genesis Tutorials

Display Genesis Featured Page Widgets In Columns Using CSS Grid

The CSS to display featured page widgets and featured posts in grid columns is different.

This CSS enables you to display 4 featured page widgets, added to 1 widget area, in a grid.

.grid-container {
    margin: 50px;
    display: grid;        
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 20px;
}

Assumes the PHP code for your widget outputs a div named grid-container, otherwise change the .grid-container class in the above CSS rule.

Here’s the result tested using the new Genesis Sample child theme by StudioPress :

You can then add optional CSS for styling and media Queries.

Style Genesis Featured Page Widgets #

Exact CSS used in the above screenshot.

/* Genesis Featured Page Widget 
--------------------------------------------- */

.grid-container .featured-content .entry {
	border-bottom: 1px solid #eee;
	margin-bottom: 20px;
}

.grid-container .featured-content .entry-image {
	height: 100%;
	width: 100%;
}

.grid-container .featured-content .entry-title {
	font-size: 23px;
	font-size: 2.3rem;
	margin-bottom: 15px;
	margin-top: 10px;
}

.grid-container .featuredpage .entry-content p {
    font-size: 14px;
}    
    
@media only screen and (max-width: 1023px) {
    
   .grid-container {
        margin: 50px;
        display: grid;        
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-gap: 20px;
    }    

}

Grid Template Columns #

Modify the value for the grid-template-columns property so you can change the number of widgets displayed in the grid.

grid-template-columns: repeat(auto-fit, minmax(15ch, 1fr));

This enables you to add any number of Genesis Featured Page widgets to 1 widget area and display them in a grid without having to modify the CSS again.

In this case we remove 1 widget and leave 3 which gives us this result without any further CSS modification :

Fallback CSS #

See this example of how to include fallback CSS for browsers which don’t support CSS Grid.

Categories
Genesis Tutorials

Add Countdown Timer To Genesis

This code adds a countdown timer to the site header or nav menu in the latest version of the Genesis Sample child theme.

Order of Header Elements

The solution in this tutorial includes CSS which enables you to re-order the stacking of site header elements at specific screen widths including the title-area, countdown timer and genesis-responsive-menu divs.

Video Demo

Shows the countdown timer displaying in the Genesis header and centered after the site title before the responsive toggle menu icon on smaller screens.

Tested using the Genesis Sample child theme by StudioPress. CSS may need tweaking for use in other Genesis child themes.

Register or login to access the code :

Register for full access

Related Tutorials

Categories
Genesis Tutorials

Reorder Widget Areas on Mobile

The solution in this download folder enables you to change the order of the front page widget areas on smaller screens.

You can also display the primary sidebar widget area before the content as you can see in the following screenshot :

In the above example, the home bottom widget area is displayed 1st, the home middle widgets 2nd and the home top widget 3rd.

Here’s the demo video showing the solution tested using the Magazine Pro child theme by StudioPress.

Video Demo

Shows the sidebar and front page widget areas reordered so they display in different positions when the screen reaches 1023px in width.

Works in any Genesis child theme.

Register or login to access the download folder :

Register for full access

Related Solutions

Categories
Genesis Tutorials

CSS Grid For Genesis Archives

This CSS enables you to display archive entries in columns without editing any existing code. All you need to do is copy & paste the CSS to the end of your child themes style sheet and clear caching.

Tested using the latest Genesis Sample child theme by StudioPress, this is one example of what the CSS enables you to do with each post in any archive page type :

Demo Video

Shows the first post displaying full width and every other posts displaying in columns unless its the last post which also displays full width only when a odd number of posts are set on the Read settings.

Also shows each post displaying full width when the screen size is less than 960px.

This solution also enables you to :

  • Display the last entry 100% width when using a odd number of entries removing any gaps.
  • Display entries in any number of columns at any screen width.
  • Display the archive pagination full width when using a odd number of posts
  • Position and style each post in the grid.

Here’s the CSS :

Register for full access

Related Tutorials