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
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!
- Click the "template" button in the upper-right part of the WYSIWYG editor toolbar:
- In the Content Templates window, select the "Button link" option:
- You should see a sample link in the WYSIWYG. Double-click it听to update the text label and destination URL.
- Save and check out your nice new button!
You can also create in-line buttons using the source code editor:
- Create a text link in the WYSIWYG editor as you normally would
- Activate "source" view in the text editor toolbar
- Find your link and add听the 鈥渂utton--outline鈥� class to the link:
- 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.听
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.)
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:
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:
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:
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听听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听.
