{"id":11784,"date":"2016-12-29T09:33:01","date_gmt":"2016-12-29T09:33:01","guid":{"rendered":"http:\/\/rnbtheme.com\/documentation\/?p=11784"},"modified":"2019-12-20T07:37:21","modified_gmt":"2019-12-20T07:37:21","slug":"animated-text","status":"publish","type":"post","link":"https:\/\/rnbtheme.com\/documentation\/wpbackery\/animated-text","title":{"rendered":"Animated Text"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row][vc_column css=&#8221;.vc_custom_1485963458300{padding-right: 35px !important;padding-left: 35px !important;}&#8221; col_shadow=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221; col_shadow_hover=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221;][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][vc_column_text]The module helps to create amazing text effects &#8211;\u00a0type and change with animations.<\/p>\n<p>You may see the example of the module on the Animated text page.<\/p>\n<p>Note, it&#8217;s recommended to use only one Animated text per page to avoid script conflicts.<\/p>\n<h5><\/h5>\n<p>[\/vc_column_text][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][dfd_tta_tabs border_radius=&#8221;4&#8243; alignment=&#8221;left&#8221; active_section=&#8221;1&#8243; active_tab_background=&#8221;#3b55e6&#8243; tab_hover_text_color=&#8221;#3b55e6&#8243; tab_active_color_text=&#8221;#ffffff&#8221; border_color_active=&#8221;#3b55e6&#8243;][vc_tta_section title=&#8221;General settings&#8221; tab_id=&#8221;1486545572585-2437c7e1-5371&#8243;][vc_column_text]<\/p>\n<h3>General settings<\/h3>\n<h5>Animation settings<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-14247\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/animatedv.png\" alt=\"\" width=\"978\" height=\"625\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/animatedv.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/animatedv-300x192.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/animatedv-768x491.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Style<\/strong> &#8211; choose the best suitable style between 3 preset styles. <strong>Shuffle<\/strong>, <strong>typing<\/strong>, and <strong>Changing words<\/strong> styles are available. All of them can be found on the Animated text page.<\/li>\n<li><strong>Text alignment<\/strong> &#8211; allows you to align the text in horizontal perspective. <strong>Left<\/strong>, <strong>right<\/strong> and <strong>center<\/strong> positions are available.<\/li>\n<li><strong>Loop<\/strong> &#8211; set it to <strong>Enable<\/strong> to activate the loop for the animated text. For <strong>Typing<\/strong> style only.<\/li>\n<li><strong>Cursor<\/strong> &#8211; switch it to <strong>Enable<\/strong> to display\u00a0the cursor for the animated text. For <strong>Typing<\/strong> style only.<\/li>\n<li><strong>Words animation in<\/strong> &#8211; select the appear effect for the words, for\u00a0<strong>Changing words<\/strong><strong>\u00a0<\/strong>style only.<\/li>\n<li><strong>Words animation out\u00a0<\/strong>&#8211; select the disappear effect for the words, for\u00a0<strong>Changing words<\/strong><strong>\u00a0<\/strong>style only.<\/li>\n<li><strong>Typing speed<\/strong> &#8211; set the typing speed for the module in milliseconds.<\/li>\n<\/ul>\n<h5>Extra features<\/h5>\n<ul>\n<li><strong>Animation<\/strong> \u2013 choose between 14 preset animation effects.<\/li>\n<li><strong>Custom CSS class<\/strong> \u2013\u00a0enter our\u00a0own unique class name for the item \u2013 this is a useful option for those who want to create a specific style. E.g.: you can type <strong>custom-style<\/strong> class and then go to <del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del>\u00a0<del class=\"support-arrow-right\">Custom CSS\/JS<\/del> <del>Custom CSS<\/del> field and write your own CSS code with this class to get your own style.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Content settings&#8221; tab_id=&#8221;1486545572829-e1c1304c-ee12&#8243;][vc_column_text]<\/p>\n<h3>Content settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-14249\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/contemt.png\" alt=\"\" width=\"978\" height=\"689\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/contemt.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/contemt-300x211.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/contemt-768x541.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Prefix<\/strong> &#8211; enter\u00a0the content before the animated text.<\/li>\n<\/ul>\n<h5>Animated text string<\/h5>\n<h6>In this section, you can customize the text strings of the module.<\/h6>\n<h6>By clicking on the\u00a0arrow down icon you can reveal the whole section to adjust it to your needs. Here you are also able to duplicate the text strings, change\u00a0their order (simply drag-n-drop the blocks) and delete the unnecessary text strings as well.<\/h6>\n<ul>\n<li><strong>Single string<\/strong> &#8211; enter the content which will be animated.<\/li>\n<li><strong>String color<\/strong> &#8211; specify the color of the animated text.<\/li>\n<li><strong>String background<\/strong> &#8211;\u00a0specify the background color of the animated text.<\/li>\n<li><strong>Postfix\u00a0<\/strong>&#8211; enter\u00a0the content after the animated text.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Typography settings&#8221; tab_id=&#8221;1486545573311-423c930f-c6e7&#8243;][vc_column_text]<\/p>\n<h3>Typography settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2003 size-full\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Typography-11.jpg\" width=\"978\" height=\"752\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Typography-11.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Typography-11-300x231.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Typography-11-768x591.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<h5>Animated string typography settings<\/h5>\n<p>These settings are inherited from <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">Custom typography<\/del> <del>H2 Typography.<\/del><\/p>\n<ul>\n<li><strong>Font size<\/strong> \u2013 set the font size you need to use in the animated text.<\/li>\n<li><strong>Letter spacing<\/strong> \u2013 set the needed distance between letters.<\/li>\n<li><strong>Line-height<\/strong> \u2013 set the needed distance between lines in the animated text.<\/li>\n<li><strong>Text color<\/strong> \u2013 set the color of the font.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the animated text.<\/li>\n<li><strong>Custom font family<\/strong> \u2013 set it to <strong>Enable<\/strong> to use custom Google font.\n<ul>\n<li><strong>Font Family<\/strong> \u2013 select the font family from the drop-down list.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the animated text.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5>Prefix and postfix typography settings<\/h5>\n<p>These settings are inherited from <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">Custom typography<\/del> <del>H2 Typography.<\/del><\/p>\n<ul>\n<li><strong>Font size<\/strong> \u2013 set the font size you need to use in the text before and after the animated text.<\/li>\n<li><strong>Letter spacing<\/strong> \u2013 set the needed distance between letters.<\/li>\n<li><strong>Line-height<\/strong> \u2013 set the needed distance between lines in the text before and after the animated text.<\/li>\n<li><strong>Text color<\/strong> \u2013 set the color of the font.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the text before and after the animated text.<\/li>\n<li><strong>Custom font family<\/strong> \u2013 set it to <strong>Enable<\/strong> to use custom Google font.\n<ul>\n<li><strong>Font Family<\/strong> \u2013 select the font family from the drop-down list.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the text before and after the animated text.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5>Color settings<\/h5>\n<ul>\n<li><strong>Prefix color<\/strong> &#8211;\u00a0set the color for content before animated text.<\/li>\n<li><strong>Postfix color<\/strong> &#8211;\u00a0set the color for content after animated text.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Responsive settings&#8221; tab_id=&#8221;1486545573068-02c117a6-3d50&#8243;][vc_column_text]<\/p>\n<h3>Responsive settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2006 size-full\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/responsive-1.jpg\" width=\"978\" height=\"715\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/responsive-1.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/responsive-1-300x219.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/responsive-1-768x561.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<h5>Animated string typography responsive settings<\/h5>\n<ul>\n<li><strong>Desktop<\/strong> \u2013 set the animated string font size, line height and letter spacing for the screen resolutions from 1280px to 1025px.<\/li>\n<li><strong>Tablet\u00a0<\/strong>\u2013 set the animated string font size, line height and letter spacing for the screen resolutions from 1024px to 800px.<\/li>\n<li><strong>Mobile\u00a0<\/strong>\u2013 set the animated string font size, line height and letter spacing for the screen resolutions less than 800px.<\/li>\n<\/ul>\n<h5>Prefix and postfix typography responsive settings<\/h5>\n<ul>\n<li><strong>Desktop<\/strong> \u2013 set the prefix and postfix font size, line height and letter spacing for the screen resolutions from 1280px to 1025px.<\/li>\n<li><strong>Tablet\u00a0<\/strong>\u2013 set the prefix and postfix font size, line height and letter spacing for the screen resolutions from 1024px to 800px.<\/li>\n<li><strong>Mobile\u00a0<\/strong>\u2013 set the prefix and postfix font size, line height and letter spacing for the screen resolutions less than 800px.<\/li>\n<\/ul>\n<h5>Min height settings<\/h5>\n<ul>\n<li><strong>Desktop\/tablet\/mobile<\/strong> &#8211;\u00a0set the animated heading minimal height in px for various screen resolutions.<\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<h3>Responsive settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2006 size-full\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/responsive-1.jpg\" width=\"978\" height=\"715\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/responsive-1.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/responsive-1-300x219.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/responsive-1-768x561.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<h5>Animated string typography responsive settings<\/h5>\n<ul>\n<li><strong>Desktop<\/strong> \u2013 set the animated string font size, line height and letter spacing for the screen resolutions from 1280px to 1025px.<\/li>\n<li><strong>Tablet\u00a0<\/strong>\u2013 set the animated string font size, line height and letter spacing for the screen resolutions from 1024px to 800px.<\/li>\n<li><strong>Mobile\u00a0<\/strong>\u2013 set the animated string font size, line height and letter spacing for the screen resolutions less than 800px.<\/li>\n<\/ul>\n<h5>Prefix and postfix typography responsive settings<\/h5>\n<ul>\n<li><strong>Desktop<\/strong> \u2013 set the prefix and postfix font size, line height and letter spacing for the screen resolutions from 1280px to 1025px.<\/li>\n<li><strong>Tablet\u00a0<\/strong>\u2013 set the prefix and postfix font size, line height and letter spacing for the screen resolutions from 1024px to 800px.<\/li>\n<li><strong>Mobile\u00a0<\/strong>\u2013 set the prefix and postfix font size, line height and letter spacing for the screen resolutions less than 800px.<\/li>\n<\/ul>\n<h5>Min height settings<\/h5>\n<ul>\n<li><strong>Desktop\/tablet\/mobile<\/strong> &#8211;\u00a0set the animated heading minimal height for various screen resolutions.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][\/dfd_tta_tabs][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>The module helps to create amazing text effects \u2013 type and change with animations.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[17,22,16,28,33],"_links":{"self":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11784"}],"collection":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=11784"}],"version-history":[{"count":12,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11784\/revisions"}],"predecessor-version":[{"id":15205,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11784\/revisions\/15205"}],"wp:attachment":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=11784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/categories?post=11784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/tags?post=11784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}