(англ. Graphics Interchange Format - формат для обмена изображениями) - популярный растровый формат графических изображений, который способен хранить сжатые данные без потери качества в формате не более 256 цветов.

Формат GIF поддерживает анимационные изображения. Они представляют собой последовательность из нескольких статичных кадров, а также информацию о том, сколько времени каждый кадр должен быть показан на экране.

Animated GIF стал очень популярным в интернете последнее время, этот формат позволяет вставлять короткие маленькие видео-фрагменты в зацикленном режиме. Но если вы попытаетесь добавить анимированную GIF картинку на свой сайт WordPress, зачастую она может превратиться в обычное статичное изображение.

В этом уроке мы разберемся, в каких случаях анимированный GIF превращается в обычную картинку, как этого избежать и как правильно вставлять Animated GIF в ваши записи на WordPress.

Почему Animated GIF становится статичной картинкой в WordPress?

В WordPress встроена удобная Библиотека медиа-файлов, через которую можно загружать и добавлять новые картинки на сайт. Когда вы загружаете новую картинку, WordPress автоматически создает несколько копий этой картинки в разных размерах.

WordPress создает 3 копии картинки :

• Thumbnail (Миниатюра изображения)
• Medium (Средний размер)
• Large (Большой размер)

Кроме этого, конечно же, остается и оригинальное изображение в полном размере.

Так вот, загвоздка с GIF анимацией состоит в том, что WordPress при загрузке и создании копий такого файла сохраняет только первый кадр из этой анимации как копию для миниатюры, среднего и большого размера.

И если вы вставите в запись эту GIF-ку в одном из этих размеров, вы получите статичное изображение с первым кадром вместо анимации.

Как правильно добавлять Animated GIF в WordPress

В режиме редактирования записи загрузите свою GIF-ку, нажав на кнопку Добавить медиафайл :

После загрузки файла, выберите его размер из выпадающего меню внизу справа в блоке Настройки отображения файла .

Единственный вариант, с которым будет работать анимация картинки - это Полный размер .

Просто выберите "Полный" и вставьте картинку в свою запись на WordPress.

Полный размер - это исходный оригинальный GIF файл, который не подвергся изменениям со стороны WordPress при создании уменьшенных копий, и, к сожалению, только такой вариант остается рабочим.

Неудобства с Animated GIF в WordPress

Самым главным неудобством в данной ситуации является разрешение (размер в px) оригинального GIF файла.

Если, скажем, ваша GIF-ка по ширине составляет 700 px, а ширина основной колонки записи для вашей темы предусматривает 650 px, то вставленная в запись GIF-ка будет выходить за рамки колонки, и это будет выглядеть очень некрасиво.

В таком случае вам придется отредактировать и уменьшить разрешение GIF файла на компьютере до нужного размера перед загрузкой на WordPress.

Animated GIF картинки, как правило, занимают больше места. Это потому, что они по сути состоят из набора склеенных статичных изображений. Чем больше кадров в анимации, тем больше финальный размер файла.

Поэтому не рекомендуется слишком увлекаться Animated GIF и добавлять много таких файлов на одну страницу. Это попросту увеличит вес такой страницы до неразумных размеров, а также увеличится время на загрузку. Этого никто не любит: ни посетители, ни поисковики, ни вы сами.

Если вы пользуетесь сервисом Giphy для поиска анимированных картинок, попробуйте бесплатный плагин Giphypress . С его помощью вы можете искать любые GIF картинки по базе Giphy и вставлять их на свой сайт WordPress, не покидая админки.

Надеемся, мы помогли вам разобраться, как правильно добавлять Animated GIF в запись на WordPress.

Иногда, при добавлении gif анимаций на свой блог WordPress , они теряют свою анимацию и выглядят как статичные изображения . Почему так происходит и как с этим бороться читайте в этой статье.

Что такое GIF?

GIF (от англ. Graphics Interchange Format — формат для обмена изображениями ) — это растровый формат графических изображений (подобно png, jpg), который может вмещать в себя сжатые данные не теряя при этом в качестве, но не более 256 цветов.

Формат GIF имеет поддержку анимации в изображениях, состоящую из статичных картинок, выстроенных последовательно. Так же в gif содержится информация сколько времени каждое изображение должно быть активно (показано). В последние годы данный формат набрал бешенную популярность благодаря возможности вставлять небольшие видео фрагменты, зацикленные по кругу и не имеющие звуковой дорожки (отчасти за счет поддержки в социальных сетях).

А вот если попытаться вставить GIF анимацию на свой блог/сайт на WordPress, существует вероятность игры в «русскую рулетку» — не угадаешь как отобразится анимация после загрузки.

Почему GIF анимация превращается в картинку?

Движок WordPress распространяется с уже установленным удобным медиа-загрузчиком файлов, с помощью которого можно добавлять картинки и изображения на сайт. А сразу после загрузки картинки медиа-загрузчик создает несколько копий в разных размерах (под разные нужды пользователей).

Количество копий может равняться трем, а может быть и целых 7-8 копий одного изображения. Всё зависит от установленной у Вас темы оформления и набора плагинов.

По умолчанию WordPress создает три копии + оригинальное изображение:

• Thumbnail (Миниатюра изображения)
• Medium (Средний размер)
• Large (Большой размер)
• Original (Оригинальное изображение)

Сложность со вставкой GIF как раз в том, что при создании копий в разных размерах, медиа-загрузчик умеет сохранять только первый кадр из анимации. Поэтому, когда Вы вставляете любую из копий gif получается картинка из первого кадра.

Как правильно добавлять анимационные GIF в статьи?

В режиме редактирования записи нажимаем «Добавить медиафайл » и туда загружаем нашу GIF-анимацию:

После загрузки справа станет активно меню «настройки отображения файла ». Единственный вариант, при котором анимация сохраняется является использование gif в полном размере. Поэтому размер выбираем «полный » и жмем «вставить в запись ».

После чего анимация будет проигрываться прямо в редакторе и отлично работать в записи:

Если Вы хотите «оживить » ранее загруженную анимацию, работать которая отказалась по уже известной причине, загружать заново ее не стоит. Для исправления необходимо нажать на gif в редакторе, после чего во всплывающем меню выбрать «изменить »…

Анимационные эффекты – это отличное решение, которое можно использовать, чтобы добавить приветливую индивидуальность на ваш сайт WordPress. Они также могут использоваться для привлечения внимания к важной информации на вашем веб-сайте и для повышения UX с целью увеличения количества конверсий. Кроме того, подобные эффекты повысят ценность ваших проектов и могут увеличить трафик, поэтому важно знать о полезных плагинах WordPress, чтобы вы могли использовать их для добавления анимационных эффектов на свой сайт. Специально для вас мы сделали отличную подборку.

Это очень полезный плагин WordPress, который позволит вам создавать потрясающие текстовые эффекты с использованием коротких кодов SVG. Вы можете использовать его для того, чтобы усилить фирменную идентичность, визуально улучшить призывы к действию или просто для того, чтобы быть более творческим, создавая лучший дизайн. Все это можно сделать с помощью SVG-текста, который можно редактировать в любое время, когда вы захотите внести изменения, без необходимости использовать какое-либо программное обеспечение для редактирования изображений. Это очень простой в использовании плагин, с помощью которого вы также можете смешивать цвета, сочетать шрифты, заливки и фильтры. Он поможет создать уникальный текстовый эффект, который привлечет внимание пользователей к вашему контенту.

Это плагин, который вы можете использовать, если хотите создать хорошую анимацию на своем веб-сайте, потому что у него есть отличные функции, которые могут помочь вам легко добиться нужного эффекта. Animate It поможет вам легко добавить анимацию CSS3 на ваш сайт WordPress. Он имеет библиотеки Animo.js и Animate.css в одном пакете, который содержит более 50 различных анимаций на выбор. Вы можете добавлять анимации, которые вы предпочитаете для разных пользовательских действий, таких как наведение курсора, прокрутка и клик. Самое приятное то, что он абсолютно бесплатный.

С помощью данного плагина вы сможете выбрать из широкого диапазона анимации, которая будет показана на вашем сайте, пока контент будет загружаться. После завершения загрузки анимация автоматически исчезнет. Вы можете легко настроить цвета с помощью настроек плагина, или вы можете использовать свой собственный CSS для достижения большего эффекта в соответствии с вашими предпочтениями.

Отличный плагин, который доступен для свободного использования. Он поставляется с несколькими анимационными эффектами и эффектами перехода CSS3, которые позволят вашему дизайну выглядеть именно так, как вы хотите. Используя этот плагин, вы добьетесь того, что ваша страница WordPress всегда будет загружаться с использованием эффективных стилей анимации. Плагин имеет различные эффекты анимации, в том числе выцветание, постепенное исчезновение вниз, вверх, влево и вправо, а также вращение и многое другое.

Плагин может использоваться для того, чтобы добавить анимированный прогресс-бар на ваши страницы и к постам. Бары будут добавлены с помощью короткого кода. Затем можно настроить их параметры цвета, текста, процентного соотношения и ширины. Преимущество в том, что плагин совместим со всеми браузерами. Его лучшей особенностью является то, что он полностью отзывчивый, легко настраиваемый и весьма простой в использовании, так как вам необходимо использовать всего лишь один короткий код.

Это плагин, который стоит использовать, если вы хотите автоматически добавлять переходы CSS3 на свой сайт или блог WordPress. Ваши ссылки получат анимированные переходы между нормальными и зависающими состояниями. Этот плагин абсолютно бесплатен для использования и поддерживается последними версиеями всех основных браузеров, включая Chrome, Internet Explorer 10, FireFox, Opera и Safari. Это лучший выбор для веб-дизайнеров, которым требуется быстрое и доступное решение.

Очень полезный плагин с простой функцией, которая позволяет вращать слово или слова в предложении, используя анимацию. С его помощью вы сможете добавить несколько слов в предложение, которые будут случайным образом меняться с помощью эффектов CSS3 анимации. Если, например, вы хотите изменить одно слово в предложении, то у вас будет пять стилей анимации на выбор, и вы можете установить цвет шрифта и размер по своему усмотрению.

Это бесплатный плагин, который позволит вам добавлять анимацию в любой текст, используя короткие коды на страницах, в сообщениях или виджетах веб-сайта. С его помощью вы также можете использовать PHP-код для добавления текстовых анимаций непосредственно в файлы тем. Этот плагин использует возможности скрипта Textillate.js. Он прост в использовании, так как вам не нужно тратить много времени, включая скрипты и файлы стилей. Все что вам нужно сделать, так это просто создать короткий код с анимацией, которую вы собираетесь использовать, а затем вставить в свой пост. Easy Textillate использует библиотеки animate.css, textillate.js и lettering.js.

Этот плагин использует элементы CSS ID для добавления эффектов плавной прокрутки в навигацию по страницам. Вы сможете установить длительность прокрутки и ослабление, поскольку на ваш выбор представлено более 30 типов смягчения, из которых вы можете выбрать. Плагин предлагает поддержку как вертикальной, так и горизонтальной прокрутки, а противовесы могут быть настроены для отдельных ссылок.

Это простой современный и очень стильный плагин, который добавит немного жизни вашим изображениям. Вам просто необходимо выбрать изображение из медиа-библиотеки WordPress, а затем настройте эффекты при наведении, которые вы хотите использовать для него. Как только это будет сделано, вставьте изображение в пост или на страницу, которую вы выбрали. Результатом являются привлекательные эффекты на изображениях, которые могут улучшить ваш деловой имидж. Также будет включен генератор коротких кодов.

Удачной работы!

В одной из наших мы уже вам рассказывали о бесполезных, но приятных способах изменить внешний вид панели администратора. Теперь же продолжим говорить о бесполезном и красивом – покажем вам плагин для сайта WordPress, который может сделать текст анимированным, то есть, движущимся. Это будет красиво, привлекательно и необычно.

Какая польза от анимированного текста

Прямой практической пользы этого такого плагина для сайта на WordPress, конечно же, не будет. Однако косвенно при правильном подходе он может положительно повлиять на продвижение сайта.

Так, мы знаем, что учитываются поисковыми системами и влияют на ранжирование сайта. Чем они лучше, тем на более высоких позициях будет сайт. Поведенческие факторы зависят от многого, в том числе и от дизайна сайта – чем красивее страница, тем больше она нравится людям, тем больше на ней хотят находиться.

Есть ещё второе достоинство этого плагина для сайта на WordPress, которое также помогает улучшить поведение посетителей. Так, например, ПФ повышаются, когда гости сайта кликают на разнообразные ссылки и переходят с одной страницы на другую. Для этого может использоваться вывод последних, похожих или интересных записей. Чтобы блок с этими ссылками был замечен, можно сделать ему заголовок в виде анимированного текста. Также можно отметить и какую-либо рекламу.

В общем, каждый найдёт сам для себя пользу от плагина для сайта WordPress, который создаёт анимированный текст. Перейдём к самой сути.

Easy Textillate

Главное достоинство данного плагина для сайта на WordPress в том, что он изначально на русском языке, так как разработан русским специалистом Александром Самсоновым. Поэтому недопонималок каких-либо быть не должно.

После установки и активации плагина нужно ввести необходимый текст в соответствующее поле. Этот текст потом станет анимированным. Затем нужно выбрать, какую именно анимацию текста будет демонстрировать этот плагин для сайта на WordPress. Всего есть целых 40 разнообразных видов анимации. Кроме того, можно выбрать начальную и конечную анимацию.

Когда настройки анимированного текста в плагине для сайта WordPress будут все завершены, вы получите шорткод, который можно вставить в любое место сайта – шаблон, запись, страницу. Примечательно то, что шоркод плагина работает даже в виджете «Текст». Поэтому использовать его можно действительно где угодно.

Доброго дня читателям. Наверняка вы не раз видели симпатичную CSS-анимацию на популярных сайтах? Анимационные эффекты, типа переходящего один в другой контента, растворяющейся дополнительной информации, выпрыгивающих изображений и т. п. В этой статье я расскажу, как быстро добавить CSS-анимацию на WordPress-сайт, без трудоемкого написания какого-либо кода с помощью простого и понятного плагина.

Когда и зачем использовать CSS-анимацию?

CSS-анимация позволяет привлечь пользовательское внимание к различным частям вашей страницы. Например, вы можете анимировать «фишки» вашего продукта или кнопку призыва к действию. Для корпоративных и продающих страниц это бывает очень кстати.

Многие веб-сайты используют CSS-анимацию в качестве пользовательских прокруток страниц. Это позволяет добавить элементы истории, которую вы рассказываете читателю, по мере того, как он прокручивает страницу. CSS-анимация загружается быстрее, чем флэш или видео, а также поддерживается большинством современных браузеров.

Вы, конечно, можете добавить CSS-анимацию вручную к вашей WordPress-теме, или отдельной странице стилей вашей темы. Но, как бы то ни было, большинство новичков не хотят редактировать файлы темы или тратить время на изучение CSS, так что мы сегодня не рассматриваем этот вариант.

Давайте посмотрим, как можно легко добавить CSS-анимацию с помощью плагина CSS Animate! Данный плагин позволяет создавать CSS-анимацию, используя стандартный WYSIWYG-редактор.

Плагин Animate it!

Устанавливаем плагин Animate it! Он работает сразу после установки, и его не нужно настраивать дополнительно. Просто создайте новый пост или откройте уже готовый, и вы заметите новую кнопку ‘Animate it!’в вашем визуальном редакторе WordPress.

Кликните на эту кнопку, и перед вами появится всплывающее меню, которое позволит создать вашу собственную CSS-анимацию. Плагин поддерживает множество CSS-анимации, из которых можно выбирать.

Прежде всего, вам нужно выбрать стиль анимации. После этого, выбираем, сколько будет проигрываться анимация, и когда она будет появляться. Вы можете проиграть анимацию по клику, остановить ее или же прокрутить.

Как только все настроено так, как вам нравится, вы можете смело жать на «Animate it», чтоб посмотреть привью анимации.

Потом жмем на кнопку «Insert», чтоб добавить анимацию на страницу или запись WordPress. Вы заметите, что в редакторе записи плагин добавляет шорткод с демо контентом внутри.

Теперь вам следует будет удалить этот код и заменить его собственным контентом, картинкой или всем тем, что вы хотите анимировать.

Теперь, когда вы закончили, сохраните или опубликуйте запись. Открыв нужную запись вы увидите там ваш красиво анимированный контент.

Используя специальный Class Generator вы можете создать анимацию, скопировать код и вставить его потом например, в виджет, в специальном поле.