Створення адаптивних веб-макетів для сайтів або портфоліо може виявитися не таким простим завданням. Спочатку потрібно буде шукати шаблон Photoshop під конкретні пристрої, для яких потрібно зробити макети. Потім робити скріншоти, вирізати їх та додавати до файлів Photoshop.
Дивіться також:
Але якщо ваш сайт знаходиться на платформі WordPress, за допомогою безкоштовного інструменту ви легко зробите макети прямо в редакторі записів або сторінок.
плагін Device Mockups
У плагіні Device Mockups використовуються шорткод для відображення скріншотів, відео або іншого контенту в адаптивному макеті. Наприклад, можна вставити скріншот у пристрій, використовуючи відповідний шорткод:
[device type="macbook"]<img src="http://example.com/wp-content/uploads/2014/06/tavern-screenshot-mbp.png" alt="tavern-screenshot-mbp"/> [/device]
Цей шорткод відобразить скріншот у такому вигляді, як це виглядало б на retina-екрані MacBook Pro:
Цей плагін навіть підтримує stacked-параметри в шорткоді, тому ви можете додати різні пристрої для спільного виведення кінцевого результату. Можна об'єднувати пристрої на свій розсуд для створення макетів користувача.
Всі доступні шорткоди можна знайти на сторінці з інформацією про плагін або ж отримати до них доступ через кнопку у візуальному редакторі:
Плагін підтримує наведені нижче пристрої, для яких доступні рекомендовані розміри зображень для того, щоб ви могли підготувати відповідні макети:
- iPhone 6 – 1334×750
- iPhone 6 Plus – 1920×1080
- iPhone 5s – 1136×640
- iPhone 5 – 640×1136
- iPad – 2048×1536
- iMac – 1920×1200
- MacBook Air – 1440×900
- MacBook Pro – 2560×1600
- Galaxy S3 – 720×1280
- Nexus 7 – 1920×1200
- Surface – 1920×1080
- Lumia 920 – 768×1280
- Chrome – 1440×900
- Firefox – 1440×900
- Safari – 1440×900
Якщо ви збираєтеся створювати адаптивні макети для вашого сайту на WordPress, цей інструмент заощадить вам масу часу. Він особливо знадобиться, якщо ви не дуже дружите з програмами редагування зображень, наприклад Photoshop.
З дати релізу плагіна його розробник уже встиг зробити кілька оновлень. Device Mockups можна скачати безкоштовно на WordPress.org, а додаткову інформацію знайти на GitHub.
Джерело: wptavern.com
Коментарі до запису: 0