by Jeffrey Smith

In this tutorial, I’m going to show you how you can quickly and easily style and make changes to the buttons inside the SDF Page Builder inside the SEO Design Framework. To ensure cross-browser compatibility across multiple devices we’ve implemented the mobile-first Twitter Bootstrap front-end framework inside the SEO Design Framework to make the framework responsive as well as to implement the various components, such as CSS, icons, buttons, etc.

You can still append your own custom classes and implement them inside the builders RAW HTML module, but, for the sake of keeping things simple, the video above covers the basics and how you can either use the default bootstrap buttons and their respective hex colors or override them and apply your own fonts, background colors, radius’s, foreground colors and hover states while implementing them in the SDF Page Builder.

If you have the SEO Design Framework installed, you can simply open or download this text file, then copy the shortcodes inside the text file and then paste them into a new page or posts WP editor and publish to see what your color configurations are for each button.

Here’s an example of how our buttons are configured on this site, but, when you use this shortcode on your SDF install it will showcase the colors you’ve  actively selected from the styles section or depending on if you’re using an SDF Skin will determine the hex color states of each respective button.


Once again just:

1. Copy the shortcodes from this file (they are the syntax for the SDF Page Builder) and will only work inside the SEO Design Framework.
2. Create a new page or post.
3. Paste the code into that page.
4. Publish – and you can see your existing button colors.

Stay tuned for additional tips and tutorials for the SEO Design Framework. Until the next post. Over and Out.

About Jeffrey Smith

Jeffrey Smith is the founder of SEO Design Solutions the makers of SEO Ultimate (a popular WordPress All-In-One SEO plugin) and the SEO Design Framework (an optimized SEO Framework with Drag and Drop Design and Stylish Skins).

Jeffrey learned SEO and web design out of necessity back in 1995 which helped in successfully launching a thriving global consumer product development firm. Since that time, he's pioneered innovative solutions for WordPress while intently helping individuals and businesses of all sizes increase rankings, revenue and reach.

You can find over 1000 posts written from Jeffrey on all things SEO over at the SEO Design Solutions Blog

Have thoughts? We'd love to hear from you! Join the conversation below...

One thought on “How to Style Customize and Style Bootstrap Buttons Inside the SEO Design Framework
  1. dickshan says:

    this is very useful for beginners thank you

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.