Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2556608
Elementor Image
Closed

Comments

  • webmasterVFN started the conversation
    October 1, 2020 at 10:21am

    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!

  •  2,701
    PenciDesign replied
    October 1, 2020 at 3:28pm

    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 replied
    October 1, 2020 at 4:29pm

    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!

  •  2,701
    PenciDesign replied
    October 1, 2020 at 5:10pm

    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
    October 5, 2020 at 8:40am

    Thank you,

    it worked well :)