[Resolved] Adding"Opt-In Form" and "Bar with logos" below Page header (Hero)

[Katharina]

Hi I need some help,
This is a screenshot from another website I have https://paste.pics/5a74bf28b52de923bbfa3cf780ebe631
I would like to recreate something close to it.

1) How can I add a Opt-In Form (Mail-Chimp) below the Header (properly using the Hook function) I tried a few things but nothing worked. I did run out of Ideas.

2) I also would like to have a Bar with Logos of companies I work with below the Optin form

Can I create it without using a page builder or what would be the best option for me?

Thanks
Kati

GP Premium 1.7.7

[David]

Hi there,

1. Add this to the Hook Element with the correct shortcode for your optin widget:

<div class="custom-container">
    <div class="grid-container">
        [your-optin-shorcode]
    </div>
</div>

Select the after_header hook.
Check the execute shortcodes box.
Set the Priority to 15
Set your display rules.

2. If your comfortable with some HTML you could try this. Create another hook the same as above. Won’t need to check shortcode and up the priority to 20. Then some HTML for the content:

<div class="custom-container">
    <div class="grid-container flex-grid">
        <img src="full-url-to-logo" alt="logo-alt-text" height="60" width="60">
        <img src="full-url-to-logo" alt="logo-alt-text" height="60" width="60">
        <img src="full-url-to-logo" alt="logo-alt-text" height="60" width="60">
        <img src="full-url-to-logo" alt="logo-alt-text" height="60" width="60">
    </div>
</div>

Then this CSS:

.custom-container {
    background-color: #ddd; /* change color of container */
}

@media (min-width: 768px) {
    .flex-grid {
        display: flex;
        justify-content: space-between;
    }
}

Let me know.

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

[Katharina]

Thanks I will try it. And let you know how it worked.

[David]

You’re welcome

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

[Katharina]

I did try the bar below the header. And it works but the logos are stretched even after they set to height=”50″ width=”50″

After I set the display: flex; for the container to display: 100px; It went back to normal size but the logos are still different sizes and I also added a text before the logos that is not showing.

How can I center the logos and spread them apart little bit.

Thanks

[Katharina]

After I added the Optin form below the Hero, the Bar with the logos lost the container etc.

I think something is still not right.

[David]

So, the custom-optin-container is missing a closing </div> – below you can see the last line i have commented, that is missing so just need to add that in:

<div class="custom-optin-container">
    <div class="grid-container">
        <h6>kostenfreier</h6>
        <h2>MISSIONSBRIEF</h2>
        <a style="text-align: center;" class="button basic" href="https://donorbox.org/ak-missionfamily">Spenden</a>
    </div>
</div> <!-- missing closing DIV -->

Then replace your CSS with this:

.custom-optin-container {
    background-color: #565656; /* change color of container */
	color: #ffffff;
}
.custom-container {
    background-color: #3f3f3f; /* change color of container */
    color: #ffffff;
}
.custom-optin-container, .custom-container {
    padding: 30px 0; /* Adjust left hand units for top and bottom padding */
}

@media (min-width: 768px) {
    .flex-grid {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .custom-container .grid-container h2 {
        margin-bottom: 0;
    }
}

.custom-container .grid-container:before {
    display: none;
}

.custom-container .grid-container img {
    height: 50px;
}

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

[Grant]

Hello,

Adding to this thread as I would like to do something similar but I just want to add a simple opt-in bar with social media icons (Facebook, Twitter, email and importantly, WhatsApp).

Basically, just a blue bar at the bottom of the screen that scrolls as the user does and links to social media accounts/ another URL when the user clicks icons.

I gather I could use some of the above code but I would appreciate it if you could offer me something more specific.

Thanks,

Grant

[David]

Hi Grant

would you mind raising a new topic, we can then provide you with 100% focus.

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

[Grant]

Sure, will do.

[David]

Thanks

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

[Katharina]

Thanks David for your support, It’s looking like I want it.

I want to add another bar only on my homepage:
It’ similar to my Bar with the logos https://paste.pics/4734f0d473c594de1b66bf6ab498a8fb

Can I keep the CSS for the logo bar or do I need to change it?
-I would like to have 3 sections that are divided through different colors or similar.
-It would be good if it would be justified over the whole width.
-I want to add 3 success points with maybe an icon next to them.

Thanks again for your help

[David]

Any chance you can send another temporary login. I can then tweak the current CSS so it can be used as a ‘framework’ for you to do both things with it.

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

[Katharina]

Thanks David I extended your link for another month, but i will also send the link again through the Account Issue Form.

[Tom]

Hi there,

I assume we’re targeting the custom-success-container?

If so, you’ll first want to remove the grid-container class for that container in the Hook.

Then add this CSS:

.custom-success-container .flex-grid > * {
    width: 33.3333%;
    text-align: center;
    margin: 0;
    padding: 40px;
}

.custom-success-container .flex-grid > *:nth-child(1) {
    background: #222;
}

.custom-success-container .flex-grid > *:nth-child(2) {
    background: #000;
}

.custom-success-container .flex-grid > *:nth-child(3) {
    background: #222;
}

@media (max-width: 768px) {
    .custom-success-container .flex-grid > * {
        width: 100%;
    }
}

Then you can adjust the 3 background colors as needed.

The icons should be able to be added directly in the hook next to the text of each item.

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

[Author]

Posts