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.

 

/ Print
Posted by Olivia Justice in Buttons

Comments


Be the first to comment!
Name*
E-mail*
Website
Comment* (250 characters max)
0 Pending Comments
 Keep me updated of follow-up comments!
Most Recent

By Olivia Justice
October 11, 2017 Category: Modules

Changing URLs is restricted in Virteom CMS - Why? Because it can wreak havoc on your website. Changing your URL can result in: Loss of SEO Ranking Loss of referring site traffic. Have you ever been to a site linked from a blog you were reading and then get a Page does not exist error? - It is likely that they changed the URL. Email Clicks go to Dead URLs much more! To learn more about why changing URLs can devastate your SEO traffic CLICK HERE. But we understand that sometimes changing your URL is neccesarry. We suggest adding a redirect on your page. Redirection is the process of forwarding one URL to a different URL. This allows you to send users and search engines to a different URL than the one that was originally requested. Virteom CMS makes it easy for you to add a redirect on your website. Keep reading this how-to guide to get the scoop: How to add a redirect on your website First things first, youll need to login to the back-end of your website. Type in your

By Virteom
October 05, 2017 Category: User Access, Learning

With Virteom, website administrators can choose which members have access to certain areas on the site. For example, you would want your blogger to have access to create and edit blog pages. You can make different levels of users, from customers and staff, to full admins. Lets get started. After logging in as an admin, select Manager from the top bar. Then, on the left hand side, select Members. This will bring up a screen showing all of the members who are registered to your site. Click on Edit next to a members name. Here is the user access part of the next screen. You can edit contact information, change a users password, and update user access from this area. Editing Access and Permissions Box 1 is a list of all of the administration features a user has access to. In this example, this user has access to all features. Explore the list on your site and determine how you wish to set up access. Box 2 is a list of all of the web pages on your site. Again this user has access to edit

By Olivia Justice
September 29, 2017 Category: Meta Tags, Meta Descriptions, Browser Titles, SEO

SEO in Virteom CMS Search engine optimization (SEO) is an important piece to your website. Generating traffic from organic searches to your website is a key part of your online business. The time and effort you put towards your websites SEO can mean all the difference. Thats why adding things like browser titles, meta descriptions and meta tags for every page on your site is important. Adding these behind the scenes SEO tactics, you can improve your search appearance. In Virteom CMS, we make it easy to add things like meta description, meta tags and browser titles in. Follow along with this how to learn how to add this SEO information on all the pages of your website. First things first, youll need to log-in to the back end of your website. Once you have logged in, you should see a black navigation bar at the top of your screen. Click on Navigation from the black taskbar at the top of your screen Click on the Edit icon that is next to the page name youd like to add SEO information

Get In Touch
We Tweets
Virteom ©