Layout Mimic – Webers Testseite

On this page i use the grid row element to mimic a page which has content and sidebar.
OH – nice to have the sidebar in the middle? or on the right side or left side on one page.
The grid row is a fine thing – because you are able to nest column elements.

To have the same outlook on grid-row like on a 1/1 container i decided to have a grid-row not full-width.
You can set that via css only – but the problem then would be what color the left and right part of a non-fullwidth grid row has!

So a little jQuery to have a surrounding container on the element with the settings of a color-section: full-width, main-color background etc. – see below

The grid-row in that element will get the settings of the color-section container: max-width, margins and paddings.

// this is the class that goes to grid-row element :  grid-notfull

function grid_layout_notfull(){
?>
<script>
(function($){
    $('.av-layout-grid-container.grid-notfull' ).wrap( '<div class="main_color notfullsize color1"></div>');
    $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
    $('.grid-notfull').css({"max-width": "1310px", "margin": "0 auto" , "padding": "0 50px"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');

// the value of 1310px is that standard width of max-width container. if you got different settings - you had to adjust this.

First Grid-row layout.

Second Grid-row layout.

code for sticky settings

The styling code

/*** code with page-id to not set it globaly on my webers-testseite.de ***/

@media only screen and (min-width:768px) {

	.responsive body#top.page-id-35467 {
	    overflow-x: visible;
	}

	.page-id-35467 #wrap_all {
	    overflow: visible;
	}


	.av-layout-grid-container.sticky-grid {
	    display: flex !important;
		justify-content: space-around;
		align-items: flex-start;
	}


	.av-layout-grid-container .sticky-element {
	    position: -webkit-sticky !important;
	    position: sticky !important;
	    top: 120px;
	    align-self: flex-start;
	    min-width: 30%;
	}
}

Some lorem Ipsum to have content here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut faucibus pulvinar elementum integer enim neque volutpat. Mattis nunc sed blandit libero volutpat. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Feugiat sed lectus vestibulum mattis ullamcorper. Amet nisl suscipit adipiscing bibendum est ultricies. Volutpat sed cras ornare arcu dui. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Vitae turpis massa sed elementum tempus egestas sed sed risus. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Sed ullamcorper morbi tincidunt ornare massa. Faucibus scelerisque eleifend donec pretium. Tincidunt vitae semper quis lectus nulla at volutpat diam. Ipsum dolor sit amet consectetur adipiscing. Molestie nunc non blandit massa enim nec dui nunc. Quisque sagittis purus sit amet. Risus ultricies tristique nulla aliquet enim tortor at. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Risus nullam eget felis eget nunc lobortis mattis aliquam.

Sodales ut eu sem integer vitae justo eget magna. Facilisis leo vel fringilla est ullamcorper. Justo laoreet sit amet cursus sit. Ut tristique et egestas quis ipsum suspendisse. Amet consectetur adipiscing elit ut aliquam. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Nulla pharetra diam sit amet nisl. Ut morbi tincidunt augue interdum velit euismod. Eu mi bibendum neque egestas congue quisque. Integer quis auctor elit sed. At tellus at urna condimentum mattis pellentesque id nibh tortor. Dignissim suspendisse in est ante in nibh mauris cursus mattis. Pharetra diam sit amet nisl suscipit adipiscing bibendum est. Augue eget arcu dictum varius duis. Ut sem nulla pharetra diam sit amet nisl.

Widget Area

But only „Pseudo Sidebar“
it is a Widget Everywhere ALB Element – set in a 1/4 Grid Row

click me

I am Text – and blind

Far behind, behind the mountains of words, far from the countries vowels and consonants live the blind texts. Secluded they live in Lettercity on the coast of semantics, a large language ocean. A small stream called „Oxford Advanced Learner’s Dictionary of Current English“ flows through their village and provides them with the necessary rules. It’s a paradisiacal country where roasted sentences fly into your mouth. Not even the almighty punctuation dominates the blind texts – an almost unorthographic life. One day, however, a small line of blind text, her name was Lorem Ipsum, decided to go out into the wide grammar. The great Oxmox advised her against it, as it was swarming with evil commas, wild question marks and sneaky semicoli, but the blind text could not be misled.

He grabbed his seven capitals, put his initial in his belt and set off. When it had climbed the first hills of the Italic Mountains, it took a last look back at the skyline of its hometown of Lettercity, the headline of Alphabetvillage and the subline of its own street, the Linealley. A rhetorical question crossed his cheek in nostalgia, then it continued on its way.

On the way, it hit a copy. The copy warned the blind text where it came from, it would have been rewritten umpteen times and all that would remain of its origin would be the word „and“ and the blind text should turn back and return to its own safe country. But all the good talk didn’t convince him and so it didn’t take long until some insidious copywriters ambushed him, got him drunk with lunge and slogan and then dragged him to their agency, where they abused it again and again for their projects. And if it hasn’t been rewritten, you’re still using it. Far behind, behind the mountains of words, far from the countries vowels and consonants live the blind texts. Live in seclusion.

Live in seclusion.