In the members-only forum, a user asked:
Images overlayed between between home page sections Infinity Pro
I’m not even sure what to call it.
Essentially I’m trying to copy the top of the home page here: https://www.fresyesrealty.com/ but use Infinity Pr.
In particular, I’m just trying to have the three circular images overlap between Front Page 1 widget area and Front Page 2 widget area like this:
This tutorial provides the steps to
- register a `porthole` Custom Post Type with an associated Porthole URL custom field
- write a custom WP_Query to loop through the CPT and display featured image, image's caption, title, and content between Front Page 1 and Front Page 2 widget areas
- add CSS to make the images circular with title and content below the image plus captions appearing on hover
Install and activate Pods.
porthole CPT with a
porthole_url custom field.
Enable support for Featured Image under Advanced Options.
You can import the CPT w/ the custom field here.
Add your three CPT entries.
Ideal dimensions for the images in this example is 550px x 550px.
Set your desired hover button text as the caption of featured image.
Add the following in Infinity Pro's functions.php:
// Register a custom image size for Porthole images add_image_size( 'porthole', 550, 550, true );
Regenerate thumbnails if necessary.
genesis_widget_area( 'front-page-1', array( 'before' => '<div id="front-page-1" class="front-page-1"><div class="image-section widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div>', ) );
To view the full content, please sign up for the membership.
Already a member? Log in below or here.