Place images on either side of a heading.

Author Posts

bluedognz

Hi Seb

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

Here’s an example: http://drops.bluedogwebdesign.com/302R0n2L2V2Y

I’m also using beaver builder if that helps.

Thanks!
Clark


Sebastian

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:

http://somup.com/cFnVFEVx7E

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 (5.1.4.4) in order for what’s shown in the video to work.

I hope that helps!

Cheers,
Sebastian


bluedognz

Brilliant, that worked perfectly thank you!


Sebastian

Great!

You must login or register to reply to this topic.