{"id":18947,"date":"2024-04-13T12:37:28","date_gmt":"2024-04-13T07:37:28","guid":{"rendered":"https:\/\/mcstarters.com\/?p=18947"},"modified":"2024-04-13T12:37:31","modified_gmt":"2024-04-13T07:37:31","slug":"add-scrolling-text-in-wordpress-elementor-divi","status":"publish","type":"post","link":"https:\/\/mcstarters.com\/blog\/add-scrolling-text-in-wordpress-elementor-divi\/","title":{"rendered":"Add scrolling text in WordPress, Elementor, Divi"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In this post, i will show you how to add scrolling text in WordPress, Elementor, Divi.&nbsp;Scrolling text code is really useful if you want to engage readers with snippets of content. We mostly use this code for the notification bar above or below the header.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We will also show you how to add scrolling text in Elementor and Divi. It is the step by step guide with screenshots.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add Scrolling text to WordPress<\/li>\n\n\n\n<li>Scrolling text to Elementor<\/li>\n\n\n\n<li>Scrolling text to Divi<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Copy Below Code:<\/h2>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>&lt;marquee&gt;This is a sample scrolling text that has scrolls in the upper direction. &lt;\/marquee&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Add scrolling text in WordPress<\/h2>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step: 1<\/strong>&nbsp;Go to WordPress default editor. Click on plus \u2795 Icon and Search HTML. Now click on the custom HTML block.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" decoding=\"async\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/10\/WordPress-Default-Editor.jpg\" alt=\"WordPress Default Editor\" title=\"\"><\/figure>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step:2&nbsp;<\/strong> &nbsp;Copy the above code and Past it.<\/p>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step:3 <\/strong>Click on Update Post and View Post.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" decoding=\"async\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/10\/custom-html-block-editor.jpg\" alt=\"custom html block editor\" title=\"\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Scrolling text to Elementor<\/h2>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step:1<\/strong> Click on Edit with Elementor where you want to add scroll text.<\/p>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step:2 <\/strong>Search HTML elements<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" decoding=\"async\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/10\/Elementor-html-editor-for-scrolling-text.jpg\" alt=\"Elementor html editor for scrolling text\" title=\"\"><\/figure>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step:3<\/strong> Now drag HTML elements into Elementor. Copy the above code and paste it into the HTML editor.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" decoding=\"async\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/10\/add-custom-html-into-Elementor.jpg\" alt=\"add custom html into Elementor\" title=\"\"><\/figure>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step:4<\/strong> Click on Update and Page or Post.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" decoding=\"async\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/10\/add-scroll-text-in-Elementor.jpg\" alt=\"add scroll text in Elementor\" title=\"\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Scrolling text to Divi<\/h2>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step:1<\/strong> Go to Divi editor and Insert text modules.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" decoding=\"async\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/10\/Divi-Editor.jpg\" alt=\"Add Scrolling text to Divi\" title=\"\"><\/figure>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step:2 <\/strong>Copy code above, Paste here<strong>,<\/strong> and click on Save.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" decoding=\"async\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/10\/Divi-Text-Module.jpg\" alt=\"Add Scrolling text to Divi\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I hope this post will help you how to add <strong><a href=\"https:\/\/www.w3schools.in\/html-tutorial\/marquee-tag\/\" rel=\"nofollow noopener\" target=\"_blank\">&lt;marquee&gt;<\/a><\/strong>&nbsp;code to your WordPress website.<\/p>\n\n\n\n<p class=\"bg-blue wp-block-paragraph\">You Might Also Like: <a href=\"https:\/\/mcstarters.com\/services\/wordpress-web-design-services\/\" data-type=\"URL\" data-id=\"https:\/\/mcstarters.com\/services\/wordpress-web-design-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">affordable responsive WordPress website design<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions<\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1712393142358\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do I create a marquee in Divi?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Create a marquee effect in Divi with CSS animation, setting overflow to hidden and using translateX in the keyframes.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1712393168466\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do I add a scroll bar to my Elementor?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Apply custom CSS to add a scroll bar to Elementor elements by setting overflow-y to scroll.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1712393186920\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do I add scrolling text in WordPress?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Add scrolling text in WordPress using an HTML marquee tag within an HTML block or custom HTML widget.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1712393210538\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do I make text scroll in Elementor?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>To make text scroll in Elementor, use custom CSS with animation for overflow and translates.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>In this post, i will show you how to add scrolling text in WordPress, Elementor, Divi.&nbsp;Scrolling text code is really useful if you want to engage readers with snippets of content. We mostly use this code for the notification bar above or below the header. We will also show you how to add scrolling text [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":18950,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,6,4],"tags":[413,414],"class_list":["post-18947","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-divi","category-elementor","tag-scrolling-text","tag-wordpress-elementor"],"_links":{"self":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/18947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/comments?post=18947"}],"version-history":[{"count":0,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/18947\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media\/18950"}],"wp:attachment":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media?parent=18947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/categories?post=18947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/tags?post=18947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}