[Support request] How to create the through-line background effect from the GP Home Page

[Lisa]

Hi! On https://generatepress.com/ you have dashed lines that run through the background of your home page.
How do we create this effect?

[David]

Hi there,

it is custom developed specifically for the GP Site, so i can provide how we add those lines, but it may not work with your layout:

1. Add this CSS to your site:

.fixed-background {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index:1
}

.fixed-background .gb-inside-container {
    height:100%
}

.grid-background > .gb-inside-container {
    z-index:1
}

.gb-container:not(.grid-background) > .gb-inside-container, body:not(.full-width-content) .site-main {
    z-index: 2;
    position:relative
}

.grid-background:after, .grid-background:before {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width:calc(1200px / 4)
}

.grid-background:after {
    border-right:1px dashed rgba(111, 111, 111, .15)
}

.grid-background:before, .grid-background > .gb-inside-container {
    border-left: 1px dashed rgba(111, 111, 111, .15);
    border-right:1px dashed rgba(111, 111, 111, .15)
}

.grid-background:before {
    right:50%
}

.grid-background:after {
    left:50%
}

@media (max-width: 1000px) {
    .grid-background:after, .grid-background:before {
        width:25%
    }
}

2. Create a new Hook Element in Appearance > Elements.
2.1 Add this HTML to the text area:

<div class="fixed-background grid-background">
	<div class="gb-inside-container grid-container"></div>
</div>

2.2 Set the Hook to generate_before_header
2.3 Set the Priority to 1
2.4 Set the Display rules > Location to the places you want it eg. Entire Site

[Author]

Posts