{"id":10971,"date":"2019-02-18T16:49:57","date_gmt":"2019-02-18T15:49:57","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=10971"},"modified":"2025-04-24T06:39:52","modified_gmt":"2025-04-24T04:39:52","slug":"how-to-make-a-phone-number-clickable-in-divi","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/","title":{"rendered":"How to Make a Phone Number Clickable in Divi"},"content":{"rendered":"\n<p>Just like&nbsp;<a href=\"https:\/\/www.markhendriksen.com\/how-to-create-an-email-link-in-divi\/\">mailto: links<\/a>&nbsp;you can also make a phone number clickable. Most devices will detect phone numbers on your web pages and do the linking for us, but this doesn\u2019t happen all the times.<\/p>\n\n\n\n<p>Here is the snippet for a clickable phone number<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"tel:123456789\">123-456-789&lt;\/a><\/code><\/pre>\n\n\n\n<p>You can also do this for text<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"tel:5554280940\">Call us&lt;\/a><\/code><\/pre>\n\n\n\n<p>If you are using a text <a href=\"https:\/\/www.markhendriksen.com\/divi-modules-guide\/\">module in Divi<\/a> than you can add this snippet in the text tab.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"483\" height=\"317\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2019\/02\/Phone-link-in-text-module.jpg\" alt=\"Phone link in text module\" class=\"wp-image-10973\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/Phone-link-in-text-module.jpg 483w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/Phone-link-in-text-module-380x249.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/Phone-link-in-text-module-300x197.jpg 300w\" sizes=\"(max-width: 483px) 100vw, 483px\" \/><\/figure>\n\n\n\n<h3>Styling phone links<\/h3>\n\n\n\n<p>If you are using Divi and a text module than it is very easy to change the styles. Go to the design tab and then under the text options switch over to the link. Here you can change the styles for the link.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"391\" height=\"491\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2019\/02\/Styling-phone-links.jpg\" alt=\"Styling phone links\" class=\"wp-image-10974\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/Styling-phone-links.jpg 391w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/Styling-phone-links-380x477.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/Styling-phone-links-239x300.jpg 239w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/Styling-phone-links-319x400.jpg 319w\" sizes=\"(max-width: 391px) 100vw, 391px\" \/><\/figure>\n\n\n\n<p>You can also do this with CSS. This pdeudo selector will search out all the Tel: on your website.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>a&#91;href^=\"tel:\"] {\n  color: blue;\n}<\/code><\/pre>\n\n\n\n<h3>Adding microdata<\/h3>\n\n\n\n<p>To let search engines better know that this is a phone number you might want to add some microdata to it. You can find some more examples at&nbsp;<a href=\"https:\/\/schema.org\/telephone\" target=\"_blank\" rel=\"noreferrer noopener\">schema.org<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div itemscope itemtype=\"http:\/\/schema.org\/LocalBusiness\">\n&lt;span itemprop=\"telephone\">&lt;a href=\"tel:+18506484200\">\n850-648-4200&lt;\/a>&lt;\/span>\n&lt;\/div><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":10972,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-10971","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 Make a Phone Number Clickable in Divi | Markhendriksen.com<\/title>\n<meta name=\"description\" content=\"It is very easy to make a phone number clickable on your Divi website? In this tutorial I&#039;ll explain how you can do this and how you can style it.\" \/>\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-make-a-phone-number-clickable-in-divi\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make a Phone Number Clickable in Divi | Markhendriksen.com\" \/>\n<meta property=\"og:description\" content=\"It is very easy to make a phone number clickable on your Divi website? In this tutorial I&#039;ll explain how you can do this and how you can style it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/\" \/>\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-02-18T15:49:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T04:39:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/How-to-create-a-clickable-phone-number.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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to Make a Phone Number Clickable in Divi\",\"datePublished\":\"2019-02-18T15:49:57+00:00\",\"dateModified\":\"2025-04-24T04:39:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/\"},\"wordCount\":180,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/How-to-create-a-clickable-phone-number.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/\",\"name\":\"How to Make a Phone Number Clickable in Divi | Markhendriksen.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/How-to-create-a-clickable-phone-number.jpg\",\"datePublished\":\"2019-02-18T15:49:57+00:00\",\"dateModified\":\"2025-04-24T04:39:52+00:00\",\"description\":\"It is very easy to make a phone number clickable on your Divi website? In this tutorial I'll explain how you can do this and how you can style it.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/How-to-create-a-clickable-phone-number.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/How-to-create-a-clickable-phone-number.jpg\",\"width\":720,\"height\":400,\"caption\":\"How to create a clickable phone number\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/#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 Make a Phone Number Clickable in Divi\"}]},{\"@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 Make a Phone Number Clickable in Divi | Markhendriksen.com","description":"It is very easy to make a phone number clickable on your Divi website? In this tutorial I'll explain how you can do this and how you can style it.","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-make-a-phone-number-clickable-in-divi\/","og_locale":"en_US","og_type":"article","og_title":"How to Make a Phone Number Clickable in Divi | Markhendriksen.com","og_description":"It is very easy to make a phone number clickable on your Divi website? In this tutorial I'll explain how you can do this and how you can style it.","og_url":"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2019-02-18T15:49:57+00:00","article_modified_time":"2025-04-24T04:39:52+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/How-to-create-a-clickable-phone-number.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to Make a Phone Number Clickable in Divi","datePublished":"2019-02-18T15:49:57+00:00","dateModified":"2025-04-24T04:39:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/"},"wordCount":180,"commentCount":8,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/How-to-create-a-clickable-phone-number.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/","url":"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/","name":"How to Make a Phone Number Clickable in Divi | Markhendriksen.com","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/How-to-create-a-clickable-phone-number.jpg","datePublished":"2019-02-18T15:49:57+00:00","dateModified":"2025-04-24T04:39:52+00:00","description":"It is very easy to make a phone number clickable on your Divi website? In this tutorial I'll explain how you can do this and how you can style it.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/How-to-create-a-clickable-phone-number.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/02\/How-to-create-a-clickable-phone-number.jpg","width":720,"height":400,"caption":"How to create a clickable phone number"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-phone-number-clickable-in-divi\/#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 Make a Phone Number Clickable in Divi"}]},{"@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\/10971","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=10971"}],"version-history":[{"count":3,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/10971\/revisions"}],"predecessor-version":[{"id":35650,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/10971\/revisions\/35650"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/10972"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=10971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=10971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=10971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}