Place images on either side of a heading.

This topic contains 3 replies, has 2 voices, and was last updated by  Sebastian 4 years, 7 months ago.

Author Posts


Hi Seb

Is it possible to place images either side of a heading with MT?

Here’s an example:

I’m also using beaver builder if that helps.



Hey Clark,

Yes, this is possible with CSS, and therefore Microthemer. You just need to create two selectors, using pseudo elements ::before and ::after for the images. And one selector to set position:relative on the heading. You can do this by setting the relevant CSS modifier during targeting. The following video shows this in action:

Note, a position value of relative is set on the heading so that absolute positioning of the : :before and ::after elements is done relative to the heading.

Also note: many of the CSS styles applied to the pseudo elements in the video are necessary to make the pseudo elements appear (e.g. setting the content property with empty ‘ ‘, width/height, and position:absolute).

P.S. your message alerted me to the fact that there was a bug whereby pseudo elements weren’t updating the selector suggestions properly. I’ve fixed that now, but you will need to update to the latest version ( in order for what’s shown in the video to work.

I hope that helps!



Brilliant, that worked perfectly thank you!



You must login or register to reply to this topic.