- This topic has 13 replies, 2 voices, and was last updated 4 years, 1 month ago by David.
February 23, 2019 at 11:11 pm #819392Chris
Hi, I’m new to WordPress and GeneratePress. I’m trying to create a hero section where I can add a contact form and some text. I’ve researched the videos and forum posts, but I’m obviously missing something. I created the Header Element (I think). I’m just trying to do this for my Front Page. This is the old page with the hero section I’m trying to recreate.
GP Premium 1.7.8February 24, 2019 at 4:43 am #819578DavidStaffCustomer Support
What Display Rules did you set on the Header Element?
Adding CSS: http://docs.generatepress.com/article/adding-css/February 24, 2019 at 6:55 am #819753Chris
Display Rules are Front Page and All UsersFebruary 24, 2019 at 7:10 am #819766DavidStaffCustomer Support
Can you send me a screenshot of your settings in the Header Element
Adding CSS: http://docs.generatepress.com/article/adding-css/February 24, 2019 at 9:13 am #819878Chris
Sure, but let me clarify or ask this first. Do I need a hero section to replicate the screenshot I sent or can I place a form and text box overlaying a feature image without a hero image section?February 24, 2019 at 10:36 am #819946ChrisFebruary 24, 2019 at 2:26 pm #820078DavidStaffCustomer Support
So the Header Element has to contain something in the Hero content for it to display.
If you only wanted the image to be displayed then you can add a HTML Comment eg.:
<!-- Featured Image -->or
<!-- anything you like as a comment --!>
Header Elements are one of the simplest ways of putting content over an image. You can add HTML and Shortcodes ( e.g for your Form ) within the hero content. And of course set a background.
By default the Header Element sits directly below the Site Header so we may need to add a little CSS to create the gap between the two.
Adding CSS: http://docs.generatepress.com/article/adding-css/February 25, 2019 at 10:23 am #821172Chris
Thanks David. I added Featured Image comment and I can see a thin band of the image. I understand your comment about using CSS to create the gap. Would the HTML and shortcodes also be the answer to expand the image/hero section area?February 25, 2019 at 10:26 am #821174DavidStaffCustomer Support
The header element will expand to size of the content plus any padding you have added in its settings.
To note: if it were just adding a featured image background you would size it by adding more padding. In this case i would a % padding that matches the apsect ratio of the image.
Adding CSS: http://docs.generatepress.com/article/adding-css/February 25, 2019 at 10:28 am #821176Chris
I found that by increasing the padding in the page hero section that resolve the image appearing as a thin band and now I can see the full image as I increased the padding.February 25, 2019 at 10:33 am #821183DavidStaffCustomer Support
You may find some of these examples useful with the various ways of adding content and how that and the padding effects its size.
Adding CSS: http://docs.generatepress.com/article/adding-css/February 25, 2019 at 11:00 am #821229Chris
Thanks. Getting there. Does the CSS also go where I’m adding my html or does that doe in the Simple CSS or Additional CSS section?February 25, 2019 at 12:35 pm #821324Chris
Thanks David. That last link was helpful I was able to get what I wanted in there. Thanks!February 25, 2019 at 12:37 pm #821327DavidStaffCustomer Support
Awesome – glad to hear that!
Adding CSS: http://docs.generatepress.com/article/adding-css/
- You must be logged in to reply to this topic.