Material Design is a set of design guidelines created by Google that defines how your website or app should look and behave. It covers things like form interactions, navigation and menus, alerts and notifications, and a whole lot more. WordPress and Material Design go perfectly together, and you don’t even need any coding skills.
WordPress Material Design
There are plenty of WordPress themes you can use to give your whole website a material design look, however, one of the best things about material design is that you can sprinkle in as much or as little as you like. This post outlines 5 easy ways you can add a touch of material design to your WordPress website, without changing your theme.
1. Material Design for Contact Form 7
Of course, the first one on this list is our own plugin – Material Design for Contact Form 7. This plugin allows you to easily add Material Design styles to your Contact Form 7 forms. There is a free version with most functionality included, and a premium version that allows you to customize the colours and fonts, sort your fields into columns, and a few other useful features. We recommend starting by installing the free version via your WordPress plugin screen, trying it out, and upgrading if you feel that you need one or more of the pro features.
2. Material Design addon for the “Styles and Layouts for Gravity Forms” plugin
If you prefer Gravity Forms to Contact Form 7, then there’s the “Styles and Layouts for Gravity Forms” plugin, which has a premium addon for adding Material Design styles. There’s no free version, but it is a very easy option – essentially an on/off switch for changing your whole form to Material Design.
3. MDL Shortcodes
The “MDL Shortcodes” plugin makes it easy to add some of the most useful Material Design components to your WordPress website. This includes buttons, cards, menus, tabs, tooltips, tables and more.
4. Material Design Icons plugin
Did I forget to mention that Google also created a huge set of icons to go with Material Design? The Material Design Icons plugin makes these icons available to your WordPress site, and allows you to add icons via either shortcodes or directly via html.
5. Buttons With Style
One of the things that Material Design introduced to the world was the “Ripple Effect”, where when you click on a button, you see a ripple emerge from the where you clicked. You can read about this effect here, and view a demo of the ripple effect in action here. The “Buttons With Style” plugin has a fairly cheap pro upgrade that includes Material Design buttons that you can add to your site via shortcodes.