How to add Button (or HTML) to Tab Content

I'd like to add a button (Call to Action) and/or HTML to tab content. So the content can read something like 'This is a really great tab. Click here to register for what this tab has to offer' - and there be a button and/or the link text 'click here' can go somewhere.

Thanks!

  • Adam Czajczyk

    Hello Logan,

    I hope you're well today and thank you for your question!

    The "Tabs" module doesn't currently support adding "sub-modules" (such as e.g. button) or raw HTML to it. I think though that there's a workaround that you may use to achieve your goal.

    Here are the steps:

    1. Inside the tab put your "call to action text"

    2. Highlight the part of it (e.g. "Click here" text) and use "link" tool from a text floating toolbar to make it a link leading to selected URL/page

    3. Use this service to create a nice button;

    http://css3buttongenerator.com/

    it will be created with a pure CSS and the page will give you a code similar to following one (below is just an example):

    .btn {
      background: #3498db;
      background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
      background-image: -moz-linear-gradient(top, #3498db, #2980b9);
      background-image: -ms-linear-gradient(top, #3498db, #2980b9);
      background-image: -o-linear-gradient(top, #3498db, #2980b9);
      background-image: linear-gradient(to bottom, #3498db, #2980b9);
      -webkit-border-radius: 28;
      -moz-border-radius: 28;
      border-radius: 28px;
      font-family: Arial;
      color: #ffffff;
      font-size: 20px;
      padding: 10px 20px 10px 20px;
      text-decoration: none;
    }
    
    .btn:hover {
      background: #3cb0fd;
      background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
      background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
      background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
      background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
      background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
      text-decoration: none;
    }

    4. As you can see, there are two occurrences of a ".btn" class in the code above, replace them with just ".upfront-tabs-container .utabs-content a" like this (below showing only these two relevant lines):

    .upfront-tabs-container .utabs-content a {
    
    .upfront-tabs-container .utabs-content
     a:hover {

    5. Back in Upfront click on a "Tabs" module and then on "Settings" for it (gray "gear" icon over its top edge)

    6. In left panel use "Choose or create preset" box to create a new preset (give it a unique name of your choice)

    7. Once the preset is created us "Edit Preset CSS" button in that same panel; this will show CSS editor

    8. Put the CSS code that you created above into this box and save CSS editor, then save element and Upfront.

    Below is a screenshot of example button (no further styling though, it's just an example) created that way:

    I hope that helps!

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.