[Resolved] Banner in the grey area

Home Forums Support Banner in the grey area

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1275171
    Luke

    Would it be possible to place a banner in the grey area either on the right or on the left or on both sides of the page? That would have to be a banner that would be visible all the time as you scroll down the page just like the Brain Evolution System banner in the right widget. Is it easy to do it? If it was possible to attach a screenshot to this message I would do it.
    And if banner is not possible then maybe it would be possible to just write something that would be clickable and put it either on the right or on the left?

    #1275489
    David
    Staff
    Customer Support

    Hi there,

    you could do something like this:

    1. Create a new Hook Element:
    https://docs.generatepress.com/article/hooks-element-overview/

    1.1 Add this to the hook content:

    <div class="banner-surround">
    	<div class="banner left">
    		<!-- Add your left banner content here -->
    	</div>
    	<span class="banner-spacer"><!--spacer--></span>
    	<div class="banner right">
    		<!-- Add your right banner content here -->
    	</div>
    </div>

    1.2 Select the after_header hook.
    1.3 Set your Display Rules

    2. Add this CSS:

    /* Hide Banner on small devices */
    .banner-surround {
        display: none;
    }
    
    /* Adjust @media for when banner should display */
    
    @media (min-width: 1200px) {
        .banner-surround {
            display: flex;
            position: sticky;
            position: -webkit-sticky;
            top: 60px; /* Set position from top */
        }
    
        .banner-surround .banner-spacer {
            flex: 0 0 1000px; /* 1000px = width of container */
        }
    
        .banner-surround .banner {
            flex: 1 1 auto;
        }
    }
    #1275506
    Luke

    First I’d like to ask about the hook content code. Where it says “Add your left banner content here”, I should replace this line with a banner URL, right?

    And the CSS code is to make the banner sticky?

    #1275612
    Leo
    Staff
    Customer Support

    You would need to replace <!-- Add your left banner content here --> with the content of your banner.

    If you want to insert a link then you need to use the <a> tag:
    https://www.w3schools.com/tags/tag_a.asp

    The CSS is to split the area in half and make it sticky.

    #1276331
    Luke

    Replace “Add your left banner content here” with the content of my banner?
    Something like this:

    <a href="https://mywebsite.com/"><img src="https://mywebsite.com/wp-content/uploads/2020/05/Best-Music.png" border="0" /></a>

    I don’t know if this is the right code. I think I omitted something?

    #1276591
    David
    Staff
    Customer Support

    That HTML looks correct – if you want to add it to your hook and set the Display Rules on a test page i can take look.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.