Elementor Image

Public Ticket #14322

Conversation thread

webmasterVFN replied

5 years ago

Customer Reply

Thank you,

it worked well :)

PenciDesign replied

6 years ago

Staff Reply

Hi,

To do that, please add do follow steps below:

1/ Add more this code to Customize > Custom CSS:

.custom-triangle.elementor-widget-image .elementor-image{ position: relative; }
.custom-triangle.elementor-widget-image .elementor-image img{ width: 100%; }
.custom-triangle.elementor-widget-image .elementor-image:before {
    content: "";
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-right: 20px solid #fff;
    border-bottom: 20px solid transparent;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -20px;
    z-index: 5;
}

2/ When you edit an image widget from Elementor > click on "Advanced" tab > on "CSS Classes" fill "custom-triangle" class - check this image: http://prntscr.com/urejom

Hope this helps,

Best Regards,

PenciDesign

webmasterVFN replied

6 years ago

Customer Reply

I am talking about this element. I would like to be able add the same styling to an image that I add in Elementor.

Thank you!

PenciDesign replied

6 years ago

Staff Reply

Hi,

Can you tell me more clear about this issue? I'm not clear about this.

What's element from Elementor you want to add :before attr ? And what's triangle example ( a screenshot ) you want to add to the images?

Best Regards,

PenciDesign

webmasterVFN started the conversation

6 years ago

Conversation Start

Hi,

I am trying to match the images added in elementor widgets with the theme defaults. I am talking about the pseudo-element :before used like this.

.penci-grid .list-post.list-boxed-post .item > .thumbnail:before

(It adds a triangle to the right of the image)

How can I add it to the images from Elementor widgets?

Thanks!

Want to join this conversation or access attachments? Sign in first.