Sridhar Katakam

Genesis and WordPress Tutorials

How to replace Front Page 1 backstretch image with an inline image at smaller widths in Digital Pro

by 3 Comments

In one of my earlier articles, I showed How to replace Front Page 1 background image with an inline image at smaller widths in Altitude Pro.

This tutorial covers the same in Digital Pro.

We shall output the Front Page 1 image (changeable in the Customizer) above the widget in the HTML output, hide it from 801px and above and from 800px and below, hide the backstretch image and show the inline image to avoid the problem with backstretch image not appearing in full i.e., getting cut off at the left and right.

Before:

After:

Tested in Digital Pro 1.1.3.

Step 1

Let's add the inline image in the HTML output.

In front-page.php change

genesis_widget_area( 'front-page-1', array(
    'before' => '<div id="front-page-1" class="front-page-1"><div class="widget-area fadeup-effect"><div class="wrap">',
    'after'  => '</div></div></div>',
) );

to

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

    • The difference will be visible once you scroll horizontally to the right in the code box.

      Alternately, you can hover on the code and click on the button to copy the code to clipboard, paste it in a text editor and inspect the changes.

      Reply
    • >