Exorcise awkward layouts with ghost buttons

This exciting new feature lets you embed an outline-style or "ghost" button directly via the WYSIWYG editor in your WMS pages and blocks

Is your site haunted by empty call-to-action blocks that contain nothing but buttons? Do you find yourself using bold text, heading styles, or (gasp) images masquerading as buttons in order to give important links prominence in text layouts? 

Ghost buttons are here, ready to scare away these (and other) layout woes. This feature allows you to style any link in a WYSIWYG as a transparent outlined button, also called a "ghost" button. The unobtrusive style of these buttons means they fit in just about anywhere, and you can even create groupings of buttons without your page getting too "heavy."

How we got here

Sample of a layout with weird-looking empty blocks

We knew that creative site admins were finding unusual ways to customize layouts by embedding buttons exactly where they want them (see example above!). Our work on the program finder tool of the new Undergraduate Admissions site confirmed that on-demand buttons would give us more flexibility to create structured layouts with existing WMS tools.

We could have built a special content type with special styling rules, but why not empower all WMS site owners to embed buttons directly in WYSIWYG text areas? It was a match made in heaven: a feature that would support the Undergraduate Admissions project and enhance all 900+ WMS sites.

How to create a ghost button

Ghost buttons can be manipulated just like any other text in the WYSIWYG...so there are a lot of ways to use them!

Usually, you'll want to add a button on its own line using the Template feature - this is the easiest way!

  1. Click the "template" button in the upper-right part of the WYSIWYG editor toolbar:
    Screenshot showing location of the template button in WYSIWYG toolbar
  2. In the Content Templates window, select the "Button link" option:
    Screenshot showing "button link" option in templates dialogue
  3. You should see a sample link in the WYSIWYG. Double-click it to update the text label and destination URL.
  4. Save and check out your nice new button!

You can also create in-line buttons using the source code editor:

  1. Create a text link in the WYSIWYG editor as you normally would
  2. Activate "source" view in the text editor toolbar
  3. Find your link and add the “button--outline” class to the link:
    Sample view of code with button class
  4. Save and check out your new button!

Note that this second option has less spacing around the button, so you'll want to use the first (template) option for most use cases. We used the template option for all the examples shown below.

Examples

Think of ghost buttons as supporting players in your content. Findable, but visually light, ghost buttons offer users options to click. They're equally attractive when used alone or in groups. (In contrast, the bolder buttons in half- and full-width call to action blocks are designed to stand out and encourage users to click.)

Ghost buttons can be added to any content type that has a WYSIWYG editor - from articles and Channels events to blocks and basic pages. Here are a few ways to benefit from these friendly ghosts in your WMS site:

1. Offer an important resource embedded in text content

This is the example that - for our team - kickstarted development of this feature. We wanted to present fairly lengthy text information about a variety of topics and, at the end of each text, offer a link to learn more about the subject. Ghost buttons make our links easy to find, yet they don't distract users from reading page content. 

This example also shows how headings and ghost buttons can work together to create a visually balanced structure that's easy to scan. 

Sample of heading, paragraph text, and button

2. Multiple links in a standard block or page

In this case, we wanted to use a simple standard block that would link to multiple options. Using the columns layout template, we centred a link in each column to create a clear and compact display within our full-width block. (This approach works in the main content area of a page, too.)

Title, text, and four buttons evenly spaced across a single line below

In this example, we also used an HTML horizontal rule at the top of the block to create a more obvious visual grouping - as we do with our call to action blocks. Here's what that looks like in the Source view of the WYSIWYG editor:

Screenshot of hr HTML tag in source editor

3. Additional options in a call to action block

Sometimes, you want to offer two (or more) button options in a block. To do this, you can use a statement block, standard block, or one of the techniques above. But if one button is super-important, and the other is a supporting player so (e.g. "sign up" and "learn more"), adding a ghost button to a Call to action block might be a great option:

Call to action block with a ghost button above main CTA button

Just be sure that your users truly need and understand both buttons. If you layout is cluttered or confusing, users will have a less enjoyable experience and may be less likely to click either option. (Remember, less is more!)

4. Block-like layouts...without blocks!

What if you don't really need a block? Blocks are a little tricky to set up and translate - but we accept this because we like how blocks add structure to our layouts and simplify management of content that repeats across pages.

What if your content is simple and it isn't repeated across multiple pages? Ghost buttons let you use existing WYSIWYG tools to create block-like structures you can easily manage alongside other page content. You can even use columns and the <hr> style (as seen above) to mimic the new design of our Call to action blocks:

Sample image of two blocks with images and buttons

Bonus: A note about left-aligned call to action blocks

Ghost buttons let you build more flexible layouts that can replace call to action blocks, providing more control over things like alignment and number of columns.

But maybe you want to keep your call to action blocks...except that the new left alignment doesn't work for your content. Here's a clever workaround: move your images from the "image" field to the body field and centre-align them so they match the buttons.

A word of caution

With open-ended features like ghost buttons, it's especially important that you understand your users' needs and adapt your site accordingly. Don't scare your users away with a ghost that lingers where it's not wanted!

Questions? Comments?

If you have any questions, concerns, or urgent support requests, please submit an issue through our new self-service IT Support site. For consultation services, fill out the request form.

You can also share your comments on the changes to the WMS (including this feature and other branding-related changes) in our WMS rebranding feedback survey.

Back to top