Adding a link to a Promo

Hi there,

I want to make a promo that looks similar to the demo photo I have attached.

[promo image=“http://yourdomain.com/image.jpg” alt=“Example”] Your content here. [/promo]

This is the demo code but it doesn’t bring up a header or a button or anything. I’m just not quite sure what to add to bring it up and would appreciate some help :slight_smile:

Also is there a way to create a target link for the button?

Hello Adam,

Thanks for writing in!

When using the promo shortcode, you still need to add the content and the button.
You use this code:

[promo image="http://theme.co/media/x-teaser-example.jpg" alt="Example"]
[feature_headline type="left" level="h2" looks_like="h5" icon="dashboard"]Brilliant[/feature_headline]

Take your product marketing to the next level with the promo shortcode! Easily add an image above by setting it in the shortcode, and then place whatever you want in here. The sky is the limit!

[button type="flat" shape="square" size="x-large" href="#example" circle="true" block="true" title="Example"]See Why![/button]
[/promo]

You need the following shortcodes in the promo content:

Hope this helps. Please let us know how it goes.

Hello! I am having a similar problem. My button will not link to the page I inserted. It was working fine with an older link. Now when I click the button it shoots me to the home page of my website. Ple

<h6><strong>Work for Me, DTE:</strong></h6>
<p>Right now DTE Energy is making decisions that will impact your family and household for a generation-- and without your input! Click more to be redirected to the official Work For Me, DTE Website</p>
<p>[x_button size="small" title="More" href="<a href="workformedte.org/"><span style="font-weight: 400;">workformedte.org</span></a>"] More →[/x_button]</p>

Hi Jimmy,

Thanks for updating this thread.

Your button shortcode is incorrect.
The correct should only be:

[x_button size="small" title="More" href="http://workformedte.org/"] More →[/x_button]

Please let us know if this works out for you.

1 Like

this worked perfect! Thank you!

Thanks so much @RueNel have got that working with your code :grinning:

I just have a couple of follow up questions if that is ok?

On the shortcode demo page for the promo page it has written:

OPTIONS
id: add a unique ID to the shortcode.
class: add a class or multiple classes to the shortcode.
style: add inline styles to the shortcode.
image: enter in the URL to the image you want to feature.
alt: enter in the alt text for the image.

Is there a list or glossary anywhere that has listed some of the inline styles I can use? And also what is the purpose of having an ID?

And also, can you edit the size of the image?

Hey Adam,

The Style, ID and Class attributes are for users who know how to use CSS. Those shortcode attributes are the same as when you use them in HTML.

In case you’re new to CSS, you can learn from sites like this: https://www.w3schools.com/css/css_howto.asp

There is no option to change the size of the image so you need to either resize your image in WordPress or resize using an image editing program like Photoshop then reupload your image.

Hope that helps.

I just have one more follow up question.

The code you gave me for the promo box goes the full width of the page. Even if I change the image size to like a small image, the image is strethced out to fit the full width of the page.

Is there anyway to customise the size of the box? So I can have two side by side like the image below:

Hi Adam,

In that case, do not place your Promo elements in the same column, but setup your Row to have two Columns and place a Promo element in each columns.



Hope it helps,
Cheers!

Another question (sorry). How do I reduce the white space between the picture and the header that says Orange in the below photo.

Thanks for answering all my questions so far.

Hi Adam,

Please add a class mts to your headline shortcode, mts is a Spacing Helper class you can learn more about Spacing Helper Classes here.

e.g.

[custom_headline type="left" level="h2" looks_like="h3" accent="true" class="mts"]Custom Headline[/custom_headline]

Hope it helps,
Cheers!

Is it better to create Promos as elements in containers from the Elements panel, or is it equivalent to add them via short codes. I have been adding everything as elements and not short codes. Wondering what the difference or benefit of using one method over the other?

Thanks!

Also, where do we get the CSS to style the Promo like its show in the examples? My promos are all 2px width gray boxes. Very simple.

Hello Richard,

It is best that you use the Promo elements from the Elements tab when editing in Cornerstone. The shortcode is only convenient if you are using WP editor or other page builder. Since you are using Cornerstone in building the pages, use the Promo elements instead. It should give you a more easier way to choose with the options and even insert a custom ID, custom class or inline style css.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.