Создание лендинга с GSAP-анимацией с помощью ИИ (полный процесс)
andrea egli
0:00 / 0:00
Создание лендинга с GSAP-анимацией с помощью ИИ (полный процесс)
3 290 просмотров · 3 мес. назад
andrea egli
24,7 тыс. подписчиков
3 290 просмотров · 3 мес. назад
Поэтому на этот раз я позволил ИИ создать настоящий сайт на WordPress и Elementor. Не демо-версию — а реальную рабочую целевую страницу от начала до конца.
Я начал дизайн в Claude Design, просто чтобы добиться нужного внешнего вида, ведь я всё-таки дизайнер. Затем я передал его в Claude Desktop, а Novamira Pro выполнила основную работу по WordPress и Elementor — создав всё в Elementor V4, включая анимации GSAP. Никакого жёсткого кодирования, всё нативно и редактируемо (за исключением анимаций GSAP), что меня, честно говоря, удивило.
Есть прелоадер GSAP, анимации прокрутки, цифры обратного отсчёта и оранжевая подсветка, которая скользит между заголовками при прокрутке. Навигация и нижний колонтитул (нижний колонтитул ещё нуждается в небольшой доработке, так как я переместил только последний контейнер, но это несложно) были правильно реализованы в Theme Builder, и всё работает на мобильных устройствах (более или менее, возможно, потребуются дополнительные корректировки).
После завершения я перенёс весь сайт на Cloudways. Если вы ещё не пользовались, это управляемый облачный хостинг, занимающий промежуточное положение между недорогим общим хостингом и собственным сервером. Миграция, тестовая среда, резервное копирование, SSL-сертификаты и поддержка — всё это включено, а также есть функция SafeUpdates, которая сначала проверяет обновления плагинов на тестовой копии, чтобы ничто не сломало ваш рабочий сайт. Для сайта с таким количеством анимации увеличение скорости того стоит.
🔥 Пример реального сайта, который я создал и на основе которого разработал эту демо-версию: https://contract.debrieft.app/
🔥 Демо-версия: https://wordpress-1653036-6574728.clo...
🔥 Скачать комплект, включая спецификацию, можно здесь: https://drive.google.com/drive/projec...
0:00 Вступление - Новый рабочий процесс Claude Design / Claude Desktop / Novamira Pro
00:57 Что мы создаём
01:44 Обзор Claude Design
06:02 Обзор Claude Desktop
09:45 Внутри редактора Elementor после сборки
11:54 Перенос целевой страницы в Cloudways
18:51 Тест скорости с Rank Math
19:12 Показано, где Код для прелоадера:
19:43 Как подключить Novamira MCP к Claude Desktop
21:23 Проверка соединения...конец
_________________________________________________________________________________________________
🟠 Получите управляемый хостинг Cloudways:
3-дневная бесплатная пробная версия (без кредитной карты, без списаний средств)
Бесплатный Object Cache Pro и SSL-сертификат
Круглосуточная экспертная поддержка 24/7/365
Неограниченное количество сайтов
https://www.cloudways.com/en/?id=1737379
_________________________________________________________________________________________________
🔥 Я создал ОС для веб-дизайнеров:
ПРИСОЕДИНЯЙТЕСЬ к debrieft.app здесь: → https://debrieft.app
🟠 ВЫ ТАКЖЕ МОЖЕТЕ НАЙТИ МЕНЯ ЗДЕСЬ
LINKEDIN - / egliandrea
INSTAGRAM - / studio.egli
🟠 ПО ВОПРОСАМ СОТРУДНИЧЕСТВА
contact@studioegli.com
Оговорка: Некоторые ссылки в описании моих видео могут быть партнерскими ссылками, это означает, что я буду получать комиссию с покупок, совершенных вами по моей ссылке. Использование моих ссылок/кодов не влечет для вас никаких дополнительных затрат, это просто еще один способ поддержать меня и мой канал! :)
#Cloudways #webhosting #gutenberg #wordpress #novamiraai #claudecode #Claude #AI #elementorpro #WebDesign #Novamira