Студия дизайна «Разумный подход» Владимира Соловьёва, podhod.ru

Плагины Crocoblock для создания сайта на Wordpress

Владимир Соловьёв, 24 ноября, 2020

Используйте плагин Crocoblock для Wordpress c Elementor

Элементор — это современный визуальный редактор темы и страниц для создания сайтов на Wordpress, не требующий программирования, и с использованием готовых шаблонов или вашего дизайна. А Крокоблок — это огромное число плагинов, названия которых начинается на «Jet», которые значительно расширяют возможности Elementor.

Виджеты, мегаменю, конструктор и фильтры для WooCommerce  и многое другое. Существуют расширения JetBooking и JetApointment, для создания сайтов резервирования мест в гостинице или записи на услуги. Важнейшим является плагин Crocoblock JetEngine — это конструктор взаимосвязей разных типов данных. Используется для создания CPT и Dynamic Fields которые возможностями интегрированы c Elementor, чем преимущественно отличается от аналогов: ACF, Pods или Toolset Types. Это позволяет легко создавать сложный вывод листинга архивов, кастомизацию содержания и оформления записей. Тем самым, Крокоблок облегчает жизнь разработчика под Вордпресс в 90% регулярных задач.

Сперва на сайт с WP устанавливается бесплатный плагин Elementor, потом Crocoblock. И можно даже не ставить Pro версию Элементора, если не требуются его возможности, поскольку в JetElements есть более функциональные аналоги.

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

Лифтинг логотипа

Владимир Соловьёв, 12 сентября, 2019

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

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

  • Мелкие детали, неудобные при использовании в печати;
  • Неприятные острые углы и маленькие расстояния между элементами знака мешают использовать знак в мелком размере;
  • Большое количество цветов — восемь;
  • Один из цветов лишком бледный;
  • Из-за своей формы, буква «Ф» слишком выделяется.

Как можно улучшить такой логотип, чтобы изменения были не очень заметны?

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

Визуальный редактор для Wordpress

Владимир Соловьёв, 30 мая, 2019

Идёт распродажа плагина Elementor Pro для Wordpress, скидка 20%. 

Это современный визуальный редактор для Wordpress, чтобы из готовых блоков драг-н-дропом строить станицу, анимацию. Очень удобен для создания сайтов-визиток, лендингов, блогов.

Сперва устанавливается бесплатный плагин Elementor. А к нему приобретенный плагин-расширение Elementor PRO, который серьезно увеличивает возможности: библиотека готовых страниц, конструктор тем и попапов, создание своих шаблонов. Подходит и начинающим и опытным разработчикам. Элементор можно использовать как инструмент прототипирования будущего сайта.

Есть большой объём хорошей документации, множество видеоуроков, существует большое сообщество, огромное количество расширений от других разработчиков. Разработчики ведут Github и несколько групп в фэйсбуке. Всё это хорошие признаки того, что проект будет только больше развиваться и уверенно поддерживаться.

Макет сайта «в рамке» ноутбука

Владимир Соловьёв, 9 сентября, 2016

Некоторые дизайнеры, для демонстрации своей работы, вставляют созданные ими макеты сайтов в фотографию экрана монитора, ноутбука, планшета или телефона (обычно в технику Эппл).

Иногда это совмещается с искажением макета в перспективе, с уменьшением.

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

Причины, по которым дизайнер может решить показывать «макеты в рамке» могут быть такие:

  • Без рамки макет будет выглядеть не так эффектно, дизайнер пытается усилить слабое оформление;
  • Макет сам по себе недостаточно хорошо держит форму, и требуется поддержать композицию;
  • Недостаточная проработка, например, на макете не хватает приятных деталей;
  • Предъявить без подробностей. По каким-то причинам вы не должны увидеть настоящий макет целиком.

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

Разумеется, есть задачи когда использование мокапа, в виде рамки из устройства, оправдано:

  • Показать, что расположение важных элементов сайта продумано и они умещаются на «первом экране»;
  • Продемонстрировать, что у пользователя не возникнет сомнений в том, что на сайте есть скролл;
  • Дизайн подразумевает вёрстку «на весь экран», совсем без прокрутки или только с горизонтальной;
  • Макет показывает как сайт выглядит среди других, созданных в том же стиле, продуктов: других сайтов и приложений, фирменной и сувенирной продукции.

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

Быстрая адаптация сайтов к высокому разрешению монитора

Владимир Соловьёв, 27 февраля, 2015

Исторический сложилось, что принципы указания размеров элементов веб-страницы в стилях CSS были сформированы при небольших, по сегодняшним меркам, разрешениях экранов. При этом в CSS приняты к использованию несколько различных систем измерения: привязанные к размерам пикселя px, к пропорциям браузера % и к размера шрифта em и pt. Чтобы не связываться с этим историческим наследием можно использовать современные возможности стилей.

Чтобы быстро адаптировать сайт к высоким разрешениям, не переделывая ничего кардинально, следует в стилях CSS на всеохватывающий тэг HTML поставить увеличение с помощью последовательных диапазонов media queries.

@media (min-width: 4200px) and all {
html{zoom: 3;}
}

@media (min-width: 3500px) and (max-width: 4199px) {
html{zoom: 2.5;}
}

@media (min-width: 2800px) and (max-width: 3499px) {
html{zoom: 2;}
}

@media (min-width: 2000px) and (max-width: 2799px) {
html{zoom: 1.5;}
}

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

Способ стоит использовать только на вёрстке не рассчитанной на высокие разрешения. Свойство zoom поддерживается сегодня практически всеми современными браузерами.