PRO: how to achieve image (from text) overlap and put a frame around like in screenshot

Support
#1

hi there,

i would like to achieve that my images, (i inserted them by “text”, they open in a lightbox) overlap (maybe 70% ) and put a frame around like in the screenshot
would be great if you could give advise :slight_smile:
Thank you
Maik

#2

Hi Maik,

1.) Set to use 2 columns
2.) On Section ROW > Style field add border: 1px solid red; max-width: 1200px; then set Marginless Columns to ON.
Change red and 1200 value accordingly.
3.) On Left column > Style field: Add width:30%;
4.) On the Right column > Style field : Add width:70%;
5.) Add image element on the right column and on it’s class field add mbn to reset default bottom margin to zero. See this: https://theme.co/apex/forum/t/customizations-css-class-index/207
6.)Below it, add raw content element then inside paste lightbox shortcode. The lightbox selector should go to the image class field. Make sure that your image is large enough to fit the 70% column.

Hope this helps.

1 Like
#3

Hi Lely,

Thanks for your detailed answer!
Everything worked like charm until i came to your tip 6.)
I added the raw element and put shortcode inside but now I just see the code under my image please see here:

Also the image is not reaching to the right border
I cant get these 2 things right.
Please help
Thanks a lot
Maik

#4

Hi Maik,

You’re always welcome!
You are missing [ at the start of the lightbox shortcode and then use large image. The space on the right is because the image is not large enough to fill the column.

Hope this helps.

#5

Hi Lely,
Thank you for your response!
I put a larger image now and it worked well.
I also added the [ to the shortcode but this doesn’t work.
Either I have 2 images or I have 1 image but its not clickable and not in the lightbox.

I put an image element with the right image and then a raw-code element below the image.
Then I pasted this code:
[image src="/wp-content/uploads/2017/08/siamroyalview-sunshine-01.jpg" link=“true” lightbox_caption=“Bitte Titel für caption festlegen” title=“Bitte Titel für mouseover festlegen” ]
[lightbox]

Can you please tell me the right code?
I dont understand this :The lightbox selector should go to the image class field.

Many Thx!!!

#6

Hi There,

Since we are using an image element, the lightbox shortcode should be like this:

[lightbox selector=".my-lightbox"]

Then add my-lightbox on the class field of the image element. You are having two images because aside from the image element, you do have a image shortcode two. No need for the image shortcode because we have the image element already.

See this : http://demo.theme.co/integrity-1/shortcodes/responsive-lightbox/

Hope this helps.

#7

Hallo Lely,

Thank you for your response.
First I added the lightbox selector same as you suggested, but nothing happened.
Then I activated the link on the image-item and link to the mediafile.
This worked. Is this the right way to do it?
I read the Article you sent the link, but dont understand.

Now I am still missing my capture/ titles under the image.
This code didn’t work:
[lightbox selector=".my-lightbox"[lightbox_caption=“Relaxing and beach lifestyle at its best”]

Thank you for your support

#8

Hi there,

It is not possible to add the lightbox_caption inside the [lightbox] shortcode. You need to add the code to the image shortcode.

You can use the Cube icon in the text editor of a text element to add the image shortcode which does have the lightbox caption option.

Thank you.