How to Add a Button Style to Your Webpage

Your website has been launched. Congrats! You may be happy with the way things look for a while, but as you may know - creating new content is necessary to stay relevant online.

As you create your new web pages, you'll more than likely find yourself in the need of a stand out button. Stand out call-to-action (CTA) buttons let your customers know what action you want them to take. It keeps them from being distracted from all of the other links that are provided on your website. 

But, how did Virteom add that stylish BIG call-to-action (CTA) button that is sprinkled throughout your website? And, furthermore, how can I use that same style?

This how-to guide will show you how to add button styles to the links you create on your website.

Locating your button style

The first step in the process is locating the button style you want to replicate. Where does this button live? Do you see it on another page on the website? If so, navigate to that page on your site.

If you have are computer savvy, and can figure out how to use the developer tools - keep reading the next steps in this part.

If you have trouble, simply send us the URL of the page with the button you like with the following request to our help desk system:

Hello team,

Can you please tell me what the class of the button on this page? (Paste URL here).

Thanks,

If you're using Google Chrome, you can use developer tools to determine the class of the button. Right click on the button and click 'Inspect'. In the inspection tools, you'll see the class of the button. This is what you'll use to add to your new button.

In the example below, the class we want to remember is orbitButton

Locating your button style | How do I add a button in Virteom CMS

Adding your button style to a link

Once you have determined the name of the button style that you would like to use, it's time to apply it to the link you have created.

  1. Highlight the text you would like to make a button.
  2. Click the link button.
  3. (Make sure your link is typed in the URL box or your document is uploaded)
  4. Click over to the Advanced tab.
  5. In the "Stylesheet Classes" box, paste in the class of the button you copied from the button style you liked.
  6. Click "OK"
  7. Click "Save" at the top of the page
  8. Click "Preview" To see your changes
     
Adding your button style to a link | How do I add a button in Virteom CMS

Now you have a button!

Once you have the button style, every thing else is fairly simple. You just plug and chug.

If you have trouble finding the class you need to add in for the button style - don't shy away from asking a Virteom team member. We'll be happy to assist you so that you can produce your pages without a problem.

As always, if this how-to guide didn't get you what you needed - send in a ticket to our help desk or chat us on our LIVE help desk.

 

Most Recent

Why Do My WordPress Plug-Ins Keep Changing?

By Olivia Justice
June 18, 2019 Category: WordPress

WordPress is apublishing platform for managing your digital presence and establishing your brand. Even if there are no built-in options, themes, or features that you want or need, there are thousands of third-party plugins and web apps that can be integrated seamlessly. According to W3techs, WordPress has 58.8% of the CMS marketshare. However, what most site admins discover as they develop and expand their WordPress powered site, every plugin you install requires a steady stream of updates to keep all features working properly. Essentially, the maintenance is a nightmare. Developers update, upgrade, add-on and change plugins on what feels like a daily basis. If you dont have the technical knowledge to read through the plugin updates or version notes, you may be upgrading to a plugin that is not compatible with the version of WordPress youre running. And even if you have the technical knowledge, you may find that an update to one plugin has completely messed up the functionality of another

How to Edit Your Website Footer

By Olivia Justice
May 07, 2019 Category: Modules, Learning, How To

The purpose of a website footer is to help visitors by adding information and navigation options at the bottom of the webpage. More often than not, the footer of your website doesnt change, and it really shouldnt...like ever, because its giving end-users links to service pages and contact information. But in the case you get a new phone number or address, the need to change your footer comes all the more important because again, this information appears on every single page of your website. You dont want the wrong contact information everywhere! So , what do you do if you need to update the footer on your RocketSite? Have no fear! With RocketSites, its really easy to go in and make edits to the footer of your website all on your own. Follow along this how-to guide to learn how to update the footer of your website in RocketSites. how to edit the footer on rocketsites Login To Your Site To make edits to your websites, youll need to log-in first: Login to the back-end of your website

Modifying Site Navigation

By Olivia Justice
January 28, 2019 Category: How To, Navigation, Menus

Want to change the order in which your navigation items appear? Want to remove or add a menu item? No worries, this is all possible within Virteom CMS. Rearranging menu items in virteom cms To start rearranging the order, your menu-items appear login to the back-end of your website. Login to the back-end of your website by visiting (yourdomain.com)/virteom Enter Email Enter Password Click Login Once you log in, click on Site Pages or Navigation from the menu. Once you arrive at your Navigation, youll notice the pages of your website have a distinct hierarchy. The pages on your site show in a tree layout - meaning the topmost item is the main menu item, and the pages that appear below it (indented) are children of the menu items. This, in turn, is used to determine how the navigation on your website will appear. For example, if you have a menu on your website that looks like this: the corresponding navigation in Virteom would look like this: In this example, Services is