4 плагина для того, чтобы помочь вашим мобильным пользователям. Плагин адаптивного дизайна для вордпресс
Топ 5 адаптивных WordPress плагинов
От автора: каждый день все больше людей выходят в интернет через мобильные устройства. Адаптивные веб-страницы довольно распространены в наше время, но если вы делаете что-то адаптивное, то адаптивность должна быть во всем.
Посетители вашего сайта репостят ваши статьи и страницы, увеличивая ваш трафик. Почему бы не облегчить им жизнь и не добавить адаптивную возможность поделиться контентом через их профиль в социальной сети?
Плагины «поделиться в социальных сетях» заполнили весь каталог WordPress Plugin и найти среди них парочку, которые будут хорошо смотреть и работать на вашем сайте довольно сложно. В этой статье мы рассмотрим топ 5 адаптивных плагинов для обмена контентом в социальных сетях, разберем выдающиеся особенности каждого из них.
Жажда адаптивных плагинов «поделиться в социальных сетях»
Самые популярные плагины для социального обмена в WordPress Plugin Directory уже адаптивны, так как разработчикам и веб мастерам крайне важно интегрировать элементы адаптивного дизайна в свои сайты для улучшения пользовательского опыта.
Неадаптивный кнопки при просмотре социальных сетей, если просматривать страницу с мобильных устройств, разрушают весь внешний вид, элегантность и юзабилити вашего сайта. Небольшие правки в макете страницы это наименьшая из проблем; существует вероятность того, что кнопки социальных сетей перестанут отвечать на запросы, произвольно уменьшатся или замедлят ваш сайт.
По данным исследования за последний год треть всех веб-страниц открывается через мобильные устройства. И рисковать трафиком и числом просмотров сайта из-за неадаптивного плагина не самое умное решение. Разберем лучших из лучших среди адаптивных плагинов для репостов в социальных сетях для WordPress.
Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?
Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress
Узнать подробнееWP Social Sharing
WP Social Sharing — бесплатный, легковесный плагин, с помощью которого можно добавлять свои стили CSS и JS код. Плагин не только простой и легкий, он также может похвастаться 100% адаптивными кнопками социальных сетей.
Особенности. Вместо изображений плагин работает с CSS3 для создания кнопок. Полноразмерные кнопки автоматически конвертируются в иконки на маленьких экранах мобильных устройств (с шириной меньше 480px). Можно добавить кнопки социальных сетей Facebook, Google+, LinkedIn, Twitter, Xing и Pinterest. С помощью плагина можно настраивать текст кнопок с иконками и менять их порядок.
Для работы с этим бесплатным плагином не нужно быть профессиональным веб-разработчиком. WP Social Sharing можно легко интегрировать в любую тему с помощью удобного шорткода.
Плюсы:
100 адаптивный
Интеграция через шорткоды
Кнопки на CSS3
Минусы:
Ограниченное число настроек
Кнопки только для шести социальных сетей
Вывод. WP Social Sharing – отличный бесплатный плагин на тот случай, если вы ищите простое решение. В нем не нужно будет сходить с ума в настройках или полдня подбирать разные цвета, размеры и формы. Если для вас не принципиально количество настроек, это хороший вариант для вас.
Sharify Social Share Buttons
Sharify Social Share Buttons – кнопки социальных сетей с красивым дизайном, придающие премиум вид вашему сайту совершенно бесплатно. Пользователи вашего сайта могут делиться постами через 9 различных платформ социальных сетей. Плагин гордится своей скоростью – самый быстрый плагин социальных сетей для WordPress. Для еще большего контроля веб-разработчикам предлагаются дополнительные функции, как панель администратора и недельные обновления.
Особенности. С помощью плагина Sharify Social Share Buttons можно добавить кнопки для Twitter, Facebook, Google Plus, Reddit, Pocket, LinkedIn, Pinterest, Email и VK. Если некоторые из них вам не нужны, их можно скрыть. В плагине также показывается, сколько раз пользователи поделились постом или страницей в Twitter, Facebook, Google+ и LinkedIn.
Настройка ограничивается сменой цветов кнопок. Для большинства из вас это не будет какой-то проблемой, так как кнопки по умолчанию очень красивые, и вы не захотите изменять их внешний вид. Плагин поддерживает шорткоды для облегчения добавления кнопок на страницы и посты.
Sharify Social Share Buttons – самый быстрый плагин для WordPress, так как он кэширует все данные. Через панель администратора можно включить и изменить длительность кэширования счетчика репостов. Кэширование сильно снижает нагрузку на сервер, из-за чего страницы грузятся быстрее, повышая производительность вашего сайта.
Плюсы:
Кнопки для девяти платформ социальных сетей
Кэширование счетчика репостов
Поддержка SSL
Минусы:
Ограниченная настройка
Вывод. Sharify Social Share Buttons подходит тем, кому нужно бесплатное и адаптивное решение с привлекательным дизайном. Если вы ищите плагин с кучей настроек или тот, в котором можно добавлять свой CSS код, то вам придется продолжить поиски.
Mashshare
Те, кто не хочет платить за премиум плагины социальных сетей, но хочет получить все те же отличные опции, должны подумать об установке Mashshare. С помощью данного бесплатного плагина вы сможете добавить кнопку почти любой социальной сети.
Особенности. С плагином Mashshare идет большой ряд аддонов (как платных, так и бесплатных), которые можно использовать для того, чтобы создать именно ту кнопку, какой вы себе ее представляете. Один из бесплатных аддонов, который вы, скорее всего, сразу же установите, сделает кнопки полностью адаптивными.
Когда аддон замечает, что страница открыта через устройство с меньшим экраном, он уменьшает ширину кнопок. По желанию также можно удалить счетчик репостов и текстовое описание.
В плагине без всех аддонов есть счетчик с общим количеством репостов, а также горизонтальная панель самих кнопок. Отличительная особенность плагина Mashshare в том, что с его помощью можно добавить кнопку подписки как на список email, так и на новостную рассылку. Плагин дружелюбен к разработчикам и поддерживает шорткоды для тех, кто не разбирается в программировании.
Расширяемый с помощью большого количества аддонов
Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?
Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress
Узнать подробнееБольшое количество настроек
Переходное кэширование и кэширование объектов
Кнопки высокого разрешения
Минусы:
Показывает общее количество репостов во всех социальных сетях
Премиум аддоны
Вывод. Mashshare – мой любимый адаптивный плагин социальных сетей в WordPress среди бесплатных. В нем есть почти все, начиная адаптивностью, высоким разрешением кнопок и заканчивая кэшированием.
Custom Share Buttons with Floating Sidebar
Custom Share Buttons with Floating Sidebar есть как в бесплатной, так и в платной версии. Мы рассмотрим бесплатную.Custom Share Buttons with Floating Sidebar интегрирован с lightbox контактной формой и плавающим сайдбаром. В премиум версии сайдбар и контактная форма полностью адаптивны. Легковесный плагин поддерживает семь полностью настраиваемых платформ социальных сетей.
Особенности. Прежде всего плагин поддерживает Facebook, Twitter, LinkedIn, Pinterest, Google+, StumbleUpon и Reddit. Можно изменять фоновый цвет кнопок и добавлять изображения.
Плагин позволяет редактировать текстовое описание и позиционировать как сами кнопки, так и сайдбар. Есть опция отключения сайдбара на маленьких экранах мобильных устройств, с помощью которой можно настраивать дизайн плагина.В премиум версии плагина lightbox и сайдбар полностью адаптивны. Плагин работает без JS файлов и не замедляет ваш сайт.
Плюсы:
Плавающий сайдбар
Большое количество настроек
Семь кнопок социальных сетей
Минусы:
Нет счетчика репостов
Адаптивный плавающий сайдбар и lightbox в премиум версии
Выводы. Custom Share Buttons with Floating Sidebar — сильно настраиваемый и довольно забавный плагин. Однако он не отвечает некоторым важным критериям, которые большинство из нас хотят видеть в плагинах социальных сетей, например, счетчик репостов.
Easy Social Icons
С помощью Easy Social Icons можно добавить кнопки социальных сетей на свой сайт, но нельзя редактировать их внешний вид. Для некоторых это не такая и большая проблема. Тем более, что стандартные изображения намного быстрее узнаются.
Особенности. Easy Social Icons работает как адаптивные веб-сайты. Среди настроек только ширина и ориентация кнопки.Кнопки можно разместить как горизонтально, так и вертикально в зависимости от вашей темы и дизайна страницы. В плагине также есть виджет, с помощью которого можно добавлять кнопки в сайдбар.
С помощью шорткодов кнопки социальных сетей можно легко добавлять в любые посты или страницы. Порядок кнопок можно изменить, просто перетянув их на нужное место.
Плюсы:
Прост в использовании
Горизонтальная и вертикальная ориентация
Интеграция с виджетами и шорткодами
Минусы:
Ограниченная настройка
Нет счетчика репостов
Вывод. Easy Social Icons – один из самых простых плагинов социальных сетей. Настройка ограничена выбором ориентации кнопок, но их можно расположить в вашем сайдбаре с помощью встроенного виджета.
Заключение
Факт в том, что все больше людей заходят в интернет через мобильные устройства, и полностью адаптивные сайты сейчас намного важнее, чем когда-либо раньше. Оставлять что-то на потом при переходе на адаптивный сайт больше нельзя.Drazen Prastalo в своей статье Social Sharing WordPress Plugins Optimized for Mobile подчеркнул, что при выборе плагина социальных сетей нужно помнить о нескольких вещах – дизайн, функционал и скорость.
В данной статье мы рассмотрели топ 5 адаптивных плагинов социальных сетей по критерию Drazen. Статья написана для вас, чтобы помочь вам перейти на полностью адаптивный сайт с помощью адаптивных плагинов социальных сетей.
А какой плагин социальных сетей вы используете на своем сайте? У какого из плагинов, на ваш взгляд, самый лучший дизайн, фукнционал, скорость? Пишите об этом в комментариях.
Автор: Rafay Saeed Ansari
Источник: http://www.sitepoint.com/
Редакция: Команда webformyself.
Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?
Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress
WordPress-Профессионал
Посмотрите информацию по API WordPress, благодаря Вы сможете научиться писать плагины и виджеты
Научиться
webformyself.com
Обзор плагинов на WordPress для Адаптивного сайт
Делаем адаптивный сайт на WordPress: разнообразные расширения для эффективной работы
Сегодня каждый сайт должен быть адаптивным под различные платформы. Ведь мобильные устройства становятся все более популярными, ими пользуется все больше людей.
Поэтому важно, чтобы сайт был удобен в использовании, как на обычном ПК, так и на любом мобильном гаджете, независимо от разрешения экрана.
Адаптивность сайта дает возможность пользователям избежать трудностей при пользовании ресурсом. Что, кстати, повышает его посещаемость.
Адаптивность сайта – это просто: дополнения для WordPress
Сегодня мы поговорим о том, какие плагины для WordPress позволяют легко и просто адаптировать сайты. Таких дополнений существует несколько и каждое из них – со своими особенностями.
Ознакомившись с нашим обзором, вы сможете подобрать себе именно то расширение, которое подходит более прочих.
WP Lightbox 2
Функциональное, мощное дополнение, позволяющее выполнить масштабирование сайта. Среди разнообразия функций следует выделить возможность:
- затемнение фоновых изображений и подложек во время открытия фото/картинки;
- выполнить дополнительную настройку анимации при переходах в галереях.
Основное предназначение разработки – адекватный показ изображений и галерей, но поскольку он позволяет выполнить адаптацию под мобильные устройства, мы решили включить его в обзор.
Responsive Widgets
Дополнение разработано для того, чтобы помещать на сайтах адаптивные виджеты с текстами разнообразных разрешений.
При настройке пользователь указывает, какие именно виджеты отображать на тех или иных устройствах.
WordPress Mobile Pack
Посредством данного плагина на мобильных гаджетах отображается адаптированный сайт. Дополнение простое в использовании – достаточно просто активировать его, а он уже самостоятельно будет выбирать версии для демонстрации. Даже не придется использовать какие-либо дополнительные настройки.
Именно благодаря простоте эксплуатации WordPress Mobile Pack распространен среди пользователей. В частности, как показывает статистика, его скачали несколько десятков человек.
Responsible
Интереснейшее дополнение, посредством которого проводится тестирование отображения сайта на устройствах с различным разрешением дисплея/экрана.
После активации доступна панель с разнообразными разрешениями, позволяющими проверить, насколько корректно будет отображаться сайт на том или ином экране. Данная разработка незаменима для тех, кто делает адаптивные сайты.
Hammy
Основное предназначение – выполнить масштабирование и оптимизацию рисунков, фотографий и т.д. Однако начинающим пользователям применять его не рекомендуется, поскольку необходимо знать программный код. Плагин доступен на оффсайте WordPress.
WPTouch Mobile Plugin
Интересное дополнение, позволяющее самостоятельно создавать различные темы для мобильных платформ. Плагин невероятно функционален, поскольку включает в себе множество инструментов.
Однако при его использовании следует убедиться, что применяется последняя версия – в противном случае вероятны различные технические трудности.
Хотите узнать много интересной и полезной информации о WordPress? Зарегистрируйтесь на наш бесплатный курс!
ifish2.ru
4 плагина для того, чтобы помочь вашим мобильным пользователям
Мы живем в эре мобильных устройств уже несколько лет и в качестве дизайнеров, и в качестве разработчиков. В сегодняшней статье мы сделаем обзор нескольких плагинов, которые помогут вашему сайту достойно выглядеть и работать для посетителей с мобильных устройств.
Мобильные пользователи делятся на тех, кто заходит на сайт с планшета или со смартфона. Итого, нам нужно делать такие сайты, которые будут адаптированы под мобильные устройства, иначе мы потеряем значительную часть читателей или пользователей приложений.
Но как этого добиться? Только путем адаптирования сайта и придания ему «mobile ready». В статье мы сделаем обзор плагинов, которые помогут вашему сайту достойно выглядеть и работать для посетителей с мобильных устройств.
Плагины, которые помогут сделать ваш дизайн адаптивным
Вряд ли вы не слышали таких терминов как «responsive web design» или «adaptive web design» в течение последних лет. Целью такого дизайна является то, чтобы «вписать» страницы сайта в экраны мобильных устройств.
Четыре плагина для WordPress, представленных ниже, могут помочь вам предоставить вашим пользователям страницы сайта, подготовленные для мобильных.
Hammy
![wp-plugin-hammy-image[1]](/800/600/http/wpincode.com//wp-content/uploads/2014/09/wp-plugin-hammy-image1.jpg)
Hammy — это удобный плагин, который изменяет размер изображений на вашем сайте для мобильных устройств. Он заменяет теги <img> на тег <figure> и использует код WordPress для ресайза картинок.
Для того, чтобы начать пользоваться плагином, вам необходимо установить несколько брейкпоинтов и выбрать элемент HTML контейнера. С помощью указанных вами брейкпоинтов плагин сможет изменять размер изображений, когда экран достигнет этих брейкпоинтов. Также можно задать какое-то название класса для того, чтобы игнорировать определенные изображения.
Responsive Widgets
![wp-plugin-responsive-widgets-image[1]](/800/600/http/wpincode.com//wp-content/uploads/2014/09/wp-plugin-responsive-widgets-image1.jpg)
Responsive Widgets — это плагин, который добавлять новые text/HTML-виджеты в WordPress; эти виджеты появляются только на определенных устройствах типа iPads, Nooks, PlayStation Vitas, а также на других общих устройствах типа планшетов и смартфонов.
Для того, чтобы воспользоваться плагином, вам необходимо базовое понимание работы виджетов WordPress. Откройте страницу виджетов и вы увидите много новых виджетов для следующих устройств и типов экранов:
- Mobile
- Mobile (landscape)
- iPhones and iPods
- Phablets
- Tablet (portrait)
- Tablet (landscape)
- iPad Portrait
- iPad Landscape
- Nexus Tablets
- Kindle Tablets
- Surface Tablet
- Nook Tablets
- PS Vitas
- Desktops
- Large Monitors (1240px+ screens)
- Print only
У многих из этих виджетов есть чекбоксы, которые позволяют настроить исключения. Например, если вы хотите вывести виджет на планшетах, но не на iPad-ах, то отметив галочку, у вас получится задуманное.
WP Lightbox 2
![wp-plugin-wp-lightbox-2-image[1]](/800/600/http/wpincode.com//wp-content/uploads/2014/09/wp-plugin-wp-lightbox-2-image1.jpg)
WP Lightbox 2 — очень популярный плагин для того, чтобы реализовать lightbox», и он позволяет вам использовать всплывающие в окошке изображения с элементами наложения. Это не совсем тот плагин, который поможет вам с адаптивным дизайном сайта, однако он адаптивен по своей сутки, поэтому стоит обратить на него внимание.
Для того, чтобы использовать плагин, вам не нужно ничего делать, кроме как активировать его. В плагин есть несколько настроек типа активации Lightbox в комментариях или изменения длительности анимации, но в целом он работает сразу после активации и не нуждается в дополнительной настройке.
Responsible
![wp-plugin-responsible-image[1]](/800/600/http/wpincode.com//wp-content/uploads/2014/09/wp-plugin-responsible-image1.jpg)
Responsible — это очень полезный плагин для WordPress, который позволяет вам тестировать адаптивные дизайны «на лету» в своем браузере. Он использует Viewport Resizer Bookmarklet для того, чтобы поместить фиксированную панель вверху страницы, где можно изменить размер страницы на определенные разрешения, имитирующие разрешения смартфонов, планшетов или разрешения десктопных компьютеров, а также позволяет задавать произвольные разрешения экрана.
Для того, чтобы использовать плагин, просто активируйте его и перейдите на одну из своих страниц. Панель появится на любой из них, и вы можете тестировать ваши варианты адаптивного дизайна без проблем.
Заключение
В веб-дизайне нужно постоянно следить за трендами и предлагать пользователям то, что они хотят, особенно если вы что-то хотите от них взамен (будь то деньги или просто похвала за материал). В наши дни «mobile ready» становится стандартом и было бы глупо «принимать» ваших пользователей на сайте, который криво выглядит на мобильных устройствах.
Если вам известны другие хорошие плагины, которые помогут стать сайту более доступным для мобильных устройств, делитесь ими в комментариях.
Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.
VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
wpincode.com
Делаем адаптивный дизайн в темах вордпресс своими руками.
Привет всем на wpsovet.ru. Без раскачки и теории начинаем к практике. Статья будет просто огромная, пройдем весь путь, про то как сделать адаптивный дизайн сайта самому, все распишу очень подробно, так что вникайте и применяйте.
Содержание.
- Задаем браузеру команду.
- Изменяем значения на максимальные.
- Настраиваем сайтбар и контент.
- Определения порога включения.
- Вводим медиа запросы.
Задаем браузеру команду.
Для начала нам надо сказать браузеру, чтобы он подстраивался под разные разрешения экранов. Нам не достаточно просто задать стили, браузер должен быть уверен в своих действиях. И чтобы это осуществить нам надо ввести в раздел header небольшой код. Заходим в административную панель ->внешний вид ->редактор ->находим header.php. И перед тегом </ header>, вводим вот этот код.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Если нужна подсказка, куда вставить код, то смотрим скриншот.
На этом пункт закончен, только не обольщайтесь, остальные раз в десять будут больше.
Изменяем значения на максимальные.
Вторым шагом будет применение технологии в CSS, называемой резиновой версткой. Этот простой способ будет автоматом сжимать и расширять наш сайт до какого нам нужно размера. Вся суть сводится к тому, чтобы заменить все фиксированный величины на изменяемые максимальные (не знаю научного термина поэтому придумал сам). На не адаптированных сайтах, все величины фиксированные и в коде они выглядят так.
width:960px;А для того чтобы сайт мог сжиматься, надо лишь прибавить к параметру width, вот такую приставку max.
max-width:960px;Этот параметр указывает, что максимальная ширина может быть только до указанного значения (в моем случае 960 px), а может быть и меньше. И сколько не растягивай окно (а точнее сказать увеличивать разрешение), сайт не изменит своего максимального размера, а вот сжимать сколько хочешь.
Проще говоря берете все глобальные элементы: вообще вся область просмотра, раздел контента, сайтбар, футер, шапка, и вообще, тут надо экспериментировать, и прибавляете приставку max к ширине. В большинстве случаев темы бесплатные, и сообразить сложно откуда взять то или иное значение. Для примера я возьму всю область просмотра, и найду стиль который регулирует его отображение, смотрите ниже на снимок и к нему описание.
- Нажимаем на экране правой кнопкой мыши и выбираем «Просмотр кода элемента», находим нужный нам блок, удобно все тем, что область подсвечивается синим цветом, я просто навожу мышкой и смотрю на выделения, где мне надо там останавливаюсь, в данном случае меня интересует все отображение.
- Это сам HTML код, где все это располагается.
- В моей теме за вывод дизайна всей области просмотра отвечает стиль main.
- А вот тут можете видеть, что самая большая величина 960 px.
Теперь мы знаем стиль, который нам и нужен. Переходим в административную панель ->внешний вид ->редактор ->файл style.css. Ищите тот стиль который мы определили, и задаем ему max-width.
И так со всем остальным на блоге поступаем так же.
Настраиваем сайтбар и контент.
Две важные части блога, в классике, первый справа, второй слева. И нам надо сделать так чтобы они тоже, нормально вели себя в дальнейшем.
Для успешного адаптивного дизайна, нам надо разделить эти два пункта на проценты. Предположим у нас ширина всего сайта 1000px, контент 750 px, а сайтбар, логично, 250 px, значит первый занимает 100%, второй 75%, а третий 25px, вот и вся простая арифметика.
Так вот нам надо вставить эти проценты в файл стилей, у меня за вывод отвечают два класса sidebar и content (у вас скорее всего другие), так же идем в style.css, и меняем всё. До изменений у меня было так.
После правки кода.
.content{width:70%;float:left;} .sidebar{width:30%;float:right;}Данное действие нам поможет в будущем, смотрите и читайте ниже, пока что вы никаких изменений не увидите.
Определение размеров откуда будем начинать.
Теперь идет визуальная работа, нам надо определить с какого предела сайт начинает «плыть», в смысле изменяться, и плохо отображаться на экране. Вообще чтобы определить есть ли на блоге мобильная версия с адаптивным дизайном, надо просто сжать окно браузера, и если все красиво, то он присутствует. Видите у меня, шапка заменяется на фон, область контента, на весь экран, а сайт бар выводиться снизу.
Это так для информации, для нас же сейчас важно узнать предел разрешения. Для этого нам поможет специальный инструмент, жмем в области контента (да вообще в любом месте) на правую кнопку и выбираем «Просмотр кода элемента», и начинаем сжимать окошко, чтобы найти тот самый момент где все становиться не красиво.
Я сделал на примере ресурса по проверке орфографии text.ru. Когда вы включите режим просмотра кода, то у вас появиться линейка сверху и с боку, нас интересует только верхняя, потому как именно по ширине и будет настраиваться весь адаптивный дизайн. Так вот в данном моменте предел составляет 1050 px (именно в пикселях идет измерение).
Вот мы и нашли точку изменения, от которой и будем дальше плясать, переходим к следующему разделу.
Понятие медиа запроса.
Вот и дошли почти до финала, сразу напишу определение.
Медиа запрос-это такой запрос, который меняет какой-либо параметр исходного элемента, на свой при определенных условиях.
В нашем случае мы будем заменять стили у определенного объекта, при изменении разрешения, а в частности ширины. Видов великое множество, но мы будем пользоваться только одним. Я составил вот такой код в самый низ файла style.css, который вы уже будете заполнять сами, я лишь покажу один пример.
@media screen and (max-width: "ваш предел изменения сайта"px) and (min-width: 949px){ } @media screen and (max-width:950px) and (min-width: 799px) { } @media screen and (max-width:800px) and (min-width: 500px) { } @media screen and (max-width: 499px) and (min-width: 341px){ } @media screen and (max-width: 340px) and (min-width: 240px){ }В первой строчке вам надо ввести, то число с которого у вас начало все меняться (мы его определяли в прошлом разделе). Я выбрал самые популярные разрешения экранов, планшеты, смартфоны, в портретном и альбомном положении, и тому подобное. Как можете видеть, каждый запрос действует от одной точки до другой, эти цифры вы можете поменять на свои, тут надо смотреть на каждом участке и настраивать.
Сейчас вам покажу сам принцип, и разберу его на примере наших старых друзей контента и сайтбара, нам надо добиться того чтобы, один расширился, а другой сполз вниз. Помните проценты, мы не зря их вводили, теперь надо им надо принять обоим значения по 100% каждый, тогда мы и добьемся нужного эффекта. Для примера, даю код.
@media screen and (max-width: 1000px) and (min-width: 949px){ .content { width: 100%; float: none; } .sidebar { width: 97%; float: none; } } @media screen and (max-width:950px) and (min-width: 799px) { .content { width: 100%; float: none; } .sidebar { width: 97%; float: none; } } @media screen and (max-width:800px) and (min-width: 500px) { .content { width: 100%; float: none; } .sidebar { width: 97%; float: none; } } @media screen and (max-width: 499px) and (min-width: 341px){ .content { width: 100%; float: none; } .sidebar { width: 97%; float: none; } } @media screen and (max-width: 340px) and (min-width: 240px){ .content { width: 100%; float: none; } .sidebar { width: 97%; float: none; } }Как можете видеть, медиа запросы к этим двум объектам надо прописывать в каждом интервале, потому как нам нужно чтобы этот эффект оставался неизменны. Если же мы пропустим хоть один, то на каком-то промежутке, области контента и сайтбара, будут в оригинале занимать 75% и 25%.
И еще в пишем только те стили, которые вам нужно изменять, допустим в оформлении шрифта у вас указано размер, семейство, цвет. А для адаптивного отображения вам нужно только сменить размер, так вот и прописывайте его, а все остальное оставьте.
Надеюсь вы поняли, принцип прост:
- Выбираете промежуток.
- Сужаете окно браузера, параллельно включив «Просмотр кода элемента», чтобы видеть линейку.
- Смотрите какие компоненты начинают вести себя плохо.
- Прописываете медиа запросы к ним, чтобы все встало на свои мета.
На этом все, конечно, где-то может не понятно, но на это вам есть комментарии, спрашивайте, общайтесь, буду рад.
wpsovet.ru
Как легко создать адаптивную галерею для WordPress сайта с помощью плагина Envira
В вордпрессе есть встроенные функции по созданию галерей, вот только у них ограниченные возможности, так что со стандартным набором инструментов не удастся создать эффектную адаптивную галерею. Да, существует множество плагинов по созданию галерей, но большинство из них достаточно сложные, а главное очень сильно перегружают сайт. Однако не стоит метаться в поисках лучшего плагина, т.к. лидер известен – это Envira Gallery.
В этой статье я расскажу, как легко создать адаптивную галерею для сайта с помощью плагина Envira Gallery.
Почему Envira Gallery лучше других?
Если у вас сайт-портфолио или сайт фотографий, то вы не понаслышке знаете о проблемах, которые возникают при создании фото галерей (медленная скорость работы сайта, недостаток организованности в работе, несовместимость браузеров/устройств, сложная настройка и многое другое).
Однако обо всех этих проблемах можно было забыть, как о страшном сне, когда Томас Гриффин, хорошо известный разработчик WordPress, создал Envira Gallery.
Плагин предельно прост в использовании, а главное отличается потрясающей скоростью. В отличие от других плагинов по созданию галерей, Envira очень быстрый. И это при том, что он идет с такими встроенными функциями, как создание адаптивных галерей, лайтбоксов, слайдеров, пользовательских
CSS и т.д. Кроме того, плагин также снабжен функциями защиты изображений, тегами, т.е. вы можете группировать изображения, присваивая им тот или иной тег; глубинного связывания, полноэкранного режима, масштабирования и многими другими функциями.
После установки плагина Envira давайте теперь перейдем непосредственно к созданию адаптивных красивых галерей для сайта.
Создание адаптивных галерей с помощью Envira Gallery
Первое, что вам придется сделать – это купить плагин (да, он платный). Предлагается несколько пакетов услуг, поэтому выбирайте тот, что больше всего подходит под ваши потребности и соответствует кошельку. Установите и активируйте плагин. Если у вас возникнут с этим сложности, то читайте мое руководство, как устанавливать плагины в WordPress.
После активации у вас в боковой панели админки должно появиться меню Envira Gallery. Для создания адаптивной галереи для сайта перейдите по маршруту Envira Gallery » Add New.
Вы можете загрузить фото или изображения, как с компьютера, так и с медиа библиотеки WordPress. как только вы это сделаете, вы увидите их миниатюры на экране.
Вы можете поменять порядок изображений, как хотите, просто перетаскивая их. Вы также можете прописать к каждому изображению мета данные (заголовки, alt-теги), просто щелкнув по значку «информация» около каждого изображения. Плагин позволяет добавлять в заголовки изображений HTML, а также добавлять в поле «Image Hyperlink » ссылки на любую страницу сайта.
Советую почитать статью — как оптимизировать изображения на сайте.
Когда вы закончите с метаданными, перейдите ко вкладке «Config» для того, чтобы настроить параметры изображений. В появившемся экране вы сможете настроить вид конкретной галереи. Здесь можно будет выбрать количество столбцов будущей галереи, выбрать тему оформления, тему лайтбоксов и другое. В базовом наборе плагин поставляется с одной темой галереи и лайтбокса. Однако вы в любое время можете при желании установить дополнительные темы, которые доступны на сайте плагина.
Во вкладке Lightbox, вы можете настроить различные параметры для лайтбокса, который используется для отображения фото в полноэкранном режиме по щелчку по ним. Именно здесь можно решить нужны ли и как настроить заголовок изображений, стрелки, спрятать/показать панель инструментов лайтбокс галереи.
Во вкладке Thumbnails настраивается отображение миниатюр изображений. Эти миниатюры появляются под лайтбоксом, когда пользователь щелкает по изображению. Это нужно для того, чтобы пользователь мог просмотреть всю галерею, щелкнув по миниатюре изображения.
Когда вы будете довольны всеми выбранными настройками для будущей адаптивной галереи для сайта, щелкните по кнопке «Publish» и галерея появится. После публикации галереи вы увидите шорткод, который можно будет вставить в запись, на страницу или в виджет, где бы вы хотели видеть свою галерею.
Создание галереи непосредственно в записи, на странице или в пользовательском типе записи
Плагин позволяет создавать адаптивные галереи для сайта прямо с экрана редактирования записи. Это означает, что вам не нужно будет переключаться с различных экранов для создания галереи. Просто создайте новую запись или страницу в WordPress и щелкните по кнопке Envira Gallery, которая располагается вверху или в самом низу редактора записи.
В зависимости от выбранного пакета услуг Envira Gallery поставляется с дополнительными аддонами, которые можно установить для расширения функционала плагина. На момент написания статьи доступно 9 аддонов.
Надеюсь, эта статья поможет вам создать адаптивную запоминающуюся галерею для сайта с помощью замечательного плагина Envira. Для отзывов или вопросов можно писать в комментариях, либо непосредственно мне в социальных сетях. Подписывайтесь, и не забывайте делиться информацией.
smarticle.ru
