[rmcgregor86Participant]

Hi there,

I’m wanting to create a transparent button (consistent with the style of the rest of the site) over each of the images in the slider on my homepage.

How do I go about doing this, please?

Also, are you able to tell me how to remove the white border around the images on the slider?

I will include login and site details for you in a private message below.

Thanking you in advance,
Rebecca

[rmcgregor86Participant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for writing in.

Your button styling should be configurable within customizer, and instead of adding Rev. Slider buttons, you’ll have to add a text layer with X button within it. Though, I’m not really sure if it’s rev. slider or standard slider, would you mind providing a mockup screenshot of what you’re trying to achieve?

About the border, your slider element has the option to disable it, please toggle on the No Container option.

Thanks!

[rmcgregor86Participant]

Thanks for your reply.

I have attached a copy of an example that I am trying to achieve. I’d like to add a clickable button where I have put the “button here” over the image. I would like this button to be in the same style as the ones on my website.
Is this possible?

Thanks.

[LelyModerator]

Hi There,

Thank you for the screenshot. Please use button shortcode like this:

[x_button type="transparent" shape="square" size="x-large" href="#example" title="Example" class="slider-btn"]Square Button[/x_button]

Then add the following CSS via Appearance > Customize > Custom > Edit Global CSS:

.slider-btn{
    position: absolute;
    bottom: 92px;
    left: 30%;
}

Feel free to adjust the bottom and left value accodingly until you found your preferred position for the button.

Hope this helps.

[rmcgregor86Participant]

Thanks for your reply Lely.

Can you please clarify where I need to add the button shortcode:

[x_button type=”transparent” shape=”square” size=”x-large” href=”#example” title=”Example” class=”slider-btn”]Square Button[/x_button]

I understand where to add the CSS via Appearance > Customize > Custom > Edit Global CSS, but not the first code you noted.

Thanks.

[John EzraMember]

Hi there,

Thanks for updating the thread! The button shortcode is entered in the text area where you are entering your content.

Hope this clarifies – thanks!

[rmcgregor86Participant]

Appreciate the prompt reply John. However I am not sure that I follow. I tried adding the button shortcode in the text area, however this places the button underneath the slider and not as an overlay like I wanted.

Perhaps I misinterpreted your directions?

[RadModerator]

Hi there,

It will not overlay as you add it, it depends on where you’ll add it. It’s just a sample, you’ll still need to apply positioning for it to work. But you can do it easily with rev. slider and try adding it as a text layer.

As of now, your content uses standard slider where positioning/overlay isn’t supported.

Thanks!

[rmcgregor86Participant]

Hi Rad. Appreciate the clarification.

Can you link me to a tutorial on how to set up a revolution slider?

Thanks.

[LelyModerator]

Hi There,

Please check the following link:
https://community.theme.co/kb/integrated-plugins-revolution-slider/
https://www.themepunch.com/revslider-doc/slider-revolution-documentation/

Hope this helps.

[Author]

Posts