Change Button Border Style in Porto Advanced Button Element

[sen_lau]

Hi,

I want to create a button in my page using Porto Advanced Button Element but the default border style is square, I want to change it to round, what I found is the shortcodes in:

Buttons

I’m using WP Bakery, where to put the shortcodes in the page builder element?

Thanks!

[Aizaz Awan]

Hello, @sen_lau,

I acknowledge your desire to implement a button on your website, as per your specifications. In order to assist you in utilizing the shortcode effectively on the webpage, I have created a comprehensive instructional video. You can access the video at the following link: https://streamable.com/92v3pa.

I kindly request that you watch the video in its entirety, as it will provide you with a clearer understanding of the steps necessary to resolve your concern.

Best Regards,
PThemes Team.

[sen_lau]

Hi Aizaz Awan,

What if I want to incorporate it into the button element in the page? If I try to put in the ‘extra class’ nothing happen.

Or can you give me recommendation where to learn how to style button or element in page (css?) and how to incorporate it to the porto element when editing in page? I see ‘extra class’ in every element, and there’s custom css in porto options, but don’t know how to utilise it.

Thanks!

[Aizaz Awan]

Hello, @sen_lau,

I would like to inform you that it is indeed possible to incorporate the button into your webpage by utilizing the PORTO ADVANCED BUTTON widget. To assist you with this process, I have created a video tutorial that demonstrates the necessary steps. You can access the tutorial at the following link: [ https://streamable.com/u4wh48 ]

To customize the button element’s appearance, you can apply CSS styling to the respective page. To accomplish this, please refer to the instructions provided below.

Each widget or element offers an option in its settings to include a CSS class. To proceed, you must add the designated CSS class to the widget, as illustrated in the following image: [ https://postimg.cc/Hrp4HM8K ]. Subsequently, utilizing the page CSS option, you can reference this class and define the desired CSS styles accordingly. A visual example is available for your reference at the following link: [ https://postimg.cc/QFTB2x0P ].

Should you require any further assistance, please do not hesitate to reach out.
Thank you for your attention to this matter.

Best Regards,
PThemes Team.

[Author]

Posts