{"id":32255,"date":"2019-08-31T12:03:42","date_gmt":"2019-08-31T16:03:42","guid":{"rendered":"https:\/\/wpdeveloper.net\/?p=32255"},"modified":"2019-08-31T12:03:42","modified_gmt":"2019-08-31T16:03:42","slug":"interactive-content-wordpress","status":"publish","type":"post","link":"https:\/\/wpdeveloper.com\/interactive-content-wordpress\/","title":{"rendered":"How To Present Interactive Content on WordPress Using Elementor"},"content":{"rendered":"<p>Why should you use Interactive Content? Well according to <a href=\"http:\/\/time.com\/3858309\/attention-spans-goldfish\/\" target=\"_blank\" rel=\"noopener\"><strong>Time Magazine<\/strong><\/a>, every average person loses their attention after eight seconds, which is a very narrow window. Also, it is enough to give the marketers make a run for their money!<\/p>\n<p><!--more--><\/p>\n<h3><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-305611\" src=\"https:\/\/wpdeveloper.net\/wp-content\/uploads\/2018\/08\/How-To-Present-Interactive-Content-on-WordPress.png\" alt=\"\" width=\"1280\" height=\"720\" title=\"\" srcset=\"https:\/\/assets.wpdeveloper.com\/2018\/08\/How-To-Present-Interactive-Content-on-WordPress.png 1280w, https:\/\/assets.wpdeveloper.com\/2018\/08\/How-To-Present-Interactive-Content-on-WordPress-600x338.png 600w, https:\/\/assets.wpdeveloper.com\/2018\/08\/How-To-Present-Interactive-Content-on-WordPress-768x432.png 768w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/h3>\n<h3>Interactive Content Attracts Attention<\/h3>\n<p>Interactive Content has always been a better option compared to the traditional ones, simply because it engages the readers. Interactive content persuades its readers to execute a certain action.\u00a0 Which in turn adds value to user experience.<\/p>\n<p>For example, simple text content might work best for certain scenarios. And if the wording, sentence structure is right it might bring you the desired conversion. But at other times, simple text will fail you. So what can you do to add value and engage your readers using simple text? Well, first of all, do not use Simple Text. And even if you do, make sure it has enough action infused with it.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-32259\" src=\"https:\/\/wpdeveloper.net\/wp-content\/uploads\/2018\/08\/InteractivePromo.gif\" alt=\"\" width=\"808\" height=\"272\" title=\"\"><\/p>\n<p>What you see above is an <strong><a href=\"https:\/\/essential-addons.com\/elementor\/interactive-promo\/\" target=\"_blank\" rel=\"noopener\">Interactive Promo element.<\/a><\/strong> It is included in the Essential Addons\u00a0bundle for <strong><a href=\"https:\/\/wpdeveloper.net\/go\/elementor\" target=\"_blank\" rel=\"noopener\">Elementor<\/a><\/strong>. It is an elements bundle of only the top-notch elements for WordPress Website. In short, this element infuses the simple text with appealing animation. And the best part is, the element has its own format, all you need to do is fill out the necessary information inside the appropriate fields. And of course, without having to write a single line of code.<\/p>\n<p>What are the elements you might ask? Elements are the building blocks for Websites. And Elementor is a drag and drop plugin for WordPress which lets you benefit from this block-based website building.<\/p>\n<h3>Elementor Interface<\/h3>\n<p>So, before we teach you how to create your very own Interactive Promo element, let&#8217;s have a look at the Elementor Interface.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-32260\" src=\"https:\/\/wpdeveloper.net\/wp-content\/uploads\/2018\/08\/Elementor-Interface-Screenhsot.png\" alt=\"\" width=\"1266\" height=\"640\" title=\"\" srcset=\"https:\/\/assets.wpdeveloper.com\/2018\/08\/Elementor-Interface-Screenhsot.png 1266w, https:\/\/assets.wpdeveloper.com\/2018\/08\/Elementor-Interface-Screenhsot-300x152.png 300w, https:\/\/assets.wpdeveloper.com\/2018\/08\/Elementor-Interface-Screenhsot-768x388.png 768w, https:\/\/assets.wpdeveloper.com\/2018\/08\/Elementor-Interface-Screenhsot-1024x518.png 1024w\" sizes=\"(max-width: 1266px) 100vw, 1266px\" \/><\/p>\n<ul>\n<li>This is the Side Panel. It includes all the elements available to you.<\/li>\n<li>This is the Footer Panel. You can redo\/undo changes, Save your work as a draft or publish it.<\/li>\n<li>This is the blank canvas, this is where all the work is done. You can either start by adding a new template or by adding a new section.<\/li>\n<\/ul>\n<p>And also know that <strong><a href=\"https:\/\/wpdeveloper.net\/go\/elementor\" target=\"_blank\" rel=\"noopener\">Elementor<\/a> <\/strong>is a great Front-End Page Builder. Which means you can quickly <strong>hide the side panel<\/strong> to see how your work will look live.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-32262\" src=\"https:\/\/wpdeveloper.net\/wp-content\/uploads\/2018\/08\/elementor-interface.gif\" alt=\"\" width=\"1280\" height=\"720\" title=\"\"><\/p>\n<h3>Build Interactive Promo Content for Your WordPress Website<\/h3>\n<p>You need to install <strong><a href=\"https:\/\/wpdeveloper.net\/go\/elementor\" target=\"_blank\" rel=\"noopener\">Elementor<\/a> <\/strong>and Essential Addons\u00a0to create Interactive Content Element.<\/p>\n<p><iframe title=\"Interactive Promo-Essential Addons\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/Y2Xt0RE9HDQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>After you have installed both the plugins, Go to your WordPress Dashboard and hit Add New Post button.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-32263\" src=\"https:\/\/wpdeveloper.net\/wp-content\/uploads\/2018\/08\/dashboard.png\" alt=\"\" width=\"1054\" height=\"431\" title=\"\" srcset=\"https:\/\/assets.wpdeveloper.com\/2018\/08\/dashboard.png 1054w, https:\/\/assets.wpdeveloper.com\/2018\/08\/dashboard-300x123.png 300w, https:\/\/assets.wpdeveloper.com\/2018\/08\/dashboard-768x314.png 768w, https:\/\/assets.wpdeveloper.com\/2018\/08\/dashboard-1024x419.png 1024w\" sizes=\"(max-width: 1054px) 100vw, 1054px\" \/><\/p>\n<p>Once you are inside the Elementor interface search for EA Interactive Promo in the Side Panel search bar. Drag the element and drop it inside the Elementor Interface.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-32280\" src=\"https:\/\/wpdeveloper.net\/wp-content\/uploads\/2018\/08\/side-panel.png\" alt=\"\" width=\"944\" height=\"659\" title=\"\" srcset=\"https:\/\/assets.wpdeveloper.com\/2018\/08\/side-panel.png 944w, https:\/\/assets.wpdeveloper.com\/2018\/08\/side-panel-300x209.png 300w, https:\/\/assets.wpdeveloper.com\/2018\/08\/side-panel-768x536.png 768w\" sizes=\"(max-width: 944px) 100vw, 944px\" \/><\/p>\n<p>As soon as you drop the element inside the Elementor interface, you will notice the customization options appear in the Side Panel.<\/p>\n<h3>Add Content To the Element<\/h3>\n<p>Start off by adding text to the element. To do so head over to <strong>Content&gt;Promo Content.\u00a0<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-32272\" src=\"https:\/\/wpdeveloper.net\/wp-content\/uploads\/2018\/08\/promo-content01.png\" alt=\"\" width=\"280\" height=\"470\" title=\"\" srcset=\"https:\/\/assets.wpdeveloper.com\/2018\/08\/promo-content01.png 280w, https:\/\/assets.wpdeveloper.com\/2018\/08\/promo-content01-179x300.png 179w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/p>\n<p>First, pick an image from your existing Media Library or upload a new one.<\/p>\n<ol>\n<li>Add ALT tags to the image.<\/li>\n<li>Give a heading to the element.<\/li>\n<\/ol>\n<p>Scroll down and you will see a <strong>mini-WordPress editor.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-32274\" src=\"https:\/\/wpdeveloper.net\/wp-content\/uploads\/2018\/08\/promo-content-02.png\" alt=\"\" width=\"281\" height=\"586\" title=\"\" srcset=\"https:\/\/assets.wpdeveloper.com\/2018\/08\/promo-content-02.png 281w, https:\/\/assets.wpdeveloper.com\/2018\/08\/promo-content-02-144x300.png 144w\" sizes=\"(max-width: 281px) 100vw, 281px\" \/>And at the very bottom, you will see a field for adding links to the element and just below it you will see the Open in New window Toggle bar.<\/p>\n<h3>Add Style to the Element<\/h3>\n<p>Start off by selecting a style for your element. Use the drop-down menu to pick a style for the element.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-32275\" src=\"https:\/\/wpdeveloper.net\/wp-content\/uploads\/2018\/08\/effects.png\" alt=\"\" width=\"1090\" height=\"657\" title=\"\" srcset=\"https:\/\/assets.wpdeveloper.com\/2018\/08\/effects.png 1090w, https:\/\/assets.wpdeveloper.com\/2018\/08\/effects-300x181.png 300w, https:\/\/assets.wpdeveloper.com\/2018\/08\/effects-768x463.png 768w, https:\/\/assets.wpdeveloper.com\/2018\/08\/effects-1024x617.png 1024w\" sizes=\"(max-width: 1090px) 100vw, 1090px\" \/><\/p>\n<p>You can also adjust the max width and border radius for the element from here.<\/p>\n<h3>Typography<\/h3>\n<p>The Interactive Promo element has two text fields- <strong>Promo Content<\/strong> and <strong>Promo Heading.\u00a0<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-32276\" src=\"https:\/\/wpdeveloper.net\/wp-content\/uploads\/2018\/08\/typography.png\" alt=\"\" width=\"280\" height=\"661\" title=\"\" srcset=\"https:\/\/assets.wpdeveloper.com\/2018\/08\/typography.png 280w, https:\/\/assets.wpdeveloper.com\/2018\/08\/typography-127x300.png 127w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/p>\n<p>You have to click on the little Pencil icon to open the<strong> Typography pop-up.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-32278\" src=\"https:\/\/wpdeveloper.net\/wp-content\/uploads\/2018\/08\/typography-popup.png\" alt=\"\" width=\"282\" height=\"661\" title=\"\" srcset=\"https:\/\/assets.wpdeveloper.com\/2018\/08\/typography-popup.png 282w, https:\/\/assets.wpdeveloper.com\/2018\/08\/typography-popup-128x300.png 128w\" sizes=\"(max-width: 282px) 100vw, 282px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3>Wrapping Up!<\/h3>\n<p>You can use this element all by itself but you can always try different combinations of elements to get the best drag and drop experience. <strong><a href=\"https:\/\/wpdeveloper.net\/go\/elementor\" target=\"_blank\" rel=\"noopener\">Elementor<\/a> <\/strong>has 53 elements and if you add Essential Addons to it you will get another 50+ element. Well, that&#8217;s more than enough to create fancy yet professionals websites.<\/p>\n<p>For example, instead of adding a link to the EA Interactive Element itself, you might want to place an <strong><a href=\"https:\/\/essential-addons.com\/elementor\/creative-buttons\/\" target=\"_blank\" rel=\"noopener\">EA Creative Button<\/a><\/strong> at the bottom of the EA Interactive element. In the meantime here is a quick blog on how to<strong>\u00a0<a href=\"https:\/\/wpdeveloper.net\/create-testimonials-page-wordpress\/\" target=\"_blank\" rel=\"noopener\">Quick Guide: How To Create a Testimonial Page On Your WordPress Website.\u00a0<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Why should you use Interactive Content? Well according to Time Magazine, every average person loses their attention after eight seconds, which is a very narrow window. Also, it is enough to give the marketers make a run for their money!<\/p>\n","protected":false},"author":2045,"featured_media":305611,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","footnotes":""},"categories":[88,108],"tags":[136,104,121,220,135,89,219],"class_list":["post-32255","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-elementor","tag-drag-and-drop","tag-elementor","tag-essential-addons","tag-interactive-promo","tag-page-builder","tag-wordpress","tag-wordpress-website"],"nelio_content":{"autoShareEndMode":"never","automationSources":{"useCustomSentences":false,"customSentences":[]},"efiAlt":"","efiUrl":"","followers":[2045],"highlights":[],"isAutoShareEnabled":true,"networkImageIds":[],"permalinkQueryArgs":[],"series":[],"suggestedReferences":[]},"views":2986,"_links":{"self":[{"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/posts\/32255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/users\/2045"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/comments?post=32255"}],"version-history":[{"count":13,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/posts\/32255\/revisions"}],"predecessor-version":[{"id":310871,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/posts\/32255\/revisions\/310871"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/media\/305611"}],"wp:attachment":[{"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/media?parent=32255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/categories?post=32255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/tags?post=32255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}