{"id":21392,"date":"2025-05-08T15:01:40","date_gmt":"2025-05-08T18:01:40","guid":{"rendered":"https:\/\/packdesites.com\/?post_type=product&#038;p=21392"},"modified":"2025-05-08T15:04:38","modified_gmt":"2025-05-08T18:04:38","slug":"text-effect-with-animated-fill-and-outline","status":"publish","type":"product","link":"https:\/\/packdesites.com\/en\/product\/text-effect-with-animated-fill-and-outline\/","title":{"rendered":"Animated Fill and Outline Text Effect"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Animated Fill Text Effect<\/h2>\n\n\n\n<p>This widget creates a stunning visual effect of text being <strong>\u201cfilled\u201d<\/strong> by a white band animation that gradually reveals the letters, keeping a clear border visible all around the letters.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Features:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Subtle white border around the letters with <code>-webkit-text-stroke<\/code>.<\/li>\n\n\n\n<li>Animated fill with configurable linear gradient.<\/li>\n\n\n\n<li>Compatible with title widgets (e.g. Elementor).<\/li>\n\n\n\n<li>Support for <code>backdrop-filter<\/code> for background blur.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use the Effect<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a <strong>title widget<\/strong> in your constructor (e.g. Elementor).<\/li>\n\n\n\n<li>Enter the same text that will be used in the animation (e.g. <em>\u201cSed eiusmod sed vivamus consectetur\u201d<\/em>).<\/li>\n\n\n\n<li>Insert CSS code into the panel <strong>Custom CSS<\/strong> of the widget or theme.<\/li>\n\n\n\n<li>Replace <code>selector<\/code> by the actual selector of your title, as <code>.elementor-heading-title<\/code> or <code>#my-title<\/code>.<\/li>\n\n\n\n<li>Set the text inside the <code>content<\/code> and adjust the border, fill and background colors as per your need.<\/li>\n\n\n\n<li>If there are conflicts with the color of the original text, try <strong>remove default color<\/strong> from the widget in the settings.<\/li>\n<\/ol>","protected":false},"excerpt":{"rendered":"<p>Animated Fill Text Effect This widget creates a stunning visual effect of text being &quot;filled&quot; by a white band animation that gradually reveals the letters, while maintaining a clear border visible around the entire outline of the letters. Features: How to Use the Effect<\/p>","protected":false},"featured_media":21393,"comment_status":"open","ping_status":"closed","template":"","meta":{"_jf_limit_responses":"","iawp_total_views":24},"product_brand":[],"product_cat":[75,76],"product_tag":[91,49],"class_list":{"0":"post-21392","1":"product","2":"type-product","3":"status-publish","4":"has-post-thumbnail","6":"product_cat-codigos-personalizados","7":"product_cat-css","8":"product_tag-business","9":"product_tag-starter","11":"first","12":"instock","13":"downloadable","14":"virtual","15":"purchasable","16":"product-type-simple"},"_links":{"self":[{"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/product\/21392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/product"}],"about":[{"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/types\/product"}],"replies":[{"embeddable":true,"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/comments?post=21392"}],"version-history":[{"count":1,"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/product\/21392\/revisions"}],"predecessor-version":[{"id":21395,"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/product\/21392\/revisions\/21395"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/media\/21393"}],"wp:attachment":[{"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/media?parent=21392"}],"wp:term":[{"taxonomy":"product_brand","embeddable":true,"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/product_brand?post=21392"},{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/product_cat?post=21392"},{"taxonomy":"product_tag","embeddable":true,"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/product_tag?post=21392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}