Скачать или смотреть Create Split Screen Website Design using Elementor and FREE Plugins

This is from a challenge by Monica over at the Web Squadron Facebook Group regarding creating a split-screen website layout using only Elementor Free and other Free Plugins on WordPress.

Please do leave your feedback in the comments below


#wordpress #elementor #freewebdesigntutorials
----------
Plugins used:
Elementor Free 3.7.4
Elementor Header & Footer Builder 1.6.13

Theme used:
Hello Theme by Elementor

----------
Here's the Custom CSS used:

.hfeed.site{
min-height: 100vh;
display: -ms-grid;
display: grid;
-ms-grid-rows: auto 1fr auto;
grid-template-rows: auto 1fr auto;
}

.hfeed.site :where(.page-content, [data-elementor-type="wp-page"], [data-elementor-type="wp-post"], .hero-section, .hero-section .elementor-container){
height: 100%;
}

#dd-nav--desktop .hfe-nav-menu .menu-item a{
mix-blend-mode: difference;
color: black;
position: relative;
}
#dd-nav--desktop .hfe-nav-menu .menu-item:hover a::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: 2px solid white;
}

.dd-social, .hero-image{
mix-blend-mode: difference;
color: #ffffff;
}

@media screen and (min-width:768px){
#dd-nav--desktop .hfe-nav-menu .menu-item a{
color: #ffffff;
}

#dd-nav--desktop{
padding-left: 3em;
}
#dd-nav--desktop .hfe-nav-menu .menu-item{
--dd-gap: 1em;
}
#dd-nav--desktop .hfe-nav-menu .menu-item:nth-child(2){
-webkit-margin-end: var(--dd-gap);
margin-inline-end: var(--dd-gap);
}
#dd-nav--desktop .hfe-nav-menu .menu-item:nth-child(3){
-webkit-margin-start: var(--dd-gap);
margin-inline-start: var(--dd-gap);
}
}

@media screen and (max-width: 767px){
body, .hero-section{
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ffffff), color-stop(50%, #191919)) !important;
background-image: -o-linear-gradient(top, #ffffff 50%, #191919 50%) !important;
background-image: linear-gradient(180deg, #ffffff 50%, #191919 50%) !important;
}
.header-section, .footer-section{
background-image: none !important;
}
}

#dd-nav--desktop, #dd-nav--mobile{
-webkit-margin-start: auto;
margin-inline-start: auto;
}

#dd-nav--mobile .hfe-flyout-wrapper .hfe-side{
width: 100%;
}
#dd-nav--mobile .hfe-flyout-content{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#dd-nav--mobile :where(.hfe-flyout-close, .hfe-flyout-close svg){
margin: 1em;
}


Music:
Track: It's Been a While
Free download: https://brokeinsummer.com/its-been-a-...
Artist: https://brokeinsummer.com
Contact: https://brokeinsummer.com/help