Background ad

Hi Martin,

You could use generate_before_header hokk for all elements. You could either use hook element or block element.
https://docs.generatepress.com/article/hooks-element-overview/
https://docs.generatepress.com/article/block-element-overview/

Once the elements are added, we can help with some CSS to position the left/right green elements.

Let me know :)

Hello,

Thank you for your message.

I have successfully created a hook for Element 1, which is shown on this link, for example:
https://dlazbazamkova.cz/prispevek-no2/

However, I do not know how to deal with element 2. I have created a hook "generate_before_header", but I do not know how to place the image in the background of the page. The image looks like this:
https://dlazbazamkova.cz/wp-content/uploads/2021/05/Branding_01.jpg

I need to implement these parameters:

max-width: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;

How should I proceed, please?

Thank you in advance for your reply.
Regards,
Martin Steidl

Hi there,

thats actually a lot more complicated to do and maintain responsiveness. You mention the adverts will be clickable - is this the the entire container or will the advert contain a clickable button and therefore require HTML?

Hello,

the background ad will not require HTML. It will be an image, you can click anywhere. The main code will be inserted into the hook through another ADinserter plugin. This plugin will enter the code and specify the rules for displaying the ad, so it will only appear on desktop computers. This code is then inserted into the hook using a code that looks like this:
[adinserter block = "1"]
I already have this solution applied for advertising above the page header and everything works.

Thank you and have a nice day.
Regards,
Martin Steidl

You would need to hook in some HTML to wrap you advert codes.

1. Use the after_header hook.
2. Add this HTML

<div class="advert-parent">
	<div class="advert-container lhs">Left hand side advert</div>
	<div class="advert-filler"><!-- advert spacer --></div>
	<div class="advert-container rhs">Right hand side advert</div>
</div>

Add your codes to the left and right hand side container divs.

3. Then some CSS to layout and remove the containers on smaller screens:

.advert-parent {
	display: flex;
	position: fixed;
	top: 100px; /* Adjust for height of header */
	left: 0;
	right: 0;
}
.advert-filler {
	flex: 1 0 1200px; /* container width */
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}

/* remove containers on smaller screens - adjust max-width */

@media(max-width: 1200px) {
	.advert-parent {
		display: none;
	}
}

Hello,

thank you for answer. I pasted the code into the page, and now my ad is running. However, there are two problems.

1. Links placed in the main area of the page above the bottom edge of the ad are broken (for explanation chechk this https://dlazbazamkova.cz/wp-content/uploads/2021/05/Problem_01.png). For example, you can try here: https://dlazbazamkova.cz/
2. When I resize the webpage, the background images move away from the body of the page. I need the size to always be the same as body of the page and the image to be attached to the upper right corner of the left side and the upper left corner of the right side. The advertisement on the sides of the page and above the header forms a compact unit, like this: https://stavimbydlim.cz/stavba-kominu-ohlaseni-stavby-kominu-casti-kominu-a-ucinna-vyska-kominu/

Is it possible to make these changes?
Thank you and have a nice day.
Regards,
Martin Steidl

Hi Marin,

For issue one, try this CSS:

#site-navigation, #page {
    position: relative;
}

For issue two, try this CSS:

.advert-container.rhs {
    position: fixed;
    top: 100px;
    right: 0;
    max-width: -webkit-calc((100% - 1200px)/2);
    min-width: 300px;
}
.advert-container.lhs {
    position: fixed;
    top: 100px;
    left: 0;
    max-width: -webkit-calc((100% - 1200px)/2);
    min-width: 300px;
}

Let me know :)

Hello,

thank you for answer.

Issue one - solved
Issue two - Unfortunately, this setting still doesn't work. Check this: https://dlazbazamkova.cz/prvni-prespevek/

But I found a solution to set this background. I set this image (https://dlazbazamkova.cz/wp-content/uploads/2021/05/004.jpg) in Customize> Background Images> Body. Picture position - center top. Automatic size (full), fixed.

Is there other way to insert such an image in the background with the link? I need to achieve the result: https://dlazbazamkova.cz/prispevek-no2/

Thank you and have a nice day.
Regards,
Martin Steidl

Hi there,

It's not possible to link a background image, unfortunately. It needs to be a static HTML element.

Unfortunately, this may be something you need to post over on stackoverflow.com, as it's quite complicated and not theme-related. They should be able to point you in the right direction.

Thanks!

Hi,

That's bad news. :(

How do I insert a background link using static HTML? For example, on other pages, I use this code to insert a link in the background of the page on the left side:

<a href="" target="blank" rel="noopener"> </a>

Is there an ID in the code that I can use for this function?

What is the name of the class / id CSS for background editing that can be processed in Custumize> Backgroud images> Body?
Resp.

Thank you and have a nice day.
Regards,
Martin Steidl

The method David shared about is likely the best way to insert an element/link as a background: https://generatepress.com/forums/topic/background-ad/#post-1773785

However, it's a complex problem with a complex solution that has a lot of variables, which is why it may be worth hiring a developer to get it just right. Unfortunately, we don't have the resources to fully test and build custom solutions like this in our support forum.

Hi Martin,

it looks like you have got the background image in place :)
Looking back at the code i provided above eg.

<div class="advert-parent">
	<div class="advert-container lhs">Left hand side advert</div>
	<div class="advert-filler"><!-- advert spacer --></div>
	<div class="advert-container rhs">Right hand side advert</div>
</div>

Then you can convert those to links like so:

<div class="advert-parent">
	<a class="advert-container lhs" href="your_link_url"><!-- advert link --></a>
	<div class="advert-filler"><!-- advert spacer --></div>
	<a class="advert-container rhs" href="your_link_url"><!-- advert link --></a>
</div>

Then the CSS would be something like this:

.advert-parent {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
        bottom: 0;
}
.advert-filler {
	flex: 1 0 1200px; /* container width */
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}
.advert-container {
       display: block;
       height: 100%;
       width: 100%;
}

Hi David,

thank you for your response. Unfortunately, it still doesn't work. The link is displayed incorrectly. Overlaps the main content of the page. Check this: https://dlazbazamkova.cz/prvni-prespevek/

Is there other option?

Thank you and have a nice day.
Regards,
Martin Steidl

Made some adjustments:

1. use this HTML for in the Hook:

<div class="advert-parent">
	<a class="advert-container lhs" href="your_link_url"><!-- advert link --></a>
	<div class="advert-filler"><!-- advert spacer --></div>
	<a class="advert-container rhs" href="your_link_url"><!-- advert link --></a>
</div>

DO NOT add any images to the HTML, as you already have your background image - this will just create the Links.

2. Use this CSS:

.advert-parent {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

/* adjust for admin bar */
.admin-bar .advert-parent {
    top: 60px;
}

.advert-filler {
    flex: 1 0 1200px;
    /* container width */
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}

.advert-container {
    display: block;
    height: 100%;
    width: 100%;
    pointer-events: auto;
}

@media(max-width: 1200px) {
    .advert-parent {
        display: none;
    }
}