{"id":1879,"date":"2021-06-20T13:58:53","date_gmt":"2021-06-20T13:58:53","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1879"},"modified":"2023-02-22T09:34:07","modified_gmt":"2023-02-22T09:34:07","slug":"how-to-design-effective-buttons-for-wordpress-monday-masterclass","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/","title":{"rendered":"How to Design Effective Buttons for WordPress &#8211; Monday Masterclass"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1879\" class=\"elementor elementor-1879\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-23e5b71b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"23e5b71b\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6d11810e\" data-id=\"6d11810e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4ccf86eb elementor-widget elementor-widget-video\" data-id=\"4ccf86eb\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=ZMasrRRj-38&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-65763a88 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"65763a88\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1fd0daef\" data-id=\"1fd0daef\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-46bb097e elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"46bb097e\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1181\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1181\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1182\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1182\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1181\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1181\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1181\" tabindex=\"0\" hidden=\"false\"><p>In this Monday MasterClass, we look at designing effective buttons for WordPress pages, going beyond our basic understanding of what they are, what they can do, and what they should look like. We explore the versatility of buttons, in both design and function and introduce \u201cThe Plus Addons\u201d, a wonderful plugin designed to integrate and expand the variety of options in Elementor even further.\u00a0<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1182\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1182\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1182\" tabindex=\"0\" hidden=\"hidden\"><p>this week we&#8217;re tackling toggles<br \/>surveying switches categorizing clickers<br \/>and bearing the light upon the subject<br \/>of buttons yes in this Monday master<br \/>class we&#8217;re pushing buttons beyond our<br \/>basic understanding of what they are<br \/>what they can do and what they should<br \/>look like and in fact we&#8217;ll be sharing a<br \/>fantastic resource for budding designs<br \/>that work perfectly with elemental you<br \/>press the button we do the rest was the<br \/>famous advertising slogan that George<br \/>Eastman founder of Kodak coined back in<br \/>and a half later using virtual buttons<br \/>to do exactly the same thing now buttons<br \/>are one of those seemingly simple<br \/>elements on a webpage that are so<br \/>inherent of its structure and design we<br \/>might be taking them for granted and I<br \/>say seemingly because a well-placed<br \/>well-designed button is one that draws<br \/>us to interact with it so subtly that we<br \/>never even stop to think how someone is<br \/>deliberately luring us to do so in the<br \/>our daily life as peanut butter is to my<br \/>daily diet in the real world buttons are<br \/>there to turn appliances on and off and<br \/>activate and deactivate functions of<br \/>that appliance by pushing a button<br \/>we the users are consciously confirming<br \/>an action yes I would like this kettle<br \/>to boil now yes I would like this light<br \/>to be off now so naturally this<br \/>functionality was adopted by engineers<br \/>behind the very first computers and some<br \/>of you may remember way back in the<br \/>early days of personal computers how we<br \/>would hit the return or Enter key to<br \/>acknowledge that we indeed wanted our<br \/>system to run our commands now later in<br \/>the initial days of the internet once<br \/>web pages have begun appearing we used<br \/>hyperlinks then when infrastructure and<br \/>hardware expanded enough to allow us to<br \/>use images we would include an<br \/>illustration that we would click or tap<br \/>on to activate that command practically<br \/>imitating the functionality of physical<br \/>buttons in the real world the earliest<br \/>and some might say the most primitive<br \/>form<br \/>of digital button is the text button<br \/>visually a text button is nothing more<br \/>than a length of text from a word to a<br \/>short sentence it resembles and<br \/>functions much the same way as a<br \/>hyperlink<br \/>this style of button can appear anywhere<br \/>on the page such as the familiar read<br \/>more button we&#8217;re used to seeing at the<br \/>end of a paragraph or a block of content<br \/>though they&#8217;re probably more common in<br \/>headers and footers as buttons of a site<br \/>menu in fact there are several do&#8217;s and<br \/>dont&#8217;s that we learnt in our last master<br \/>class on designing menus that also apply<br \/>to buttons so regardless of what style<br \/>of button you&#8217;re designing the text must<br \/>be readable as a rule of thumb keep the<br \/>text of the button the same size or<br \/>slightly larger than the body or<br \/>paragraph text also try to avoid<br \/>convoluted fonts such as cursive and<br \/>handwritten fonts that are difficult for<br \/>non-native English speakers to recognize<br \/>beyond recognizing the text of a button<br \/>it&#8217;s also important to make sure that<br \/>our buttons signify to the user that<br \/>there are something to be clicked or<br \/>tapped on I know that this might seem<br \/>somewhat rhetorical to many of us but<br \/>making sure that an element is overtly<br \/>perceived as clickable is not as obvious<br \/>to all web builders out there in the<br \/>evolution of the digital button the next<br \/>stage opened up many ways for us to do<br \/>this of course I am referring to the<br \/>image or icon buttons these are buttons<br \/>that include a graphic attribute that<br \/>sets it apart from other elements on the<br \/>page and we can do this by using a block<br \/>of contrasting color that not only<br \/>contrasts the environment surrounding<br \/>the button but also creates an internal<br \/>contrast with the text image or icon<br \/>inside the button elements you may<br \/>recall that we use this exact style of<br \/>button to trigger a pop-up with a menu<br \/>in the travel and tour template kit<br \/>combining an icon and a modicum of text<br \/>is usually enough to imply that this<br \/>element was designed to be clicked on<br \/>nonetheless adding digital graphic<br \/>effects such as drop shadows bevels<br \/>gradients at set<br \/>are welcome solutions to be on making<br \/>the buttons stand out these effects are<br \/>used to make the button appear more<br \/>realistic a design trend that was<br \/>popularized my Apple years ago for most<br \/>designers this trend is known as<br \/>skeuomorphism skeuomorphism is when we<br \/>deliberately design a virtual element to<br \/>look very much like its counterpart in<br \/>reality and doing this triggers<br \/>familiarity among the users making it<br \/>easier for them to understand the user<br \/>interface and hence more likely to react<br \/>and click or tap on the buttons over the<br \/>past few weeks there&#8217;s been lots of buzz<br \/>to suggest that skeuomorphism is making<br \/>a comeback and some are calling this new<br \/>brand of realism neo morphism now<br \/>personally I think it&#8217;s still too early<br \/>to say we&#8217;re barely through January but<br \/>I&#8217;m very excited to see where these<br \/>adventurous designers take this idea now<br \/>notice by the way that the shape of the<br \/>buttons that we&#8217;re looking at are either<br \/>circular squared or rounded squares and<br \/>oblongs we&#8217;d be hard-pressed to find<br \/>buttons in complex non symmetrical<br \/>shapes an octagon or a pentagram might<br \/>look great but the chances are that few<br \/>people besides ourselves will recognize<br \/>them as a button now you may recall the<br \/>trouble that Microsoft had when they<br \/>used the office logo as a button on<br \/>their innovative ribbon most people<br \/>assume that it was there to look pretty<br \/>and had no function at all and the<br \/>button affectionately known as the pizza<br \/>button was in fact supposed to give us<br \/>access to the software&#8217;s fundamental<br \/>functions such as open and new documents<br \/>save a document settings etc if in our<br \/>simple shaped button we&#8217;re combining<br \/>icons and text we want to make sure that<br \/>the icon is placed logically with<br \/>regards to the action that we want the<br \/>user to perform for example on a button<br \/>that takes us to the next page we want<br \/>an arrow icon to appear after the text<br \/>as if to say click here then this will<br \/>occur<br \/>if we&#8217;re designing a button to assist<br \/>users in returning to the top of the<br \/>page the upward pointing arrow should<br \/>appear above the text now whether you&#8217;re<br \/>using text icons or both the last thing<br \/>that we want to do is cram our content<br \/>into the button surface now some suggest<br \/>leaving a border of about 25 pixels<br \/>surrounding the buttons label but I find<br \/>that a great rule of thumb is to leave a<br \/>clear space around the content of the<br \/>button at the height and width of a<br \/>character or icon that we are using as<br \/>for the size of an icon that we place<br \/>alongside the text again keeping the<br \/>icon the same size as the text or a<br \/>little larger is probably the best way<br \/>to go as for the size of the button<br \/>itself<br \/>I suppose the toughest decisions are for<br \/>mobile screens and this is true<br \/>especially if your design process or<br \/>workflow is mobile first and once we<br \/>figured out the size of our button for<br \/>responsive view we can always scale it<br \/>up for our desktop views and there are<br \/>of course recommendations from the<br \/>industry giants Apple suggests that for<br \/>mobile designs the main buttons or<br \/>call-to-action buttons should be at<br \/>least 44 by 44 pixels on the other hand<br \/>microsoft recommends using slightly<br \/>smaller buttons of 34 by 26 pixels the<br \/>position of a button is also very<br \/>important now traditional and standard<br \/>design places the buttons within the<br \/>errors that are easy for us to scan with<br \/>our eyes the main blocks of content<br \/>along the margins or the corners of the<br \/>screen remember that we need to make the<br \/>user interaction enjoyable and a lot of<br \/>that boils down to the ease of<br \/>navigation that needs to be simple and<br \/>intuitive the users eyes should follow<br \/>the path that we&#8217;ve laid out in our<br \/>design without getting distracted<br \/>we should also establish a visual<br \/>hierarchy for the user to understand<br \/>what parts are more important and skip<br \/>over the rest if our buttons action<br \/>takes the user to another page if we<br \/>have say a PayPal button that sends us<br \/>to a PayPal login page we<br \/>want to consider whether or not we want<br \/>this to open in a new and separate tab<br \/>of course this depends on the predicted<br \/>behavior of our target audience and how<br \/>long this process will take before they<br \/>return to our page we can determine this<br \/>with all of our buttons in Elementor by<br \/>going to the buttons content settings<br \/>and next to the link box we&#8217;ll click on<br \/>the settings or cog icon that will bring<br \/>up the options to open the link in a new<br \/>window or add a nofollow to this action<br \/>now we can all agree that not all<br \/>buttons should be so obvious that they<br \/>dominate the focus of a page and this<br \/>brings us to another aspect that we<br \/>should consider whenever we design<br \/>buttons the buttons purpose and its<br \/>importance now if we&#8217;re designing a<br \/>landing page for example our page will<br \/>be constructed so to draw the users to a<br \/>focal point and there will place a call<br \/>to action today we tend to represent our<br \/>call to action or CTA as a button so<br \/>that we get that confirmation from the<br \/>user that we spoke of earlier in this<br \/>case the button is of high importance so<br \/>it should stand out as something special<br \/>like a main attraction on the stage to<br \/>entice the curious and interested user<br \/>to interact with it<br \/>a great style of button that designers<br \/>often employ for this purpose is the<br \/>floating action button or FA B these are<br \/>buttons that are defined by Google as<br \/>buttons that are intended to perform the<br \/>primary or the most common actions on<br \/>the screen this could be an action on<br \/>the current screen or an action taking<br \/>us to a whole new screen now typically<br \/>they appear as a circular shape floating<br \/>with an icon at its center above all of<br \/>the content on the page over one of the<br \/>sides or in one of the corners of the<br \/>screen there are three types of FA be<br \/>the regular mini and extended which<br \/>provides an additional selection of<br \/>popular options on the app now these are<br \/>very common in responsive design as they<br \/>convey the purpose instantly and are<br \/>very easy to see and tap on a mobile<br \/>screen<br \/>the sooner the user recognizes in<br \/>elements as a button<br \/>the sooner they understand how to<br \/>navigate the page and interact with it<br \/>and the lack of clarity in this sense<br \/>will leave an impatient user frustrated<br \/>enough just to leave the page altogether<br \/>a popular and simple graphic trick that<br \/>we can employ to avoid this is by adding<br \/>animation or hover effects changing the<br \/>color the font or the text perhaps<br \/>hovering in some cases will trigger the<br \/>button to shake or jiggle these help to<br \/>highlight the fact that there is<br \/>something different about this element<br \/>inviting the curious users to click on<br \/>it and find out what happens when they<br \/>do<br \/>but what if for example we&#8217;re designing<br \/>an about page or a blog page where our<br \/>goal will be exactly the opposite we&#8217;ll<br \/>want to keep users on the page to take<br \/>in the content so in cases such as these<br \/>a big flashy button drawing all the<br \/>attention and focus is the last thing<br \/>that we want instead we&#8217;ll use buttons<br \/>with a subtle design so that they don&#8217;t<br \/>stand out against the background too<br \/>much because they are of secondary<br \/>importance a style of button that we<br \/>could use to achieve this would of<br \/>course be the ghost button these are<br \/>basically text buttons with little or no<br \/>background and an outline surrounding it<br \/>they are elegantly subtle and as such<br \/>they tell the user that they&#8217;re not the<br \/>primary activity of the page these are<br \/>buttons that we use when we want the<br \/>users to be aware of them in the back of<br \/>their mind throughout their experience<br \/>of the page there could be buttons to<br \/>take the user back to the top of the<br \/>page for example in elements or we can<br \/>very easily make all of these buttons<br \/>sticky buttons that follow the user down<br \/>the page as they browse through the<br \/>content and this way they&#8217;ll always be<br \/>right there on the screen ready to be<br \/>used like a chatbot button buttons can<br \/>cater to many types of purpose all of<br \/>which could be classified into two<br \/>groups service that includes help<br \/>buttons login buttons chat bot buttons<br \/>even cookie notifications and in some<br \/>cases download buttons and<br \/>we have the sales category where we&#8217;ll<br \/>find social share buttons subscription<br \/>buttons buy ads a card etc and just<br \/>hearing those titles we can already get<br \/>an idea of the level of importance<br \/>associated with each one and it&#8217;s this<br \/>way of thinking that we need to utilize<br \/>when we sit down to design pages and the<br \/>buttons that we&#8217;ll be including and if<br \/>we&#8217;re already speaking of buttons in<br \/>plural how many buttons should we use<br \/>per page<br \/>well most professionals try to limit the<br \/>number of attention hogging buttons to<br \/>one but no more than two per page of<br \/>course you can always add several more<br \/>buttons of a subtle design as needed but<br \/>you don&#8217;t want to have too many as this<br \/>tends to confuse and overwhelm some<br \/>users also remember that we&#8217;re designing<br \/>web pages and we don&#8217;t want them to look<br \/>like the control panels of a passenger<br \/>jet airliner or the sound console of a<br \/>big-name recording studio if you<br \/>absolutely need to use a large amount of<br \/>buttons if let&#8217;s say we need to make a<br \/>registration or order form with many<br \/>binary queries or yes\/no questions we<br \/>can use a toggle or switch button these<br \/>are very straightforward and easy to use<br \/>an equally easy to add an elemental so<br \/>yes the design of the button is as<br \/>important as its functionality equally<br \/>important if not more so is how the<br \/>design of our button has to complement<br \/>and correspond with the overall design<br \/>of the page yes every element that we<br \/>place on our pages should remain<br \/>consistent and loyal to our design theme<br \/>and ideas to ensure that we can always<br \/>create the perfect buttons for our page<br \/>we&#8217;d like to share a site that is an<br \/>Aladdin&#8217;s Cave of designs for buttons<br \/>all of which work perfectly with<br \/>Elemental the plus is a treasure trove<br \/>where we can find all the types of<br \/>buttons that we just discussed some with<br \/>shading some with gradients many also<br \/>include animation and hover effects and<br \/>here we can also see a lovely example of<br \/>a skeuomorphic button mimicking a<br \/>realistic button<br \/>we install the plus plugin through the<br \/>wordpress dashboard the same as we would<br \/>any other plugin once we&#8217;ve installed it<br \/>will activate it then when we open a<br \/>page to edit with Elementor and we go to<br \/>the widget library in the left-hand<br \/>panel we&#8217;ll find a series of drop-down<br \/>lists of all the plus widgets that are<br \/>available obviously some are only<br \/>available to Plus Premium users but<br \/>whether or not you want to get the pro<br \/>version depends on what you need for<br \/>each individual site<br \/>so this week we reviewed the buttons<br \/>beginning with the basic understanding<br \/>of what they are what they do why we<br \/>need them then we went beyond and looked<br \/>at various designs and styles and how<br \/>they affect the users that we are trying<br \/>to bring to our sites more importantly<br \/>we went through a lot of great rules of<br \/>thumb do&#8217;s and don&#8217;ts and told you about<br \/>the plus a fantastic resource for button<br \/>designs that work perfectly with<br \/>anything that we create with elemental<br \/>in fact this masterclass we&#8217;ve gone over<br \/>everything that we could possibly need<br \/>to create the kind of buttons that the<br \/>late Steve Jobs would refer to as<br \/>buttons that look so good you&#8217;ll want to<br \/>lick&#8217;em as always if you have any<br \/>further advice tips or insight that<br \/>could help other users with their<br \/>designs please share it in the comments<br \/>below and if you&#8217;d like to share<br \/>examples of buttons that you&#8217;ve designed<br \/>or that have inspired you this is the<br \/>place and if you have any criticism we<br \/>are equally interested in your thoughts<br \/>and if you&#8217;ve enjoyed this masterclass<br \/>and you found it helpful or inspiring<br \/>make sure that you click on the<br \/>subscribe button and tap that bell so<br \/>that you don&#8217;t miss out on our next<br \/>Monday masterclass because after all our<br \/>goal is to be the best at helping others<br \/>excel at their craft thanks for watching<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this Monday MasterClass, we look at designing effective buttons for WordPress pages, going beyond our basic understanding of what they are, what they can do, and what they should look like. We explore the versatility of buttons, in both design and function and introduce \u201cThe Plus Addons\u201d, a wonderful plugin designed [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4212,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-1879","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Design Effective Buttons for WordPress - Monday Masterclass - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Design Effective Buttons for WordPress - Monday Masterclass - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this Monday MasterClass, we look at designing effective buttons for WordPress pages, going beyond our basic understanding of what they are, what they can do, and what they should look like. We explore the versatility of buttons, in both design and function and introduce \u201cThe Plus Addons\u201d, a wonderful plugin designed [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-20T13:58:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:34:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Monday-Master-Class-3.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1083\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Design Effective Buttons for WordPress - Monday Masterclass - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/","og_locale":"en_US","og_type":"article","og_title":"How to Design Effective Buttons for WordPress - Monday Masterclass - Academy","og_description":"Overview Transcript Overview In this Monday MasterClass, we look at designing effective buttons for WordPress pages, going beyond our basic understanding of what they are, what they can do, and what they should look like. We explore the versatility of buttons, in both design and function and introduce \u201cThe Plus Addons\u201d, a wonderful plugin designed [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/","og_site_name":"Academy","article_published_time":"2021-06-20T13:58:53+00:00","article_modified_time":"2023-02-22T09:34:07+00:00","og_image":[{"width":1920,"height":1083,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Monday-Master-Class-3.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Design Effective Buttons for WordPress &#8211; Monday Masterclass","datePublished":"2021-06-20T13:58:53+00:00","dateModified":"2023-02-22T09:34:07+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/"},"wordCount":3007,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Monday-Master-Class-3.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/","url":"https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/","name":"How to Design Effective Buttons for WordPress - Monday Masterclass - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Monday-Master-Class-3.jpg","datePublished":"2021-06-20T13:58:53+00:00","dateModified":"2023-02-22T09:34:07+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Monday-Master-Class-3.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Monday-Master-Class-3.jpg","width":1920,"height":1083},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-design-effective-buttons-for-wordpress-monday-masterclass\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Design Effective Buttons for WordPress &#8211; Monday Masterclass"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1879","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=1879"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1879\/revisions"}],"predecessor-version":[{"id":9554,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1879\/revisions\/9554"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4212"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1879"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1879"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1879"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}