Blog page to look like integral

[GBrachetta]

Hi,

Hi do I make the blog page look like the theme, with the banner, etc, and add a button over the banner to go back to the home?

Many thanks

[Piotr (Tech Support)]

Hello @gbrachetta,

Hope you are doing great. Your featured images should be at least 750x375px (just like on the demo).

You may also want to add some widgets to the Right Sidebar, so the blog page look similar to the demo one.

To add banner to your Blog Page, you should simply add some HTML code to the index.php file. I believe lines between 15 and 23 are good place to paste your code.

Thank you,
Piotrek

[GBrachetta]

Hi Piotr,

Thank you for your reply.
I added a featured image to my blog page but that doesn’t show up in the blog.
What I want to achieve is to have the “blog” looking like the frontpage, with the banner and a button to go back home.
If you visit the site http://www.fantasticus.nl/sandbox/ you will see that the blog page (it is the “Agenda” section on the site, you can access it just by pressing the button in the banner) looks not at all like the theme.
Could you please let me know how to add such banner and button to make it look like home?

Many thanks!

[Piotr (Tech Support)]

Hey there,

Unfortunately, there is no an easy way to add Hero Header to the blog page. You can accomplish this by adding the following code to the index.php file. Lines 13 or 15 might be good places to paste it. Please keep in mind, that you may need to style it a bit to look exactly like the Front Page.

Code is here.

Let me know if there are any problems.

Thanks,
Piotrek

• This reply was modified 7 years, 4 months ago by Piotr (Tech Support). Reason: Code formatting

[GBrachetta]

Thanks Piotr, I’ll try that. Just to be extra sure, which of the index.php files? The one in the integral-pro folder?
Before I paste the extra code, is the button going to redirect me back to the front-page?

Many thanks!

Guillermo

[Piotr (Tech Support)]

Hello Guillermo,

Exactly, this is the one you may want to edit. Button is coded in HTML here:

a href=”http://www.fantasticus.nl/sandbox/” class=”btn btn-lg btn-primary”>Agenda

You can easily change Agenda for Home, and when moving your site from sandbox to live domain, you should change the URL to the live one.

I hope that above is useful to you.

Thanks,
Piotr

[GBrachetta]

That’s great, Piotr, it’s starting to work very well!
The only thing now is that the picture of the banner (in the blog only) shows now a low portion of it at the top.
Additionaly, could I use a different picture in there to differentiate it from the front-page?

http://www.fantasticus.nl/sandbox/blog/

Thank you for your help. I appreciate it very much! 🙂

Guillermo

[Piotr (Tech Support)]

Hello Guillermo,

To move your picture to top, you should change
style=”background-position: 50% -50px;”

to
style=”background-position: 50% -50px;margin-top:20px;”

Of course, you can use any image you want. If you want to change that picture, add the CSS rule below to your Appearance > Customize > Custom CSS section:

.blog .hero {
background-image: url(http://www.fantasticus.nl/sandbox/wp-content/uploads/2017/08/Fantasticus-Marco-Borggreve-copy-3.jpg) !important;
}

Don’t forget to change the URL of image to desired one.

Thanks,
Piotrek

[GBrachetta]

Wonderful! I was able to change the image of the Hero section in the blog, but it still shows a band of the bottom of the image at the top, even after adding the “margin-top:20px” bit.
This only happens on the desktop, not on the mobile version of the theme.
Any last tip? We’re nearly there!

Thanks so much!

Guillermo

[Hans (Support Admin)]

Hello Guillermo,

My apologies for the late reply.

I checked out the blog page and I see what you mean.

That is due to the Parallax effect. Try using an image which is greater in height.

Or, disable the Parallax effect on the blog page.