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
Step 1Install and activate Pods. Create
portholeCPT with a
porthole_urlcustom field. Enable support for Featured Image under Advanced Options. You can import the CPT w/ the custom field here.
Step 2Add 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.
Step 3Add the following in Infinity Pro's functions.php:
Regenerate thumbnails if necessary.
// Register a custom image size for Porthole images add_image_size( 'porthole', 550, 550, true );
Step 4Edit front-page.php. In
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.