Shifting a Block into the block above. Essence Pro

[Aaron Mackley]

I'm working on building a front page similar to the demo for Essence Pro. (https://demo.studiopress.com/essence/). But on the demo, Below the title, it includes the buttons, etc. Then, it has a Post and Page Grid block. The Post and Page Grid block extends above the bottom of the picture, so that the pictures are indented.

On my site, I need, instead of Post and Page Grid with the featured image, I need two separate blocks with videos and some title and paragraph text below. (see http://newdancing.dancingwithwater.com/). So I used an Advanced Columns block.

I cannot figure out how the Post and Page Grid block of the demo sticks up into the image.

I have seen where the Atomic Blocks Post and Page Grid include "margin-overlay" in the additional css classes. I entered the margin-overlay in the additional css classes of the Advanced Columns block. It didn't have the same effect.

Can someone help me figure out how to adjust this?

Also, I would love to have the empty space between the two columns, like it shows in the Post and Page Grid.

http://newdancing.dancingwithwater.com/

[Bianca]

Hi There,
For some reason when the columns block is set to "align-full" the negative margin is not applied. When you add !important to the margin-overlay class in the front-end.css file (or customizer if you prefer) it works. It's not elegant but gets the job done. So:

.margin-overlay {
	margin-top: -100px!important;
}

For the space between the columns:

• remove the background-color form the advanced columns block.
• add a background-colour to the individual column block.

Selecting the individual block can be difficult sometimes. I always use the top navigation bar (hamburger-ish dropdown somewhere on the top left)to select the correct individual block.

• Apply the background color.
• On the right sidebar of the editor there is a possibility to apply a class to the individual block. Add a custom class, for example "outer-column".
• Head over to the customizer and add the following CSS

.outer-column .ab-block-layout-column-inner h2{
	padding: 30px 100px 0 100px;
	text-align:center
}

.outer-column .ab-block-layout-column-inner p{
	padding: 0 100px 30px 100px;
	text-align:center
}

Hope this helps.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

(As my previous replies dissapeared, one more attempt)
Hi There,
For some reason when the columns block is set to "align-full" the negative margin is not applied. When you add !important to the margin-overlay class in the front-end.css file (or customizer if you prefer) it works. It's not elegant but gets the job done. So:

.margin-overlay {
	margin-top: -100px!important;
}

For the space between the columns:

• remove the background-color form the advanced columns block.
• add a background-colour to the individual column block.

Selecting the individual block can be difficult sometimes. I always use the top navigation bar (hamburger-ish dropdown somewhere on the top left)to select the correct individual block.

• Apply the background color.
• On the right sidebar of the editor there is a possibility to apply a class to the individual block. Add a custom class, for example "outer-column".
• Head over to the customizer and add the following CSS

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

.outer-column .ab-block-layout-column-inner h2{
	padding: 30px 100px 0 100px;
	text-align:center
}

.outer-column .ab-block-layout-column-inner p{
	padding: 0 100px 30px 100px;
	text-align:center
}

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Aaron Mackley]

Hello Bianca. Thank you for the help. css is not my forte. And WordPress 5.x with blocks has given me a bit of a learning curve. But I'm getting there.

Those changes worked perfectly. Thank you for your help.

Aaron

[Author]

Posts