{"id":3113,"date":"2021-06-23T09:17:11","date_gmt":"2021-06-23T09:17:11","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=3113"},"modified":"2023-02-21T10:41:14","modified_gmt":"2023-02-21T10:41:14","slug":"how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/","title":{"rendered":"How to Add Entrance Animations"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3113\" class=\"elementor elementor-3113\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7d42a6f6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7d42a6f6\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-97cd83f\" data-id=\"97cd83f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7dd3b40 elementor-widget elementor-widget-video\" data-id=\"7dd3b40\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=hRtzD2Srwy4&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-308e4c63 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"308e4c63\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-787d8b2f\" data-id=\"787d8b2f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5c905889 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"5c905889\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1551\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1551\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1552\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1552\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1551\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1551\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1551\" tabindex=\"0\" hidden=\"false\"><p>In this video I will show you how to add Entrance Animations to widgets, sections and columns, by using the Elementor page builder for WordPress. That&#8217;s right &#8211; beautiful entrance animations with absolutely no coding or CSS.<\/p><p>To learn more about using Elementor&#8217;s many widgets and features, subscribe to this channel or<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1552\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1552\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1552\" tabindex=\"0\" hidden=\"hidden\"><p>hi everyone this is Noah from Elementor<br \/>today I&#8217;m going to show you our new<br \/>feature entrance animations with this<br \/>amazing feature you can add eye catching<br \/>animations to your sections columns or<br \/>widgets to give you a good look of this<br \/>feature I&#8217;ll simply refresh this page<br \/>and scroll down in this feature we<br \/>provide you with 37 different animations<br \/>this way you could add suitable<br \/>animations for your page to begin I&#8217;ll<br \/>click on the Edit with Elementor button<br \/>let&#8217;s begin with this section to open<br \/>the entrance animation feature we&#8217;ll<br \/>just click on the section on the<br \/>Advanced tab an entrance animation<br \/>option the default is always set as none<br \/>as you can see we&#8217;ve divided all the<br \/>animations by types fading zooming<br \/>bouncing sliding etc now when you choose<br \/>an entrance animation you could see it<br \/>in the live preview let&#8217;s pick one for<br \/>example fade and down or fade on right<br \/>rotate in down left you can also choose<br \/>the animation duration as slow normal or<br \/>fast that was for the section let&#8217;s take<br \/>a look at the columns to open the<br \/>entrance animation feature for the<br \/>column you simply click on the column<br \/>Advanced tab and entrance animation you<br \/>just pick an animation for example<br \/>rotate in now that we&#8217;ve gone over the<br \/>columns let&#8217;s move on to the widgets<br \/>now here to open the animation feature<br \/>you simply click on the widget Advanced<br \/>tab and entrance animation now let&#8217;s try<br \/>the attention-seekers animations for<br \/>example you have bounce or pulse swing<br \/>tada<br \/>jello and many more animations that you<br \/>can choose from of course you can set an<br \/>animation for each section and the<br \/>columns and the widget in the same page<br \/>and in the same section this way giving<br \/>a special unique touch to your page I<br \/>hope you enjoyed this video for more<br \/>videos and tutorials subscribe our<br \/>YouTube channel or visit Doc&#8217;s<br \/>alimentar com<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this video I will show you how to add Entrance Animations to widgets, sections and columns, by using the Elementor page builder for WordPress. That\u2019s right \u2013 beautiful entrance animations with absolutely no coding or CSS. To learn more about using Elementor\u2019s many widgets and features, subscribe to this channel or [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4697,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4,12],"tags":[],"class_list":["post-3113","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","category-motion-effects"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Add Entrance Animations - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Entrance Animations - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this video I will show you how to add Entrance Animations to widgets, sections and columns, by using the Elementor page builder for WordPress. That\u2019s right \u2013 beautiful entrance animations with absolutely no coding or CSS. To learn more about using Elementor\u2019s many widgets and features, subscribe to this channel or [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-23T09:17:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T10:41:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/How-to-Add-Entrance-Animations.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1923\" \/>\n\t<meta property=\"og:image:height\" content=\"1081\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Entrance Animations - Academy","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:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Entrance Animations - Academy","og_description":"Overview Transcript Overview In this video I will show you how to add Entrance Animations to widgets, sections and columns, by using the Elementor page builder for WordPress. That\u2019s right \u2013 beautiful entrance animations with absolutely no coding or CSS. To learn more about using Elementor\u2019s many widgets and features, subscribe to this channel or [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/","og_site_name":"Academy","article_published_time":"2021-06-23T09:17:11+00:00","article_modified_time":"2023-02-21T10:41:14+00:00","og_image":[{"width":1923,"height":1081,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/How-to-Add-Entrance-Animations.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Add Entrance Animations","datePublished":"2021-06-23T09:17:11+00:00","dateModified":"2023-02-21T10:41:14+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/"},"wordCount":405,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/How-to-Add-Entrance-Animations.jpg","articleSection":["Design \/ Layout","Motion Effects"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/","url":"https:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/","name":"How to Add Entrance Animations - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/How-to-Add-Entrance-Animations.jpg","datePublished":"2021-06-23T09:17:11+00:00","dateModified":"2023-02-21T10:41:14+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/How-to-Add-Entrance-Animations.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/How-to-Add-Entrance-Animations.jpg","width":1923,"height":1081},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-add-entrance-animations-to-your-wordpress-website-using-elementor-page-builder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Add Entrance Animations"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=3113"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3113\/revisions"}],"predecessor-version":[{"id":9377,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3113\/revisions\/9377"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4697"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=3113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=3113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=3113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}