How to create banner buttons

[pawmeal]

Hello,

I saw this query on another post (https://theme.co/apex/forum/t/promo-banner/396) some time back, regarding recreation of the banner buttons like below:
https://prnt.sc/foq3yy
https://graphicriver.net/

I have read through but still quite unsure.
May I request for some step by step help, please? Thank you.

[rad]

Hi @pawmeal,

Thanks for writing in.

As given on that thread, you’ll have to wrap your banner shortcode within a link. Example,

<a href="https://www.google.com">[x_promo image="IMAGE URL HERE" alt=""] SOME TEXT CONTENT HERE [/x_promo]</a>

For the breakdown, please go to your builder and follow this

1. Add a section in your page with your preferred columns, let’s say it’s 3 columns.
2. Add text element for each column
3. Add this content to each of your text element content with your preferred image URL and content.

<a href="https://www.example.com/link-it-here/">[x_promo image="https://www.example.com/wp-content/uploads/2018/2/3/image-sample.jpg" alt=""]
YOUR CONTENT HERE
[/x_promo]</a>

Hope this helps

[pawmeal]

Hello,

Yes that helps alot, and I have this now:

Can i ask
Q1: How do I remove the top and bottom padding and let image and text area have rounded radius, so that it fits nicely with the rounded radius of the column?

Q2: I hv checked the font colour - it is black selected. However, the colour of the font is still red. How to adjust the colour of the words?

[Prasant]

Hello @pawmeal,

Thanks for updating the thread.

You need to adjust the section padding values to remove the spacing. Here is a screenshot.

To have rounded border in image, add following CSS under X > Theme Options > CSS

.x-promo-image-wrap img {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.x-promo {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.x-promo-content {
    color: #000;
}

Please change the color code and values for border radius as per your requirement.

Thanks.

[pawmeal]

Hello,

Thank you so much for the help… it’s really helpful.

I have managed to get much closer to what I want.

However, there seems to be still a white background (with sharp corners). How to make this rounded as well?

And also, how do I adjust the colour of the content? I have set it as black in the builder but it still shows as red

[christopher]

Hi Shay,

Please change the suggested code to:

.x-promo-image-wrap img,
.x-promo-image-wrap {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.x-promo {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.x-promo-content {
    color: #000;
}

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

[pawmeal]

Hi,

I have saved a secured note. Please check.

The corner still appears as sharp corners… and the font colour is still red.

Thanks

[christopher]

Hi Shay,

I checked the page in question but there is no image and text as you described in the screenshot. I see this:

Would you please bring back whatever you had in the screenshot so that I can check the live code an give you proper CSS code?

Thank you.

[pawmeal]

Hi Christopher,

sorry i was doing some testing. The images are back up now.

[christian]

Hey @pawmeal,

Add this code to your CSS

.x-promo {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

Hope that helps.

[pawmeal]

Thanks! All the corners are now rounded.

If I may also ask:

1. how may I adjust the font colours in the promo image?
2. There is a slight white border around the promo image. Is there any way to make the image itself without any white border and crisp?

Thank you.

[nico]

Hi @pawmeal,

Add this code in your Custom CSS:

1. To change your text color,

x-promo a {
   color:#000;
} 

2. To remove the border around the image use this code,

.x-promo{
   border:none;
}

Hope it helps.

Let us know how ti goes.

Thanks.