WordPress Elementor Crocoblock

Всем веб-девам рекомендую плагин CrocoBlock JetEngine:
https://crocoblock.com/plugins/jetengine/?ref=507
Это движок для кастомных типов записей (CPT) и их использованию. Имеет больше возможностей и лучше чем ACF, Toolset или Pods. По простому, это движок, который раскрепощает WP-блог в WP-любой-сайт.

Связкой WP+Elementor+JetEngine я несколько различных сайтов доводил от нуля до релиза в кратчайший срок, для проектов, которые сперва начинались на OpenCart, Drupal, на Django или Yii. Запуски новых проектов надо делать на чём-то более простом, и это в большинстве случаев это оказывается WordPress.

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

Также, вместо того чтобы выбирать Tilda я всем рекомендую выбрать WordPress с плагинами Elementor и JetEngine.
Из Тильды через год вы захотите вылезти, потому что почувствуете её потолок и потому что там примитивная CMS за ощутимую стоимость. Но окажетесь в западне миграции контента.

У Crocoblock огромное коммунити на гитхабе (Pro) и на фэйсбуке (казуал), и большой зоопарк сопутствующих плагинов, которые все друг с другом дружат. Тут я об том чуть подробнее расписал: https://podhod.ru/blog/crocoblock

 

WordPress база

Иногда говорят что WordPress медленный. В WP из коробки нет кэширования, только блог-минимум. Поставьте один любой плагин:

  • WP Super Cache
  • WP Fastest Cache
  • W3 Total Cache

они все примерно одинаковые.

  • А лучше всего LightSpeed Cache в связке c сервером LightSpeed на VPS.

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

  • Wordfence Security
  • All-In-One Security (AIOS)
  • Jetpack (я не использую за излишние функции)
  • Solid Security Basic — самый удачный на мой взгляд.

 

В чём вундерваффе?

Управлять контентом и SEO умеют многие CMS.

Делать красивые страницы из блоков и анимации умеют многие конструкторы сайтов.

Создавать и выводить данные умеют все фреймворки.

Но только у WP с Elementor и Crocoblock есть все эти возможности в единой среде.

 

Продвинутое применение

С Elementor не нужна Figma для прототипирования. Собирать страницы можно сразу в конструкторе из реальных блоков и слайдеров, с переменными цветами, правилами шрифтов, мобильными версиями и пр. То есть аналогичная простота, но на одно звено в пайплайне создания меньше — на превращение рисованного макета в вёрстку. То есть можно сразу всё кликать, реализовывать гипотезы, легко переделывать, и будут видны все проблемы на реальной странице. А когда всё устраивает, то перейти к украшательству. Посмотрите тут: https://podhod.ru/elementor

По красоте с Framer в Elementor сложно тягаться, в нём меньше направленность на анимацию и WOW-эффект. Но повторить это можно, ведь многое решается анимациями при скролле, они есть. Например, моя визитка, собрана за 3 дня:
https://podhod.com/vladimir/
Выбирая Фреймер это замыкает сайт на её неразвитую CMS и малое число платных расширений.

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

Очень важно что новые люди WP легко осваивают. В WordPress есть роли — права редактора, не позволяют менять вёрстку сайта, испортить её, редактор может только править текст в подготовленных дизайнером-разработчиком местах и публиковать. Если дать пользователю права автора, он не сможет опубликовать, только готовить черновики, которые проверит редактор. Есть плагин User Role Editor для создания дополнительных ролей, в котором можно создать любую нужную комбинацию прав.

Важно, что Google и Yandex заточены на Вордпресс, а на непопулярные CMS нет, на фреймворке, если не заниматься SEO кодом, тоже нет. А на WP есть бесплатный Yoast SEO, который решает все задачи видимости.

Это касается любых сайтов: визитки, лендинги, каталоги, блоги, СМИ, объявления, интернет-магазины, бронирование, дашборды личных кабинетов. Посмотрите эти демо-сайты. Приобретя Crocoblock их можно установить к себе за минуту. У каждого в основе JetEngine: https://crocoblock.com/dynamic-templates/?ref=507

Дизайн системы UI в Figma

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

Если вы про дизайн-системы ничего не знаете — начните изучение вопроса с этих библиотек дизайнов интерфейсов доступных в Фигме или просто используйте их:

Bootstrap 5 https://www.figma.com/community/file/1044316192441037087

United UI https://www.figma.com/community/file/1020079203222518115

Tailwind CSS UI https://www.figma.com/community/file/768809027799962739

Medusa UI https://www.figma.com/community/file/1278648465968635936

Align UI https://www.figma.com/file/PJ630SzPS3x2D807GYKHOk/

Box-shadow и rectangle-shadow

Для оформления веб-страниц часто нужна тень. В CSS есть тень, которую назвали почему-то «box-shadow», которая создаёт тень как от плоского прямоугольника, которая выглядит как его размытая исходная форма, а, не как ожидается из названия, как тень от коробки (box).

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

И, соответственно, стоило бы назвать такие тени по их объёмности: тень, которая создается от плоского прямоугольника назвать «rectangle-shadow», а тень которая имитирует выдавливание прямоугольного параллелепипеда — «box-shadow».

Что купить на Black Friday веб-разработчику?

Всем, кто делает сайты на WordPress рекомендую приобрести Crocoblock, там скидка 40% на Black Friday. В этом наборе плагинов есть мощнейший плагин JetEngine, позволяющий создавать записи любого типа и содержания. Один заменяет весь неудобный зоопоарк из плагинов ACF, Custom Post Type UI и Types. Поддержите украинских разработчиков:
https://vovkasolovev.ru/go/crocoblock/

Black Friday

Если вы знаете что такое Elementor, то знаете, что там только что появился простенький конструктор для Listing Grid — дизайн вывода карточек постов на сайте. В Crocoblock JetEngine давно есть намного более продвинутый конструктор Listing Grid, добавляющий возможность создания условий к запросу и встраивание других карточек.

Кроме этого в Crocoblock JetEngine есть собственный конструктор Личного кабинета. Сможете создать закрытую часть сайта, в которой пользователи могут заполнять и хранить свои данные. В комбинации с их же плагином JetFormBuilder это невероятная мощь! Ради личных кабинетов больше не нужно заводить проекты на Yii, Symfony или Laravel.
https://vovkasolovev.ru/go/jetformbuilder/

Crocoblock JetEngine работает и с редактором Gutenberg и c Elementor. Если вы до сих пор не пользуетесь Elementor, то очень рекомендую и его к приобретению на Black Friday. Окупите первым же созданым сайтом. Elementor это самый удачный, популярный и кастомизируемый конструктор страниц и дизайна темы (Page Builder и Site Builder).
https://vovkasolovev.ru/go/elementor/

О глобальной популярности Elementor очень легко судить — это единственный конструктор, для которого есть специальный раздел на Envato Market ThemeForest. Элементор — невероятно мощный инструмент. Позволяет визуально конструировать свои лендинги из готовых настраиваемых блоков. Лучше чем Tilda и WebFlow. Я даже в нем сразу прототипирую, Figma не нужна.
https://vovkasolovev.ru/go/envato-elementor/

Набор WordPress + Elementor + Crocoblock это достаточный набор чтобы решать практически любую сайтостроительную задачу. Работаю с этой связкой уже 3 года, это самый удобный стек для дизайнера сайтов. 

ЛИКБЕЗ: WordPress, преимущества, проблемы, важные плагины. CMS для сайта

Записал ролик, с ликбезом про WordPress, чем хороша эта CMS, какие есть ключевые плагины, что такое Page Builder, что такое CPT и CF, какие проблемы я вижу у этого движка. На видео рисую на iPad в Procreate.

ЛИКБЕЗ: WordPress, преимущества, проблемы, важные плагины. CMS для сайта