{"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>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>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\"><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 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\"><strong>Step:2&nbsp;<\/strong> &nbsp;Copy the above code and Past it.<\/p>\n\n\n\n<p class=\"step\"><strong>Step:3 <\/strong>Click on Update Post and View Post.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img 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\"><strong>Step:1<\/strong> Click on Edit with Elementor where you want to add scroll text.<\/p>\n\n\n\n<p class=\"step\"><strong>Step:2 <\/strong>Search HTML elements<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img 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\"><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 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\"><strong>Step:4<\/strong> Click on Update and Page or Post.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img 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\"><strong>Step:1<\/strong> Go to Divi editor and Insert text modules.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img 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\"><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 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>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\">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&#8230;<\/p>\n","protected":false},"author":5,"featured_media":18950,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","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}]}}