{"id":12837,"date":"2019-08-07T14:28:41","date_gmt":"2019-08-07T12:28:41","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=12837"},"modified":"2025-04-24T06:39:56","modified_gmt":"2025-04-24T04:39:56","slug":"how-to-use-and-style-the-divi-shortcode-button","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/","title":{"rendered":"How to Use and Style the Divi Shortcode Button"},"content":{"rendered":"\n

Maybe you didn\u2019t even realize but Divi still does have some shortcodes that you can use, and one of them is the Divi button shortcode.  You can use these shortcodes from within modules with a text field. I use it from time to time for the blurb module. The blurb module doesn\u2019t have an option for a button. But with the button shortcode, you can still add a button.<\/p>\n\n\n\n

In this tutorial, I will be explaining how you can add a button with a shortcode and how you can style this button.<\/p>\n\n\n

\n\nView Demo<\/a>\n\n<\/div>\n\n\n
<\/div>\n\n\n\n

Step 1: Adding the Divi shortcode button<\/h2>\n\n\n\n

We are going to add the button shortcode to a blurb module. You cannot do this from the visual builder the option isn\u2019t there anymore. You need to edit your page from the backend with the classic editor.<\/p>\n\n\n\n

In the blurb module text field, you will find the option Add ET Button.<\/p>\n\n\n\n

\"Adding<\/figure>\n\n\n\n

In the popup that you get you can fill in a link for your button, you can set a predefined size and color. In the content field, you can fill in the button text, for example, Read more.<\/p>\n\n\n\n

In this tutorial we are going to style the button with CSS, for that the settings for type and color need to be:<\/p>\n\n\n\n

Type: Small
Color: Blue<\/p>\n\n\n\n

\"shortcode<\/figure>\n\n\n\n

Add the following line after the URL:<\/p>\n\n\n\n

class=\"short_code\"<\/code><\/pre>\n\n\n\n
\"Add<\/figure>\n\n\n\n
Step 2: Styling the shortcode button with CSS<\/h2>\n\n\n\n
Add the following CSS in Divi > Theme Options > CSS<\/p>\n\n\n\n
.smallblueshort_code {\n    background-color: #7127a9;\n    color: #fff;\n    border-radius: 5px !important;\n    padding: 7px 20px !important;\n    font-size: 14px !important;\n}\n\n.smallblueshort_code:hover {\n    background-color: #4c1675;\n}<\/code><\/pre>\n\n\n\n
In line 2 you can change the background color.
In line 3 you can change the text color.
In line 4 you can change the border radius size.
In line 5 you can change the padding.
In line 6 you can change the font-size.
In line 10 you can change the background color on hover.<\/p>\n\n\n\n
And that is how you can use a shortcode button in Divi. If you want to create some creative button then check out my tutorial \u201cHow to create a beautiful Divi button<\/a>\u201c<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":12839,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-12837","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-tutorials"],"yoast_head":"\nHow to Use and Style the Divi Shortcode Button | MarkHendriksen.com<\/title>\n<meta name=\"description\" content=\"I will show you how you can style the Divi shortcode button. You can place the shortcode button on any module with a text field.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use and Style the Divi Shortcode Button | MarkHendriksen.com\" \/>\n<meta property=\"og:description\" content=\"I will show you how you can style the Divi shortcode button. You can place the shortcode button on any module with a text field.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/\" \/>\n<meta property=\"og:site_name\" content=\"Mark Hendriksen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/madebymarkhendriksen\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-07T12:28:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T04:39:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-use-and-style-the-Divi-shortcode-button.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mark Hendriksen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Hendriksen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to Use and Style the Divi Shortcode Button\",\"datePublished\":\"2019-08-07T12:28:41+00:00\",\"dateModified\":\"2025-04-24T04:39:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/\"},\"wordCount\":335,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-use-and-style-the-Divi-shortcode-button.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/\",\"name\":\"How to Use and Style the Divi Shortcode Button | MarkHendriksen.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-use-and-style-the-Divi-shortcode-button.jpg\",\"datePublished\":\"2019-08-07T12:28:41+00:00\",\"dateModified\":\"2025-04-24T04:39:56+00:00\",\"description\":\"I will show you how you can style the Divi shortcode button. You can place the shortcode button on any module with a text field.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-use-and-style-the-Divi-shortcode-button.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-use-and-style-the-Divi-shortcode-button.jpg\",\"width\":720,\"height\":400,\"caption\":\"How to use and style the Divi shortcode button\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markhendriksen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Divi tutorials\",\"item\":\"https:\/\/www.markhendriksen.com\/divi-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use and Style the Divi Shortcode Button\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markhendriksen.com\/#website\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"name\":\"Mark Hendriksen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markhendriksen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\",\"name\":\"Mark Hendriksen\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"width\":354,\"height\":40,\"caption\":\"Mark Hendriksen\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/madebymarkhendriksen\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\",\"name\":\"Mark Hendriksen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"caption\":\"Mark Hendriksen\"},\"url\":\"https:\/\/www.markhendriksen.com\/author\/twopixels\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use and Style the Divi Shortcode Button | MarkHendriksen.com","description":"I will show you how you can style the Divi shortcode button. You can place the shortcode button on any module with a text field.","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:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/","og_locale":"en_US","og_type":"article","og_title":"How to Use and Style the Divi Shortcode Button | MarkHendriksen.com","og_description":"I will show you how you can style the Divi shortcode button. You can place the shortcode button on any module with a text field.","og_url":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2019-08-07T12:28:41+00:00","article_modified_time":"2025-04-24T04:39:56+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-use-and-style-the-Divi-shortcode-button.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to Use and Style the Divi Shortcode Button","datePublished":"2019-08-07T12:28:41+00:00","dateModified":"2025-04-24T04:39:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/"},"wordCount":335,"commentCount":0,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-use-and-style-the-Divi-shortcode-button.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/","url":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/","name":"How to Use and Style the Divi Shortcode Button | MarkHendriksen.com","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-use-and-style-the-Divi-shortcode-button.jpg","datePublished":"2019-08-07T12:28:41+00:00","dateModified":"2025-04-24T04:39:56+00:00","description":"I will show you how you can style the Divi shortcode button. You can place the shortcode button on any module with a text field.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-use-and-style-the-Divi-shortcode-button.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-use-and-style-the-Divi-shortcode-button.jpg","width":720,"height":400,"caption":"How to use and style the Divi shortcode button"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-shortcode-button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markhendriksen.com\/"},{"@type":"ListItem","position":2,"name":"Divi tutorials","item":"https:\/\/www.markhendriksen.com\/divi-tutorials\/"},{"@type":"ListItem","position":3,"name":"How to Use and Style the Divi Shortcode Button"}]},{"@type":"WebSite","@id":"https:\/\/www.markhendriksen.com\/#website","url":"https:\/\/www.markhendriksen.com\/","name":"Mark Hendriksen","description":"","publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markhendriksen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.markhendriksen.com\/#organization","name":"Mark Hendriksen","url":"https:\/\/www.markhendriksen.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","width":354,"height":40,"caption":"Mark Hendriksen"},"image":{"@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/madebymarkhendriksen"]},{"@type":"Person","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765","name":"Mark Hendriksen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","caption":"Mark Hendriksen"},"url":"https:\/\/www.markhendriksen.com\/author\/twopixels\/"}]}},"_links":{"self":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/12837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/comments?post=12837"}],"version-history":[{"count":2,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/12837\/revisions"}],"predecessor-version":[{"id":35664,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/12837\/revisions\/35664"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/12839"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=12837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=12837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=12837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}