By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

Creating vertical line within section

R

rtha6551

New Member
Hello all first post here

I am using Elementor Pro and cannot seem to find any way to get the effect seen in the attached photo (from another site).

I want to put page sub headings on a 'tab' with a different background colour and a diagonal slash effect. I believe shape dividers can only be applied to full sections and horizontally?

I have almost no knowledge of custom code and have just been using the page builder as it comes. Is it possible to achieve without code or is there a simple way to do this?

Thank you in advance
 
elementor official

Attachments

sms-design

sms-design

Member
Add a button in content give the button an id my-button

Now go to the advanced > tab > border > type > solid > top 2px (adjust to suit)

In custom css copy paste the following

CSS:
#my-button{
clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%); /* Change 75% for angle required */
margin-top: -2px; /* Adjust to move button upwards towards border line */
}
Not sure what you meant by a tab, maybe a big screenshot of page would help
 
elementor official
Last edited:
R

rtha6551

New Member
Add a button in content give the button an id my-button

Now go to the advanced > tab > border > type > solid > top 2px (adjust to suit)

In custom css copy paste the following

CSS:
#my-button{
clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
}
Not sure what you meant by a tab, maybe a big screenshot of page would help
Thank you, I will try this when I get home!

As for the tab it was simply a way of describing the shape that I am trying to create
 
elementor official

Latest posts

Other Elementor Resources

elementor official
elementor official
Top