Adding Image in Home page

[NaveenKumar Namachivayam]

How to add a background image with fields like Name and Email to collect email address in home page.

Like in this example http://demo.generatepress.com/

Also, I would like to display recent and popular posts just below the iamge. Is it possible? Thanks!

[Tom]

Hi there,

Are you talking about the top area with the laptop image? If so, I used the Page Header add-on for that.

The actual HTML (collecting emails etc..) is up to you and can be added into the Content area.

For displaying posts, this plugin might help: https://wordpress.org/plugins/wp-show-posts/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[NaveenKumar Namachivayam]

Thanks Tom. Any references/plugins to add the fields in Page Header?

[Tom]

Usually the service you use for newsletters (Mail Chimp, Constant Contact etc..) give you the HTML for their forms, which you can then add into the content area of the Page Header.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[NaveenKumar Namachivayam]

Thanks Tom 🙂

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[NaveenKumar Namachivayam]

Tom,

I added the HTML code on my video page header. But it looks different in mobile and tablet. How do i make it responsive.

Please help me out 🙂

Thanks!

[Tom]

You would have to use CSS media queries. If you’re getting the HTML from a place like Mail Chimp or Constant Contact, they might have a responsive version of the form.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[NaveenKumar Namachivayam]

Thanks Tom. I am using MailRelay. They do not have CSS-based forms. Any sample code I can get. As of now, my site is looking good only in browsers. Thanks!

My site: http://www.QAInsights.com

[Tom]

The form actually is responsive – I’m not seeing any difference between the desktop version and the mobile version?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[NaveenKumar Namachivayam]

Yes. But in iPad and iPhone, the video is not loading and text box and submit fields are overlapping the Latest Articles content.

[Tom]

Background videos won’t load on mobile devices – this is a limitation of the actual mobile devices in order to save you data.

If you set an image in the Image tab, it will use that as a backup when the video can’t load.

I’m not seeing any overlap on my phone.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[NaveenKumar Namachivayam]

Thanks Tom for the confirmation. Let me add an image. Thanks!

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Daniel]

When using an image as fallback, the image always loads first until the video has loaded.
Is there any way around that? Seems a bit clunky to me.

[Author]

Posts