Solved

Adding buttons in an Article

  • 14 December 2022
  • 18 replies
  • 207 views

Badge

Hi,

Not sure if this is possible because afaik you can't add HTML of CSS in an Article. Is there an easy-ish way to add CTA-buttons in de text of an Article? I think it would look clean and it would be more in line with our regular .com site...

icon

Best answer by bas 15 December 2022, 10:29

View original

18 replies

Hi Paul!

From what I can tell this isn’t currently possible. The best option is to add hyperlinked text using the link function. If you want to call it out as much as possible you can link text in a Callout feature in the text editor for articles! 

 

 

There’s an Idea opened to allow for more robust editing using “Source”. Definitely take a look to see if it interests you! The comments might also have some helpful information for workarounds ?

 

 

Badge
'

Hi Paul!

From what I can tell this isn’t currently possible. The best option is to add hyperlinked text using the link function. If you want to call it out as much as possible you can link text in a Callout feature in the text editor for articles! 

 

Hi! Yeah, that''s the way we do it now, but y’know, I like buttons. ? Looks a lot better imo.

This way is also handy, but it is a bit large.

 

 

There’s an Idea opened to allow for more robust editing using “Source”. Definitely take a look to see if it interests you! The comments might also have some helpful information for workarounds ?

 

Upvoted that one the moment I saw it. 😉 I hoped there would be some work around but I guess not.

'
Userlevel 3
Badge +2

@Paul_ unfortunately not right now.

My first workaround thought would have been an image with hyperlink.

But alas, hyperlinked images is not an option either.

 

Thanks for the voting and pushing of the product! 👍🏻

 

Badge +1

This is indeed not possible

 

But…

 

You can make it look like it’s possible with a little bit of trickery :)

I’ve added the following CSS to my custom-css, which makes any of the red callouts, on a specific article (36), in a specific category (42) look like a sort of button.

/* add a button to a specific topic's cta */ body.category-42.topic-36 .callout-red{     background-color: white;     border: 2px solid #CCC;     padding: 0;     border-radius: 10px;     display:inline-block;     box-shadow: 0 0 5px -1px rgba(0,0,0,0.2); } body.category-42.topic-36 .callout-red a {       text-decoration: none;     padding: 10px 20px;   display: inline-block; }

Please adopt the style to your community, so that they look like your buttons! This really is meant as a proof of concept.

 

Badge

This is indeed not possible

 

But…

 

You can make it look like it’s possible with a little bit of trickery :)

 

Love this, thanks! I’ll play around with it on staging.

Badge

So this works pretty well I think @bas. Whenever I use the red call out option, it will be a button(-ish kinda). 

standard
hover

 

Hello👋

Maybe this doesn’t help at all, but want to share what we’ve done to include buttons 😊

I have the same use-case as our main site uses buttons in texts.

What i have done instead is to customize the spoilers to look like buttons. It doesn’t work as a button where you are directed somewhere else, but I think it brings a more seamless experience between our two websites aestheticly. It looks like this:

 

Standard:

(Visa=Show)

 

While hovering:

Opened spoiler:

(Stäng=close)

 

 

Here is the code I used:

.spoiler-container {
border: none;
margin-top: 20px;
}

.spoiler-container .spoiler-toggle-button {
text-decoration: none;
margin-bottom: 20px;
}

.spoiler-toggle-button span {
border: 1px solid #000;
background-color: #fff;
border-radius: 50px;
padding: 10px 30px;
transition: 200ms;
margin-left: 10px;
}

.spoiler-toggle-button span:hover {
box-shadow: rgba(0, 0, 0, 0.4) 0 2px 9px;
}

 

@Paul_ @bas  @Alistair FIeld  @Mattie K 

 

Ok, I have maybe come up with a workaround to a working CTA in articles 😜

You can see it here in a draft I made

 

How i did:

So the standard heading-sizes in InSided is H1, H2 and H3. So when creating an article I thought maybe we could assign one heading as a “Button heading”. Lets choose “H6”, since we never use or have used the H6-heading.

 

  1. Create the content of the article. The button in my case reads “Click here” and I have hyperlinked it using the “insert link” button:

 

  1. Go to the HTML-editor, and change the “Click me” paragraph from<p><a href=yourlink>Click here</a></p> to <h6><a href=yourlink>Click here</h6>”:

 

 

  1. Now we have an article that looks something like this:
  2. Now I add this styling in the custom-CSS panel, and directly towards the H6, and H6 Anchor tag - the styling is our brand styling, so you might want to change som colors and stuff:
    .post__content h6{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    background-color: #fb8400;
    border-radius: 100px;
    width: 150px;
    transition: 200ms;
    cursor: pointer;
    }

    .post__content h6 a {
    color: #000!important;
    text-decoration: none!important;
    }

    .post__content h6:hover{
    box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
    }

 

 

  1. The end result was pretty pleasing! Keep in mind, you must press the text for the link to work, as it really is a styled text-link. 

    Standard:


    While hovering:

 

 

The problem is that each time you want to make a button, you need to change the value <p> to <h6>, but I think that’s alright! 😊

@JeppePeppe What a great workaround! Thanks for sharing 😃

 

Now if I can get our team to agree to not use one of the header sizes… 😅

Userlevel 3
Badge +1

I think @JeppePeppe workaround is best because you dont have to modify css to each and every article.

Thanks for the tip, some day I have to test this.

 

(Hopefully inSided offers out of the box solution in the future)

Badge

O, great ideas! Very cool. Thanks for all the help!

Badge

@Paul_ @bas  @Alistair FIeld  @Mattie K 

 

Ok, I have maybe come up with a workaround to a working CTA in articles 😜

You can see it here in a draft I made

 

How i did:

So the standard heading-sizes in InSided is H1, H2 and H3. So when creating an article I thought maybe we could assign one heading as a “Button heading”. Lets choose “H6”, since we never use or have used the H6-heading.

 

  1. Create the content of the article. The button in my case reads “Click here” and I have hyperlinked it using the “insert link” button:

 

  1. Go to the HTML-editor, and change the “Click me” paragraph from<p><a href=yourlink>Click here</a></p> to <h6><a href=yourlink>Click here</h6>”:

 

 

  1. Now we have an article that looks something like this:
  2. Now I add this styling in the custom-CSS panel, and directly towards the H6, and H6 Anchor tag - the styling is our brand styling, so you might want to change som colors and stuff:
    .post__content h6{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    background-color: #fb8400;
    border-radius: 100px;
    width: 150px;
    transition: 200ms;
    cursor: pointer;
    }

    .post__content h6 a {
    color: #000!important;
    text-decoration: none!important;
    }

    .post__content h6:hover{
    box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
    }

 

 

  1. The end result was pretty pleasing! Keep in mind, you must press the text for the link to work, as it really is a styled text-link. 

    Standard:


    While hovering:

 

 

The problem is that each time you want to make a button, you need to change the value <p> to <h6>, but I think that’s alright! 😊

Also: great url used. Got me.

@Paul_ Haha nice 😉

Badge +1

Nice work @JeppePeppe !

Badge

@JeppePeppe Can I ask a follow up?

I used your method to try it out and it looks great on desktop. But on mobile it changes to a normal text url. Any ideas? I know how to tweak stuff but making it responsive proof.. I dunno.

 

Lookin’ good
Button gone. sad

 

@Paul_ How weird!

I checked the article you linked and looked at the console, and from what I can see you have a media query “(min width: 1025px) on this code - when the screen gets a width that is smaller than that - the code dissappears.

 

(at the top)

 

Can you see if you have this media query in the code? I would just remove it, since the CTA-button doesn’t need adjustment for screen sizes 😊

Badge

@Paul_ How weird!

I checked the article you linked and looked at the console, and from what I can see you have a media query “(min width: 1025px) on this code - when the screen gets a width that is smaller than that - the code dissappears.

 

(at the top)

 

Can you see if you have this media query in the code? I would just remove it, since the CTA-button doesn’t need adjustment for screen sizes 😊

You’re a legend. 🙂

It was some code to change the featured topics on mobile I think. It's gone now. And the button works. Thanks!

Great! Happy to hear that it works 😁

Reply