[Resolved] unable to create page header in home page

Home Forums Support unable to create page header in home page

  • This topic has 16 replies, 3 voices, and was last updated 1 year ago by Leo.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1000491
    Janani

    Hi,

    I am unsuccessfully trying to create a page header for the past 2 days. My background image is 1920 px, and I am trying to fit as a background image in the page header.
    My settings are: container – full width, inner container – full width, horizontal alignment – center, background image: custom image, background position – left top, padding: all: 400px
    display rules: page – home page
    site header: no merge (logo uploaded)

    1. Why is my page header showing an incomplete picture despite all these settings?
    2. why are my wordings also not appearing in the page header?
    3. why am I not able to choose center center under background position?
    4. Is my background image too large for the settings? Should I scale it down? What is the correct size I should scale it to?
    5. After making the changes in elements, I select ‘update’ to update the settings. Is there anything else I should select to update the settings?
    6. I remember making some changes to layout, like padding, etc. Is that the reason why the page header is not showing correctly?
    7. Last of all, I am a newbie to wordpress website building. I would like to know the difference between elements, layout and sections. I understand that all three can be used to change the appearance of the website. when should i use what?

    #1000499
    Leo
    Staff
    Customer Support

    Hi there,

    Let’s make sure the header element actually shows up on the home page first as I currently don’t see one.

    Instead of using “page – home page” for display rules, can you try Front Page first?
    https://www.screencast.com/t/e4Rjf98eBi

    Let me know 🙂

    #1000543
    Janani

    Hi

    Yes, thank you. Finally, the page header is appearing after I changed to front page in the display rules.

    1. But only if I give 400px, the entire image appears on screen. And it is too large. If I reduce it to 200 px, only part of the image appears. Should I change something in the settings or should I scale down the image size. What should be the ideal image size if I want to see the entire image in one screen?
    2. How do I change the words on the page header? I do not know HTML or coding. Is there no way, I can visually select the font and size?

    #1000660
    David
    Staff
    Customer Support

    Hi there,

    1. So images in the Header Element are set as a CSS background-image , and there default size is background-size: cover; this ensures the image fills the space available which requires you to give the element some height by adding top and bottom padding.

    To keep the image responsive use % top and bottom padding. To calculate the % padding you need, divide the original image height (907px) by its width (1370px) to get its ratio ie. 907 / 1370 = 0.66 * 100 = 66%. Then split this between top (33%) and bottom (33%).

    Content such as the text within your Header Element will also add height, so you will need to reduce those % down a little. If you want a narrower height then you will need to use a wider aspect ratio image.

    2. In your Header Element you can wrap your text in a HTML Tag, so to make it your H1 Heading you can do:

    <h1>My text is now displayed as a H1 font which i can style in the Customizer</h1>

    If you want to keep the H1 tag but have it styled different to the H1 in the content then add this CSS:

    .page-hero h1 {
        font-size: 48px;
        font-weight: bold;
    }

    Note by increasing the font size will increase the height of the content so you will need to adjust (Reduce) the padding in point 1. I would also suggest you reduce your left and right padding as 400px is going to cause problems on smaller screens.

    3. Center Center is an option for the background image it is the one from last in list. With step 1 above you shouldn’t need this.

    4.As noted in Point 1

    5.Update – nope that updates the content exactly the same as when editing a page or post.

    6. Header Elements occupy there own space, so the only settings that effect it are those within the Header Element itself ( other than by adding CSS )

    7. Elements in this case is the name GP gives to the Elements Module. They all have Dispaly Rules so you can set them to display dynamically. Currently there are:

    a. Header Element – used for adding what is sometimes known as a Page Hero or Above the Fold content. They are always positioned directly below or merged with the Site Header.

    Best thing is to use them Dynamically eg. create Header Element and set its Display Rules to All Pages. You can then set the background image as featured image and use the {{template-tags}} to display the current post title or meta data. See this example:

    https://docs.generatepress.com/article/page-hero-examples/#example-2

    It will pull in the Title, Date and Author of the current post.

    b. Hooks
    These allow you to insert content / code into different parts of the theme. So for adding a Google Analytics tracking script to the site, or inserting a shortcode from another plugin or anything you need. These are super powerful. You can see the different places of the main hooks here:

    https://docs.generatepress.com/article/hooks-visual-guide/

    c. Layout Element
    This is a way of overriding the Customizer settings for different pages/posts/archives across your site. You can also use the Disable Elements and Layout Meta box in the post editor to do this on a post by post basis. Style pecking order:

    Customizer is Global Site Styling
    Layout Element narrow to wider scope styling that overrides Customizer
    Layout/Disable Elements Meta Box in post editor for that specific page and overrides both of the above.

    Sections are used for Content editing only. All they are doing is creating separate containers around the normal classic editor. If your new to WordPress i would suggest you look at using the Block Editor instead of Sections.

    #1001411
    Janani

    Hi

    Thank you very much for your detailed response. Really appreciate your efforts.

    I now sort of understand the difference between elements, customiser and sections.

    Sections are used to add content with some background images / colours, etc.
    Element is used to create a header or a specific layout for different posts / pages
    And customizer is used to further customize the content, fonts, colours, etc. But you cannot add any content here. This is just to further adjust and fine-tune the final output.

    Please correct if I am wrong in my understanding.

    Coming back to the header, I have set the top and bottom padding in % as suggested by you. I also reduced the right and left padding to 100 px, but the image still does not appear in the full screen. Currently, my image is at 1920*1272 px. Should I rescale it? If yes, to what size?

    Also, how do I adjust the words on the image? I want to have spaces between them or keep them in centre or left or right, and arrange in a paragraph. Do I need to know coding to do this?

    #1001534
    Janani

    Hi, please also let me know if we need coding knowledge to use GP without page builder

    #1001568
    David
    Staff
    Customer Support

    Thats correct

    In the Header Element there is a checkbox for Full Screen ( it only appears when the Site header is merged ).

    You can also set the Horizontal alignment for your content in the header element.

    If you want each ‘sentence’ to appear on a separate line then wrap them in <p></p> tags. e.g

    <p>Line one</p>
    <p>Line two</p>
    <p>Line three</p>

    When it comes to styling content you would either need to know basic HTML / CSS. Or use a Page Builder.

    #1001592
    Janani

    Thank you. Is coding required only for styling the content for page header, or is it required for all other content as well?

    If coding is required for many other functions as well, then I will go in for a page builder, as I do not know even the ABCs of coding.

    #1001596
    David
    Staff
    Customer Support

    There may be some need for CSS on the Header Element depending on what you’re trying to do. HTML can be fairly simple. For example in the Customizer you can set the Typography and color for your body and Headings.

    The body settings apply to your <p></p> tags. Your Headings would use:

    <h1>I am heading 1</h1>
    <h2>I am heading 2</h2>

    So that is what the theme controls.

    If you would sooner have a visual experience then a pagebuilder may be better for you.

    #1001598
    Janani

    Hi

    No, I do not need a visual experience. But it is just that I do not know coding.

    So, if coding is going to be involved a lot, then I would rather go for a page builder.

    As per your reply, coding is required only for content in the page header. Is that right?

    I have avoided page builder till now, as I have heard that it slows down the website. Is that true?

    #1001601
    David
    Staff
    Customer Support

    HTML/CSS is quite a common requirement for any type of content whether it is in a Header Element or your Post Content. The theme provides styling for core HTML elements <p>, <h1>, <h2> …. buttons etc plus any of the theme elements navigation, sidebars, footer.

    When it comes to the content you add in the post editor ( including Header Elements ) you may need a little knowledge of code.

    If you have an example of the design you want to achieve we can help with the code.

    This visual guide provides some Hero examples, and you can see the result from the little code required:

    https://docs.generatepress.com/article/page-hero-examples/

    #1001655
    Janani

    thank you. your support to newbies like me is outstanding!

    Just wondering, if I use a page builder, will the website slow down? Any idea how much slower it would become?

    #1001838
    Leo
    Staff
    Customer Support

    Page builders tend to be a bit heavy on the coding so it will slow your site down a bit.

    Unfortunately no way for us to tell how much it would slow it down as it depends on many factors such as hosting, the quality of other plugins you are using and how many features from the page builder you are using.

    But if you aren’t comfortable with HTML then page builder is the way to go.

    #1002287
    Janani

    Hi,thanks for your reply.

    I shall send you the design that I have in mind in a couple of days.please help me by suggesting how I can implement it on the website. And if a page builder is indeed required.

    #1002535
    Leo
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.