{"id":11588,"date":"2020-09-03T15:00:16","date_gmt":"2020-09-03T13:00:16","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=11588"},"modified":"2020-12-04T10:16:01","modified_gmt":"2020-12-04T09:16:01","slug":"add-gifs-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/add-gifs-in-wordpress\/","title":{"rendered":"How to Add Animated GIFs in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]GIFs (Graphics Interchange Format) rule the web. This ubiquitous phenomenon has been around since 1987, but they\u2019ve never been as widespread as they are now.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]No matter the social networking website you navigate, you\u2019re bound to stumble upon the smart thinking guy GIF, Mariah Carey shaking her head saying <em>I don\u2019t know her<\/em>, or the confused lady doing calculus trying to put two and two together (pun intended).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Besides using them on social media channels, people add GIFs to their texts, holiday ecards, or websites whenever they wish to convey an emotion, communicate an idea, share a joke, or simply express themselves better in the digital world. If you\u2019d like to spice up your WordPress site with a GIF here and there, this article is for you. We\u2019ll discuss:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#the-benefits-of-using-gifs\">The Benefits of Using GIFs<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-gifs-in-wordpress\">How to Add GIFs in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ll talk about adding animated GIFs in WordPress using the Classic Editor, Gutenberg, and Elementor too, so stick around.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"the-benefits-of-using-gifs\"><\/a>The Benefits of Using GIFs<\/h2>\n<p>[\/vc_column_text][vc_column_text]Using animated GIFs can be highly advantageous for your business. Over the past few years, brands have started to incorporate them into their online campaigns and these are some of the reasons why.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">GIFs Enable Better Connection with Users<\/h3>\n<p>[\/vc_column_text][vc_column_text]Research suggests that the <a href=\"http:\/\/www.t-sciences.com\/news\/humans-process-visual-data-better\" target=\"_blank\" rel=\"noopener noreferrer\">human brain processes images 60,000 times faster than text<\/a>, and that an impressive 90% of information transmitted to the brain is visual. Images are undoubtedly very effective, but animated GIFs appear to have a <strong>stronger emotional impact on people and are more relatable than any other type of visual content<\/strong>. That allows brands to connect with their audience and develop better relationships with them.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">GIFs Are Great for Promoting Products<\/h3>\n<p>[\/vc_column_text][vc_column_text]When you wish to promote your services, don\u2019t shy away from adding GIFs to your promo campaign. Sure, you can go with videos, but keep in mind the fact that GIFs load faster and take up way less bandwidth. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]They are a <strong>fun and creative way of advertising your brand, showcasing your offer, and highlighting the benefits of using your products<\/strong>. Plus, GIFs can convey just the emotion you want to express, and with the websites that feature a compendium of GIFs (such as <a href=\"https:\/\/giphy.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Giphy.com<\/a>), you won\u2019t have to worry about finding the right one for each occasion.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">GIFs Allow You to Showcase Brand Personality<\/h3>\n<p>[\/vc_column_text][vc_column_text]It\u2019s important for your users to understand there\u2019s a person behind the brand and <strong>GIFs help add the human touch to your business<\/strong>. They allow you to interact with your users pretty much in a way they interact with their friends, and to develop a personality for your brand that people will want to engage with. The more relatable you are, the more your audience will grow.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">GIFs Work Great in How-To\u2019s<\/h3>\n<p>[\/vc_column_text][vc_column_text]<strong>When you wish to explain to your users how something works and how to use a product, GIFs are a great choice<\/strong>. Instead of having to go through the manual and read countless lines of text, an animated GIF will get you a long way and help people better understand instructions.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-gifs-in-wordpress\"><\/a>How to Add GIFs in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]To add GIFs in WordPress, head over to a page or post where you wish to upload the GIF file.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you\u2019re using <strong>Gutenberg<\/strong> as your main page builder, you should insert the <em><strong>Image<\/strong><\/em> block first.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Image.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Image.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Image-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Image-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, upload the desired file, select one from your media library, or paste the GIF\u2019s URL (we found ours over at giphy.com).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Insert-Image.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Insert Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Insert-Image.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Insert-Image-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gutenberg-Insert-Image-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The GIF is now added to the page, and after pressing the <em><strong>Publish<\/strong><\/em> button, it will appear on your website.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"796\" height=\"350\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Animated-GIF.gif\" class=\"attachment-full size-full\" alt=\"Animated GIF\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you\u2019re still using <em><strong>Classic Editor<\/strong><\/em>, you\u2019ll have a tad bit more work to do.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Go to the page where you want to upload the GIF file and click on <em><strong>Add Media<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Add-Media-Button.jpg\" class=\"attachment-full size-full\" alt=\"Add Media Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Add-Media-Button.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Add-Media-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Add-Media-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next up, upload the file or select one from your library. Then, on the right-hand side of the screen look for the <em><strong>Attachment Display Setting<\/strong><\/em> (it\u2019s at the bottom of the page) and select <strong><em>Size<\/em><\/strong>. To have the file displayed as an animated GIF and not a static image, it\u2019s important to select <em><strong>Full Size<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Attachment-Display-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Attachment Display Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Attachment-Display-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Attachment-Display-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Attachment-Display-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]All that\u2019s left to do is hit the <em><strong>Insert into Page<\/strong><\/em> button and then publish your page containing the GIF.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another thing you can do is embed your GIF using the <strong>iframe code<\/strong>. Some websites, like giphy.com, will let you copy the GIF\u2019s iframe code that you can then post in the text editor on your page. In that case, you don\u2019t have to bother with modifying the file\u2019s size as it will instantly appear as animated.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In case <strong>Elementor<\/strong> is your preferred page builder, you should first add the <em><strong>Image<\/strong><\/em> widget to your page, and then choose the GIF file to upload.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Elementor-Image.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Elementor-Image.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Elementor-Image-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Elementor-Image-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As with Gutenberg, you don\u2019t have to set up anything on your own. Simply find the file, upload it, and watch it emerge on your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]GIFs are, undoubtedly, an essential part of today\u2019s Internet culture. There may be some people that find them silly or superfluous, but the majority sees GIFs as powerful elements that transform dull and ordinary posts into captivating and entertaining pieces of content.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you decide to incorporate them into your website, just make sure not to overdo it. Even though GIFs load faster than videos, still, if there\u2019s too many of them on a page, they may jeopardize your website\u2019s performance. As with everything else, moderation is key. Use them where it makes sense, but don\u2019t talk just through them. Keep things professional, with a splash of some good ole GIF-y fun.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Learn how to add GIFs in WordPress, and use this ubiquitous phenomenon and an unparalleled ruler of all social media channels to your advantage.<\/p>\n","protected":false},"author":4,"featured_media":11619,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14,4,13],"class_list":["post-11588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-core","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/11588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=11588"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/11588\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/11619"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=11588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=11588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=11588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}