Используйте плагин 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 ведут группу в фэйсбуке. Проект быстро крепнет, будет дальше развивается и уверенно поддерживаться.

Приобрести плагин Crocoblock

Приобрести плагин Elementor Pro

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

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

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

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

Приобрести плагин Elementor Pro

Библиотека Anime.js для анимации объектов в HTML и в SVG с красивой документацией. Поддерживаются простые движения, параметрические, различные циклы и привязка к таймлайну.

Пример результата в gif-анимации.

Живой код этого примера.

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

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

Про будущее

2007-05-28 01:09:00

1. Поисковая строка в операционной системе, командная строка, поисковая строка в браузере и адресная строка должны стать одним и тем же. Все связанные с этим проблемы языковых команд надо сделать везде одинаково решаемыми.
   
2. Клавиатура — отстой, на ней слишком много кнопок. Мышка/точпад должны решать 80% всех задач. 20% для только для тех, кто собрался набрать текст. Точпад должен перестать быть плоским, по которому надо водить пальцем — отслеживать перемещения можно ala терминвокс, и для обеих рук. Будущее интерфейса за жестами, особенно этого не хватает в операционной системе у мышки.
3. Давно пора по-честному отделить программу от оформления в ПО. Ровно также, как на вебе CSS.
4. Долой графический дизайн из интерфейсов — вечные папочки-листочки-стрелочки. Надо выработать однозначную пиктографческую систему, которая облагораживается не заменой изображений а сменой скина — стиля линий, цветов и деталей.
5. Буквы в шрифтах должны обрести свою сверхформу, в которой обозначены где какие капли и перекладины, какие толщины и изгибы. Чтобы можно было собирать буквы из простых элементов. Соответственно, изготовление шрифта превратится в вырисовывание капель, засечек, штрихов и прочих штук из которых состоят буквы. К совсем декоративным шрифтам, это, понятно, не относится.
6. Уже давно пора забыть про растр и перейти во всём на вектор — видеокарты у всех позволяют. Особенно на вебе, с этой вечной резиновой вёрсткой и разными разрешениями экранов мониторов. Измерение в px надо уничтожить, как ересь.

Итак, как эти пункты выглядят сегодня, в 2017 году.

1. На консервативных десктопах поисковая строка и адресная строка стали одним и тем же отдельно попарно и в ОС и в браузерах. Движение в сторону сращения ОС и браузера идёт, но медленно. На мобильных устройствах это сращение полостью случилось (на сколько можно говорить о командной строке в мобильном устройстве).
2. Все тачпады поддерживают множество различных жестов. Где-то это реализовано на уровне ОС, где то на уровне производителя тачпада. В объём жесты над тачпадом массово не вышли, экспериментальные модели есть. Поскольку большинство ОС обросло поддержкой жестов, мышке перепало несколько новых принципов.
3. Программы от оформления не отделились, поскольку сохраняется старый зоопарк средств разработки. Но в зоопарк добавился новый зверь — веб-приложения, в которых оформление отделено от ПО.
4. Флэт стиль в паре с Thin шрифтами и естественными общими принципами UI, которые приняли на вооружение все крупные платформы, сделал все интерфейсы похожими, но всё же не одинаковыми. Пиктографическая система очень многообразна, но всё же сформулирована. Кроме того появились метаморфозы. Например, Emoji, стандартизованный набор пиктограмм, которые на разных платформах каждый производитель рисует по своему.
5. Не внедрён, но реализован стандарт OpenType Font Variables (OT1.8), в котором появляется интерполяция по заложенным критериям. Таким образом в одном шрифте существует та самая сверхформа и возможность модификации результата, по параметрам, которые предусмотрел заранее автор.

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

Комбинация кода для всплывающих блоков при прокрутке. Блоки, попавшие в видимость при загрузке, видны сразу, без анимации. Но можно специально попросить их появиться классом .slide-up-start.

Для наглядности, горизонтальные блоки повёрнуты контейнером и обратно повёрнуты содержимым. Ещё тут интересное использование :nth-of-type, чтобы в несколько строк разнообразить задержку в анимации и раскраску контейнеров.