Need help recreating 2 layouts through elementor

slvrsteele said:

@xeric I would suggest you to introduce yourself to the community. As almost everyone around is helpful they kinda don't like to deal with strangers.

@medw1311 quoting you here for your awesome skills: do you want an apprentice?

Click to expand...

frizzel said:

The second example is simple to do:

In Elementor, choose the 'Posts' widget and set it to:
Skin: Classic
Columns: 1
Posts per Page: 4 (or whatever number you want)
Image Position: Right
Image Width: 50%

In 'Advanced' give it a css class, e.g. 'alternating'

In Custom CSS add this:

CSS:

.alternating article:nth-child(even){
    flex-direction: row-reverse;
}
.alternating article:nth-child(even) .elementor-post__thumbnail__link {
    margin-left:0!important;margin-right:20px!important;
}

(In my quick and dirty example I had to use 'important'. Of course you should always try to avoid that, but I'm too lazy to find out the complete CSS trail to override in Elementor, which by the way is probably different in your case. That's the main issue I have with this page builder: the endless nested elements and the associated CSS trails, terrible!)

Anyway, the above is, as said, a quick and dirty example but it should get you going.

Click to expand...

frizzel said:

To make content flowing outside their containers visible, you first must override the default setting for that, in this case with the following CSS:

CSS:

.elementor-posts--skin-classic .elementor-post {
    overflow: visible
}

To push the image outside the container you can do something like this:

CSS:

.elementor-post__thumbnail {
    margin: -25px 25px 25px -25px
}

That's for an image on the left. Of course you need to alternate these margin settings for odd and even posts. For an image on the right, it would be something like:

CSS:

.elementor-post__thumbnail {
    margin: -25px -25px 25px 25px
}

Click to expand...