Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Adding Global Banner

  • dillonloomis13

    Thank you! And sorry that you’re having to help me out instead of their support. GenerateSupport does have the best support. But we’re getting closer! I added that CSS, reduced the padding, and edited the headline’s font.

    How can I move the “Claim Your Free SEO Keyword Research Cheat Sheet!” more toward the middle?

  • How can I move the “Claim Your Free SEO Keyword Research Cheat Sheet!” more toward the middle?

    1. Add this CSS to remove the form’s margin:

    div#wpforms-1865 {
        margin-left: 0;
        margin-right: 0;
    }

    2. select the root container, and set justify-content to center instead of space-between.

  • dillonloomis13

    Great! This looks a lot better. Two more things, I noticed that my form at the bottom is all messed up now. Is that because of the CSS we added? https://imgur.com/a/i2cxVXj.

    I just WPForms and the fields are still set to medium and it looks correct when editing the home page.

    And two, is there a way to add space between the “Get It” CTA and the last email field so they aren’t touching?

  • I assume it’s because of the CSS, the form is the same one as the one in the topbar?

    If so, add a CSS class to the root container of the topbar, eg. topbar.
    Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

    Then add .topbar to all form CSS like this:

    .topbar div#wpforms-1865 {
        margin-left: 0;
        margin-right: 0;
    }
    .topbar .wpforms-container .wpforms-field {
        display: flex;
        align-items: center;
    }
    .topbar.wpforms-container .wpforms-field input {
        flex-grow: 1;
        max-width: unset !important;
    }
    .topbar .wpforms-container label.wpforms-field-label {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .topbar div.wpforms-container-full:not(:empty) {
        margin-block: 0;
    }
    .topbar form#wpforms-form-1865 {
        display: flex;
    }
    
    .topbar div#wpforms-1865-field_0-container, div#wpforms-1865-field_1-container {
        padding-block: 0;
    }
    
    .topbar .wpforms-submit-container {
        margin-top: 0 !important;
    }
  • dillonloomis13

    I have two different forms. One for my banner, and the one that looks all weird is the “Contact Us!” one.

    Banner – [wpforms id=”1865″]
    Contact Us! – [wpforms id=”1402″]

    I tried adding that code above in the Additional CSS field to my banner element but that didn’t seem to do anything: https://imgur.com/a/qN9DR1Y

  • You forgot how to add CSS? https://generate.support/topic/adding-global-banner/#post-113879

    Add CSS class topbar to that field in you screenshot https://imgur.com/a/qN9DR1Y

    and add CSS to customizer > additional CSS.

  • dillonloomis13

    Okay so I added the CSS below to customizer > additional CSS. And then in the element, in the ADDITIONAL CSS CLASS(ES) field I added: topbar but the “Get It!” CTA still seems to be too close.

    Another solutions or did I input it incorrectly?

    .topbar div#wpforms-1865 {
    margin-left: 0;
    margin-right: 0;
    }
    .topbar .wpforms-container .wpforms-field {
    display: flex;
    align-items: center;
    }
    .topbar.wpforms-container .wpforms-field input {
    flex-grow: 1;
    max-width: unset !important;
    }
    .topbar .wpforms-container label.wpforms-field-label {
    margin-bottom: 0;
    flex-shrink: 0;
    }

    .topbar div.wpforms-container-full:not(:empty) {
    margin-block: 0;
    }
    .topbar form#wpforms-form-1865 {
    display: flex;
    }

    .topbar div#wpforms-1865-field_0-container, div#wpforms-1865-field_1-container {
    padding-block: 0;
    }

    .topbar .wpforms-submit-container {
    margin-top: 0 !important;
    }

  • Yes,it’s correctly implanted.

    The code moves the get it button to the same line as the name/email, so the height can be even smaller, and it won’t affect your other WP forms as we added .topbar to the CSS.

    To add spacing between the email input and get it button, try changing this CSS:

    .topbar form#wpforms-form-1865 {
        display: flex;
    }

    to this:

    .topbar form#wpforms-form-1865 {
        display: flex;
        column-gap: 20px;
    }
  • dillonloomis13

    Great, that worked! Thank you so much! I think I’m happy with how things look now! thank you again so much.

  • Awesome! Glad to hear that 🙂

Viewing 10 posts - 17 through 26 (of 26 total)
  • You must be logged in to reply to this topic.