Outreach Pro landing page with home-bottom widgets: boxed layout?

[styzerParticipant]

Hi,

All I need is for the home page to look just like the other pages, which have a boxed layout, including 4 featured post widgets, but without the white background spilling full-width.

There are two types of width on a website: full-width, and boxed layout, where the width is limited to a certain figure, for example 1140px. So the content will be contained within that, and beyond that width we will be able to see the background image.

With the Outreach Pro, every page respects the boxed layout, EXCEPT the landing page. I've been trying a whole bunch of configurations in the stylesheet, even looked in the functions.php file.

Installing the plugin for extra layouts didn't help either, as it's all set to have full width, content+sidebar.

Any tip?

Thank you in advance,

Andre

https://alicevphd.com/

[AnitaKeymaster]

Hi @styzer I didn't see your post. It's because the boxed layout uses the "wrap" and the other areas do not. The Sub-footer uses the wrap, but you can remove the background color from that area:

.sub-footer {
  background-color: transparent;
}

.sub-footer .wrap {
  background: #6ab446;
  padding: 0 40px;
}

---

Love coffee, chocolate and my Bella!

[styzerParticipant]

Thank you Anita,

Here is the solution I applied finally:

File front-page.php

Modify: //* Add home bottom widgets
        add_action( 'genesis_before_footer', 'outreach_home_bottom_widgets', 1 );

With: //* Add home bottom widgets
        add_action( 'genesis_loop', 'outreach_home_bottom_widgets', 1 );

Then you need to edit the style.css file to modify paddings and background color:

From this ?–?

.home-bottom {
    background-color: #fff;
    padding-top: 60px;
}

.home-bottom .widget {
    background-color: #fff;
    float: left;
    margin-left: 2.564102564102564%;
    width: 23.076923076923077%;
}

?–? To this ?–?

.home-bottom {
    background-color: #fff;
    padding-top: 35px;
    padding: 25px;
}

.home-bottom .widget {
    float: left;
    margin-left: 2.564102564102564%;
    width: 23.076923076923077%;
}

And it worked!

Andre

[Author]

Posts