[Support request] How can I customize my homepage to look exactly like the "Target" demo?

[Theodore]

I just bought the Generatepress premium after using the free version for some months. After installing and activating the plugin, I checked the “site library” section and fell in love with the demo titled “Target” which I saw under the “No Page Builder” tab as I think it’ll be perfect for my site.

However, I’m finding it really difficult now to make my site look exactly like the demo or does it require a page builder to work that way?

Please, I need urgent assistance to this as the demo messed up my sites layout after i installed it.

Thanks.

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi there,

Target doesn’t use a page builder.

Your home page is currently the posts page, which is something target doesn’t have actually.

Can you see the original Target home page anywhere? It should be called Home as well.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Theodore]

That is the problem. I can’t find the target home page, and the whole thing is very confusing.

Please, is there a way you can help me set this up? There is supposed to be a complete documentation of how to customize each of the demos in the site library.

Please, I’ll be happy if I can get help with this ASAP, it took you guys over 5 hours to respond to me the first time.

[Leo]

It shouldn’t be this confusing usually.

Just to make sure, you imported the site including the demo content but none of the pages were imported?

There is not a page called Tech either?

It just looks like you didn’t import the demo content.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Theodore]

Yes, I didn’t import the demo because I already have content on my site. So I was thinking that importing the demo will mess things up.

So, how can I get this fixed now?

I’m seriously not enjoying this Generatepress premium, it seems I’m better off with the free version. I hate stress.

[Leo]

Yeah that would be the problem without importing the content.

You would have to recreate the home page basically.

The first section is using the header element:
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/page-hero-examples/

The second section is using the Sections add-on with some ghost buttons:
https://docs.generatepress.com/article/sections-overview/
https://docs.generatepress.com/article/adding-buttons/#ghost-buttons

The third section is using Sections add-on again with WP Show Posts to show 3 posts:
https://wordpress.org/plugins/wp-show-posts/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Theodore]

This is really helpful. But please, while watching the video for “header element”, I noticed that he added some codes “meta data” after the “page title” , but i couldn’t see clearly what those codes are because the video is kinda blurry.

Please, can you help me with the codes?

Thank you.

[Leo]

I think you are referring to the template tags as in this example:
https://docs.generatepress.com/article/page-hero-examples/#example-2

You can see the full list here:
https://docs.generatepress.com/article/header-element-template-tags/

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Theodore]

Thanks for the assistance so far.

I’m still struggling to create the homepage that’ll look exactly like the “Target” demo found in the site library.

Basically, how can I add the first image on the homepage together with the CTA button on the image as you can see here: https://theodorematt.tinytake.com/media/9def31

Also on the same page, how can I create the next element/section after the image, and also add the 3 CTA buttons you can find on the screenshot above?

Finally, how can I also create this type of header: https://theodorematt.tinytake.com/media/9def40

And even the CTA ribbon on the header?

I just like the demo.

[Leo]

For the header with button, have you checked out this example?
https://docs.generatepress.com/article/page-hero-examples/#example-1

This is the HTML for the 3 buttons section:

<h2 class="home-slogan">You'll keep working harder. We'll keep building the gear.</h2>
<p><a class="button ghost" href="https://gpsites.co/target/product-category/clothing/">CLOTHING</a>
<a class="button ghost" href="https://gpsites.co/target/product-category/accessories/">ACCESSORIES</a>
<a class="button ghost" href="https://gpsites.co/target/product-category/music/">MUSIC</a></p>

As for the header, upload a navigation logo and set the navigation alignment to center (this should’ve been imported though):
https://docs.generatepress.com/article/navigation-logo/
https://docs.generatepress.com/article/navigation-layout/#navigation-alignment

Please do take a look at the links I provided. They should really help.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Theodore]

Thanks, I thought the link is only for building the post page.

If I want to build my homepage, can I also use that on the Sections editor?

Meanwhile, I’ve created the post pages but I found that part of the post titles are being blocked out on mobile from the header as you can see here: http://prntscr.com/nav8az

[Theodore]

Ok, I think I’ve been able to figure some of these things out now, you can see it here: https://spraygadgets.com/.

One more thing please, how can I change the button colors on the homepage?

Also, can I add an email optin form on the homepage? If yes, is there any guide to that?

Thanks.

[Leo]

Button colors are in the customizer:
https://docs.generatepress.com/article/colors-overview/

You will need a plugin like Ninja Forms, Contact Forms or Happy Forms for the e-mail opt-in form, then just add it using another section.

Lots of guides on Google for setting up contact forms as they aren’t theme specific.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Theodore]

Hello,

Please, this will be my last question here, I promise.

You guys have really been so helpful, and I sincerely appreciate that. I seem to have gotten everything else sorted out, but one thing is still giving me a problem.

On the 2 elements I created, one for the blog page, and one for the “single posts” section, the background image is not working properly.

On the “blog page”, I wanted to upload a custom image as the background that will be covered with a black color overlay, but it’s not working. Instead, it’s just showing the black background color I selected for the overlay.

And on the “single posts” page, I wanted the featured image on each of the blog posts to always be the background image, on a black color overlay, but it’s still not working. I had to just upload a custom image instead, and the background overlay is still not working (I’ll really like the featured images to be showing).

Finally, on the homepage, the background overlay is also not working.

And finally, how do I add a favicon?

Please, how can I get this resolved?

Thanks.

[Leo]

Can you try clearing then disabling WP Super cache?

All the issues above could be just caching issues.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts