{"id":33846,"date":"2024-05-15T04:55:02","date_gmt":"2024-05-15T02:55:02","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=33846"},"modified":"2024-05-15T04:55:04","modified_gmt":"2024-05-15T02:55:04","slug":"how-to-customize-the-divi-back-to-top-button-without-a-plugin","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/","title":{"rendered":"How to Customize the Divi Back to Top Button Without a Plugin"},"content":{"rendered":"\n<p>In this tutorial, we will learn how to customize the back to top button in Divi without using any external plugins. The back to top button is a useful feature that allows users to quickly return to the top of the page without having to manually scroll.<\/p>\n\n\n\n<p>By default, Divi comes with a simple arrow-shaped back to top button. While this may be sufficient for most websites, some may want to customize it to match their brand or design preferences. Here are some ways you can customize the Divi back to top button.<\/p>\n\n\n<div class=\"gb-container gb-container-c4176480\">\n\n<h3 class=\"wp-block-heading\">Table of Contents<\/h3>\n\n\n\n<ul class=\"listsquare-listsquare-single wp-block-list\">\n<li><a href=\"#enable-button\">How to enable the Divi back to top button<\/a><\/li>\n\n\n\n<li><a href=\"#customize\">How to customize the Divi back to top button<\/a><\/li>\n\n\n\n<li><a href=\"#advanced\">Advanced customization options<\/a><\/li>\n<\/ul>\n\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"enable-button\">How to enable the Divi back to top button<\/h2>\n\n\n\n<p>To enable the &#8220;Back To Top Button&#8221; navigate in WordPress to Divi &gt; Theme Options.<\/p>\n\n\n\n<p>Under the General tab scroll to &#8220;Back To Top Button&#8221; and enable it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"124\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Enable-the-back-to-top-button-in-Divi.jpg\" alt=\"Enable the back to top button in Divi\" class=\"wp-image-33854\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Enable-the-back-to-top-button-in-Divi.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Enable-the-back-to-top-button-in-Divi-380x69.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Enable-the-back-to-top-button-in-Divi-300x55.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Enable-the-back-to-top-button-in-Divi-510x93.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Enable-the-back-to-top-button-in-Divi-190x35.jpg 190w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Enable-the-back-to-top-button-in-Divi-494x90.jpg 494w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Click on &#8220;Save Changes&#8221;.<\/p>\n\n\n\n<p>When you go to the front end of your website and you start scrolling down you will see the back to top button appear in the right-bottom corner.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"370\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/back-to-top-button-appears-when-scrolling-down.jpg\" alt=\"Back to top button appears when scrolling down\" class=\"wp-image-33855\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/back-to-top-button-appears-when-scrolling-down.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/back-to-top-button-appears-when-scrolling-down-380x207.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/back-to-top-button-appears-when-scrolling-down-300x163.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/back-to-top-button-appears-when-scrolling-down-510x278.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/back-to-top-button-appears-when-scrolling-down-110x60.jpg 110w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/back-to-top-button-appears-when-scrolling-down-165x90.jpg 165w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Divi does not have customization options for this button, however with some CSS we can customize the look of this button and in the next chapter I will be explaining how you can do that.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"customize\">How to customize the Divi back to top button<\/h2>\n\n\n\n<p>Below I will provide you with different CSS snippets that you can use to customize the colors and icon of the back to top button.<\/p>\n\n\n\n<p>You can copy and paste these snippets into Divi &gt; Theme Options &gt; CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Change the background color<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.et_pb_scroll_top {\nbackground-color: #ff461a !important;\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Change the icon color<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.et_pb_scroll_top:before {\ncolor: #000;\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Change the icon size<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.et_pb_scroll_top:before {\nfont-size: 40px;\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Add a box shadow<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.et_pb_scroll_top {\nbox-shadow: 0 0 10px 0 rgba(0,0,0,0.4);\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Remove the rounded corners<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.et_pb_scroll_top {\nborder-radius: 0px !important;\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"advanced\">Advanced customization options<\/h2>\n\n\n\n<p>Below I have some advanced techniques for customizing the Divi back to top button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Change the icon type<\/strong><\/h3>\n\n\n\n<p>The default icon is an upside arrow but you can replace that with any other icon.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"152\" height=\"248\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Change-the-icon-code.jpg\" alt=\"Change the icon code\" class=\"wp-image-33856\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Change-the-icon-code.jpg 152w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Change-the-icon-code-37x60.jpg 37w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Change-the-icon-code-55x90.jpg 55w\" sizes=\"(max-width: 152px) 100vw, 152px\" \/><\/figure>\n\n\n\n<p>With the below CSS code, you can replace the default icon.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.et_pb_scroll_top:before {\ncontent: &#039;\\36&#039;;\n}\n<\/pre><\/div>\n\n\n<p>You can replace the icon code with any alternative from this full list of <a href=\"https:\/\/www.markhendriksen.com\/full-list-of-all-divi-icon-codes\/\">Divi icon codes<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Change the icon with text<\/strong><\/h3>\n\n\n\n<p>Instead of an icon, you can also use descriptive text. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"84\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Change-icon-to-text.jpg\" alt=\"Change icon to text\" class=\"wp-image-33857\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Change-icon-to-text.jpg 150w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Change-icon-to-text-107x60.jpg 107w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/figure>\n\n\n\n<p>With this CSS code, you can replace the icon with text plus you can adjust the font-size and padding. <\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.et_pb_scroll_top:before {\ncontent: &#039;BACK TO TOP&#039;;\nfont-family: &quot;Open Sans&quot;, Arial, sans-serif;\ndisplay: flex;\nfont-size: 18px;\npadding: 5px;\n}\n<\/pre><\/div>\n\n\n<p>You can replace the &#8220;BACK TO TOP&#8221; text with anything you like.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Rotate the back to top button (from the above example)<\/strong><\/h3>\n\n\n\n<p>You can rotate the back to top button with the following CSS code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"230\" height=\"249\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/back-to-top-rotated-1.jpg\" alt=\"Back to top rotated\" class=\"wp-image-33858\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/back-to-top-rotated-1.jpg 230w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/back-to-top-rotated-1-55x60.jpg 55w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/back-to-top-rotated-1-83x90.jpg 83w\" sizes=\"(max-width: 230px) 100vw, 230px\" \/><\/figure>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.et_pb_scroll_top:before {\ncontent: &#039;BACK TO TOP&#039;;\nfont-family: &quot;Open Sans&quot;, Arial, sans-serif;\nfont-size: 20px;\ndisplay: flex;\npadding: 5px;\n}\n\n.et_pb_scroll_top.et-pb-icon {\nright: -52px;\nborder-radius: 5px 5px 0px 0px;\n}\n<\/pre><\/div>\n\n\n<p>You might need to play with the right -52px value, depending on the font-size and padding you have chosen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Customizing the Divi back to top button is a simple and easy way to add your own personal touch to your website. With just a few lines of CSS, you can change the background color, icon type, size, and more.<\/p>\n\n\n\n<p>Experiment with different options to create a unique and eye-catching back to top button that matches your website&#8217;s design.<\/p>\n\n\n\n<p>If you have any questions you can leave a comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we will learn how to customize the back to top button in Divi without using any external plugins. The back to top button is a useful feature that allows users to quickly return to the top of the page without having to manually scroll. By default, Divi comes with a simple arrow-shaped [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":33864,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-33846","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Customize the Divi Back to Top Button Without a Plugin<\/title>\n<meta name=\"description\" content=\"In this step-by-step tutorial, we will learn how to customize the Divi back to top button without using any external plugins.\" \/>\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-customize-the-divi-back-to-top-button-without-a-plugin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Customize the Divi Back to Top Button Without a Plugin\" \/>\n<meta property=\"og:description\" content=\"In this step-by-step tutorial, we will learn how to customize the Divi back to top button without using any external plugins.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/\" \/>\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=\"2024-05-15T02:55:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-15T02:55:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-back-to-top-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=\"4 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-customize-the-divi-back-to-top-button-without-a-plugin\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to Customize the Divi Back to Top Button Without a Plugin\",\"datePublished\":\"2024-05-15T02:55:02+00:00\",\"dateModified\":\"2024-05-15T02:55:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/\"},\"wordCount\":527,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-back-to-top-button.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/\",\"name\":\"How to Customize the Divi Back to Top Button Without a Plugin\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-back-to-top-button.jpg\",\"datePublished\":\"2024-05-15T02:55:02+00:00\",\"dateModified\":\"2024-05-15T02:55:04+00:00\",\"description\":\"In this step-by-step tutorial, we will learn how to customize the Divi back to top button without using any external plugins.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-back-to-top-button.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-back-to-top-button.jpg\",\"width\":720,\"height\":400,\"caption\":\"Divi back to top button\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/#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 Customize the Divi Back to Top Button Without a Plugin\"}]},{\"@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 Customize the Divi Back to Top Button Without a Plugin","description":"In this step-by-step tutorial, we will learn how to customize the Divi back to top button without using any external plugins.","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-customize-the-divi-back-to-top-button-without-a-plugin\/","og_locale":"en_US","og_type":"article","og_title":"How to Customize the Divi Back to Top Button Without a Plugin","og_description":"In this step-by-step tutorial, we will learn how to customize the Divi back to top button without using any external plugins.","og_url":"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2024-05-15T02:55:02+00:00","article_modified_time":"2024-05-15T02:55:04+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-back-to-top-button.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to Customize the Divi Back to Top Button Without a Plugin","datePublished":"2024-05-15T02:55:02+00:00","dateModified":"2024-05-15T02:55:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/"},"wordCount":527,"commentCount":0,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-back-to-top-button.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/","url":"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/","name":"How to Customize the Divi Back to Top Button Without a Plugin","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-back-to-top-button.jpg","datePublished":"2024-05-15T02:55:02+00:00","dateModified":"2024-05-15T02:55:04+00:00","description":"In this step-by-step tutorial, we will learn how to customize the Divi back to top button without using any external plugins.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-back-to-top-button.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-back-to-top-button.jpg","width":720,"height":400,"caption":"Divi back to top button"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-customize-the-divi-back-to-top-button-without-a-plugin\/#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 Customize the Divi Back to Top Button Without a Plugin"}]},{"@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\/33846","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=33846"}],"version-history":[{"count":3,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/33846\/revisions"}],"predecessor-version":[{"id":33866,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/33846\/revisions\/33866"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/33864"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=33846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=33846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=33846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}