Global CSS Buttons Usage

Setup Procedure:

In order to further improve our UX/UI for our users, we are adding the option to use on-page buttons instead of hyperlink text. This tutorial will walk you through the correct procedure to follow when adding buttons to your clients’ websites, specifically through the manage snippet editor. These buttons can be added to any page of your dealership’s website. The styles are applied by default but can be overridden by inline styling, so nothing about these buttons are set in stone. They CAN BE customized to the client’s wishes.

IMPORTANT: You MUST HAVE added the Global CSS code to your client’s website.  If you haven’t done this, use the Global CSS Setup document and follow the instructions to get this added.

Get To The Snippet

Now that we understand why we’re adding buttons, let’s review how to add them. First, identify the page you want to add buttons to. Next, identify the snippet where your buttons will live.

Once you’ve found both the page and the snippet, navigate to the “Admin Panel” of your client’s website (baseurl.com/admin). Once there, select DSAdmin (under Tools) then select “Manage Snippets” Section. Your screen should match Image [1] to the right.

Next, let’s track down the snippet. If you haven’t used the manage snippet editor, ask a fellow SEO team member to help you track this down. Once you have the correct snippet loaded in the editor, select the “Source” button in order to get out of the WYSIWYG editor and straight into the source code editor. Your screen should look similar to Image [2] to the right.

Now, you’re ready to edit the page and add in the HTML for your buttons. You can still use either the inline editor or the WYSIWYG editor in through Manage Snippets to put any other information on the page. In fact you may want to do that first, as adding buttons should be the last thing you do on a page (that way you can see how they look and make changes without having to alter your content).

Adding the HTML Code

Now that we’re in the source code editor, you’re ready to insert the button HTML code:

<!-- SEO Button div start -->

<div class="seobutton">

<ul> <!-- button list start -->

<li><a class="lead-button" href="#link1" role="button">Item 1</a></li>

<li><a class="lead-button" href="#link2" role="button">Item 2</a></li>

<li><a class="lead-button" href="#link3" role="button">Item 3</a></li>

<li><a class="lead-button" href="#link4" role="button">Item 4</a></li>

<li><a class="lead-button" href="#link5" role="button">Item 5</a></li>

<li><a class="lead-button" href="#link6" role="button">Item 6</a></li>

</ul> <!-- button list end -->

</div> <!-- SEO Button div end-->

The above HTML is set up for 6 buttons, but this can be as many or as few as you need. You just need to add or remove a list to the unordered list element (ul):

<li><a class="lead-button" href="#" role="button">Item</a></li>

“#link1” needs to be replaced with the actual link to the page you want the button to lead to, and you’ll need to rename “Item 1” to the text you want to displayed on the buttons.

IMPORTANT:  These buttons are in their own “div” so they’ll work with the embedded code including the max-width, styles, etc., to make sure they show up correctly for each media screen.

Once you’ve added the button code, and updated the links and anchor text, your screen should look similar to Image [3] to the right.

In Image [3] there is a “Browse our Inventory” statement above the buttons. This can be done on any page of the website.

Other than the size, these buttons will match all other buttons on the website. They will match the color scheme along with any :hover, :mouseover, and other styles that have been applied site wide. Beware, these buttons will appear inline with the images and text. It shouldn’t interfere with formatting, just make sure your buttons are implemented below your on-page text.

Once you’ve completed your links to the code, you can hit save and open your page in a browser tab. Your screen should look similar to Image [4] and Image [5] to the right.

These are the standard sizes for the buttons. The colors will change per site, but everything else should be standardized by our Global CSS code.

If you want to test your buttons, to make sure they look correct on all mobile devices, use Google Developer Tools or a similar tool.

That's it! There is no more to the buttons. If you have any issues, contact Marketing Support.

Image 1

Image 2

Image 3

Image 4

Image 5