Знакомая ситуация: вы нарисовали сочный макет в Figma, клиент в восторге, а потом начинается ад. Нужно либо самому часами ковырять Elementor/Gutenberg, либо отдавать верстальщику и надеяться, что он не «подвинет» пиксели. В 2025 году тратить на это дни — преступление против собственного времени.
Есть способ автоматизировать этот процесс полностью. Рассказываю про инструмент Figma to WordPress, который превращает ваш макет в живой сайт без единой строчки кода.
В чем фишка этого метода?
Основная проблема большинства авто-конвертеров — «кривой» код на выходе. Этот плагин работает иначе: он сохраняет структуру блоков, слои и адаптивность, которую вы заложили в Figma.
Экономия времени: То, что раньше занимало рабочий день, теперь делается за 5–10 минут.
Никакого кода: Вам не нужно знать PHP или CSS, чтобы получить работающую тему на WordPress.
Гибкость: После экспорта вы можете спокойно менять тексты и картинки прямо в админке WP.
Как это работает: пошаговый план
Процесс максимально упрощен, чтобы с ним справился даже новичок:
Готовим макет: Убедитесь, что в Figma у вас порядок в слоях и группах. Чем чище исходник, тем лучше результат.
Ставим модуль: Нужно установить плагин Figma to WordPress в вашу админку (Плагины → Добавить новый).
Жмем «Магия»: В интерфейсе плагина выбираете нужные фреймы из Figma и нажимаете кнопку экспорта.
Финальный штрих: Через пару минут макет превращается в страницы сайта. Остается только проверить ссылки и формы.
Кому это точно нужно?
Это решение идеально подходит для фрилансеров, которые делают сайты «под ключ», и небольших студий. Вместо того чтобы закладывать в смету недели разработки, вы можете выдавать готовый результат в разы быстрее, сохраняя при этом качество дизайна.
Основные плюсы:
Полная адаптация под любую версию WordPress.
Корректный перенос шрифтов и стилей.
Бесплатный доступ (что в наше время редкость для хорошего инструмента).
Где взять инструмент?
Плагин полностью бесплатен. Скачать его, посмотреть подробные видео-инструкции и следить за обновлениями можно в моем Telegram-канале. Там же я делюсь другими нейросетями и сервисами, которые упрощают жизнь веб-дизайнеру.
Решил запилить первый пост, так как у меня уже подгорать начинает.
Жена, работник HR. Параллельно основной работе занимается, как это сейчас модно говорить - "карьерным консультированием". Ну а по сути, это означает "улучшить Ваше резюме", "написать Ваше резюме с нуля, если его ещё нет" и "продвигать Ваше резюме на hh" (последнее означает - откликаться за Вас на появляющиеся хорошие вакансии с хорошо составленными под каждую вакансию сопроводительными письмами).
Рука у неё лёгкая, к работе относится ответственно, с людьми общаться любит, поэтому, как правило, с её помощью обратившиеся в среднем недели через три выходят на новую работу (есть, конечно, исключения, но там всё объяснимо). И 100% обратившихся и просто наблюдающих со стороны громко удивляются, почему супруга до сих пор не сделала это своё увлечение своей основной работой.
Плюс ещё есть пара проблем: цены жена назначает по принципу "кто сколько может": ей пожалуются на тяжёлую жизнь - она за пару тысяч и возится. И есть целая каста тех, кто звонят с формулировкой "я только спросить хотел…" - и дальше получаются те же консультации, только бесплатно. Отнимают время.
Как говорится, это была "преамбула". В общем, решили мы попробовать действительно сделать это чем-то вроде бизнеса. Оформить супругу самозанятой - и вперёд (не бросая основной работы). Я вооружился своим пониманием (скорее - догадками) современных технологий и решил, что нужно сделать сайт, на котором заказчик мог бы ткнуть в услугу, выбрать удобное ему (и жене) время консультации и оплатить фиксированную сумму. А также я понимаю, что нужна реклама и продвижение.
И вот тут начинается "боль". Вторую неделю не могу найти тех, кто за вменяемые деньги это сделает. Исполнители начинаются от тех, которые за 90к+ готовы по шаблону WordPress или прочих тильд сделать одностраничник и прикрутить к нему стандартные инструменты рекламы и продвижения (ага, за которые потом ещё ежемесячно платить много денег с невнятным результатом) и заканчиваются теми, кто запросил у меня за "проект" 2,7 млн. и 4 месяца.
Я, может, чего не понимаю, но очень примитивную страничку на "голом" html могу накидать ну минут за 60. Ещё за 30 арендовать VPS с дебианом, установить nginx и разместить страничку. Ещё 15 минут на выпуск и прикручивание сертификата для https (как меня один деятель "разводил": "Ну нужен же защищённый канал передачи данных!" Когда понял, что я понимаю, что такое HTTPS - надёжно потерялся.) Ну ещё 60 минут уйдёт на регистрацию доменного имени и пока DNS отработает. Денег - 500 рублей в мес. за аренду VPS, 150 рублей за регистрацию доменного имени. И 3 часа моего времени. Всё. Сайт-визитка готов, печатай бумажки с qr-кодом и телефоном и раскидывай по центрам занятости. Я, конечно, понимаю, что мой проект с дизайном, записью в расписание и эквайрингом - это сложнее будет, но чтоб во столько раз!
Уважаемая сила пикабу, скажи, пожалуйста, то, что сейчас со мной происходит - это современная норма? Или я что-то не так делаю? Готов платить вменяемые деньги за работу, немного "в теме", чётко представляю образ результата - а вот исполнителей за вменяемые деньги найти не могу ( И ещё отдельная попаболь - реклама. Минимум 100 тыс. рублей для запуска и настройки + 100 тыс. рублей ежемесячно. Серьёзно? Те, кто это предлагают, вообще понимают, что если у жены будет 100 тыс . рублей заработка на этих консультациях в месяц - это уже за счастье будет? Откуда такие цены? У меня нет целей сделать транснациональную корпорацию по поиску работы, мне так - девушке подзаработать в свободное от основной работы время.
Если честно, то уже хочется всё это бросить нафиг.
В общем, нужны Ваши советы, уважаемые пикабушники!
Ребят, ищу разработчика, который поможет реализовать очень нужный проект - определение уровня развития ребёнка. Суть в следующем: родитель заполняет анкету, затем получает отчёт, который содержит 1)рекомендации (зависит от ответов), 2)графики (диаграммы), визуализация результатов 3) и файлы (развивающие материалы), которые корректируют западающие умения и навыки (зависит от ответов) . Что мне нужно! - так как у меня есть сайт на вордпресс и группа в вк, я мыслю, что мне поможет либо плагин Wordpress, либо вк бот. А вдруг найдутся люди, которые помогут с идеальным решением. Найдитесь, пожалуйста!
Всем привет! Хочу поделиться своей небольшой победой — я разработал плагин, который автоматически собирает и отображает данные о трендовых играх Steam за последние 24 часа.
Плагин выводит данные в удобном виде на моем сайте через виджет. Так что теперь каждый может увидеть, какие игры показывают наибольший рост популярности за последние сутки. Вот пример текущего топа:
🔥 Amarillo's Butt Slapper (+495.4%) — 8939 сейчас играет Ale & Tale Tavern (+220.9%) — 545 сейчас играет Operation Lovecraft: Fallen Doll Closed Beta (+183.5%) — 229 сейчас играет Sleeping Dogs: Definitive Edition (+165.4%) — 1413 сейчас играет Steep (+163.3%) — 213 сейчас играет
Ключевая особенность — данные обновляются автоматически, и все это работает прямо на сайте, без необходимости что-то кодить каждый раз вручную.
Кому нужно - забирайте в закладки, буду рад видеть каждого, ведь это моя мотивация развиваться дальше <3
Рассказываю как делался сайт для известного видеопродакшена и какие есть подводные камни при технической реализации сайта с огромным количеством видеоматериала.
В 2022 году ко мне обратилась команда Hoody FX для редизайна текущего сайта. На тот момент в их портфолио были работы с McDonald's, Champion, Sony, Doja Cat, Samsung, Aeroflot, Fanta, AUDI, Ariana Grande и так далее
Это был небольшой лендосик, где по большей части были одни скриншоты работ (напоминаю, компания занимается видеопродакшеном, а именно VFX). В целом, все. Также это была просто верстка, то есть невозможно было добавлять какие-то новые работы из панели администратора. Ее просто не было.
Как-то так выглядело портфолио – скриншоты из видео, при наведении появляется название. В целом, это имеет место быть, но... Точно ли на сайте продакшена? Чуть позже разберемся
Работа с ретушью – это одно из главных направлений компании. Снова скриншоты, которые просто листаешь сам. На сайт они выгружены не в лучшем своем качестве
Если углубляться, и смотреть шоурилы конкурентов (например, Technicolor Group), то пользователю нативно понятно из видео, что такое VFX и как это работает по пальцам. У нас же нет этого объяснения по пальцам, – вместо этого видео с конечным результатом В целом, это вся старая версия сайта, больше там ничего не было. Ни контактов, ни команды, ни описания направлений студии и других вещей, которые бы базово проинформировали пользователя о компании.
Личный бренд у компании сложился задолго до создания сайта, их работы гремели и без него. Поэтому основная задача состояла в том, чтобы освежить дизайн, сделать удобный и понятный интерфейс, а также создать возможность добавлять работы в портфолио самостоятельно без привлечения программистов и иных сторонних специалистов. Самое главное – это кейсы, они должны быть рассортированы, и с 1 секунды цеплять взгляд пользователя.
Начинаем работу.
Что было сделано по пунктам:
Изучили деятельность компании (саму нишу), исследовали ЦА (в нашем случае это другие видеопродакшены, студии смежных направлений, которые буду заинтересованы в подряде) и конкурентов.
Сформулировали креативную концепцию. Мы перелопатили кучу референсов — изучили международные рейтинги сайтов нашей и смежных ниш, изучили все известные подборки сайтов, но и про конкурентов не забыли. По итогу мы имели внушительную коллекцию того «как надо», а вместе с этим — конкретное видение структуры и стиля. Сформировали визуальный код — простота структуры, лаконичность графики, ясность языка.
Приступили к написанию текстов. С учетом специфики ниши придерживались информационного стиля текста – главное, на что будет смотреть потребитель это визуал. Поэтому огромные полотна текста точно не в этот раз. Должно быть кратко, емко и по делу.
Оформили смыслы в дизайн-концепцию. Дизайн-макет получился удобным, очень простым в навигации.
Заранее для верстки подготовили все необходимые нарезки из видео и шоурилы. Основная цель этого пункта – отразить портфолио через небольшую демонстрацию видео. Мы отошли от идеи со скриншотами из видео.
Сделали адаптивную верстку на WordPress с гибкой панелью администратора. Теперь команда может добавлять видео на сайт самостоятельно в пару кликов, а также распределить видеоматериал в нужный каталог и поставить ему нужное динамичное превью с описанием.
Основные моменты при создании сайта:
Визуальный код компании должен остаться таким же. То есть в брендинг мы не лезем. Элементы фирменного стиля это то, что остается неизменным, и то с чем мы должны работать (хотя это усложняет задачу, потому что часто он становится неактуальным спустя время, например, как вышло у нас, либо он изначально был сделан посредственно другими дизайнерами). За основной стиль взяли минимализм. Пространство не должно перебить форму. Простота структуры, легкость в навигации, лаконичность графики и ясность языка.
Бриф и наша подборка референсов открыли дорогу к дизайну всех страниц, а заказчики со своей стороны подготовили демонстративный шоурил. Теперь при первом касании с сайтом было понятно, что перед нами студия визуальных эффектов. Была проведена работа с типографикой, а также обработка фонового видео (ниже пример).
50 оттенков типографики или как мы выбирали гарнитуру (тут без интерлиньяжа и других внутренних настроек шрифта, примеряли разные варианты с клиентом)
Разместили ключевые элементы (меню навигации) в легкодоступных местах. И протестировали на штате компании, чтобы убедиться в том, что он действительно прост в использовании. А вот и главный экран сайта:
За основу был взят информационный стиль текста – легко понимается, поскольку предоставляет собой прямую информацию без использования сложного языка или метафор. Также он позволяет пользователям быстро найти нужную информацию, что экономит время посетителя сайта и увеличивает удовлетворенность от его использования ресурса.
Пример интеграции текста на сайт. Перечисление основных направлений и видов услуг студии
Вместо обычной фотографии на весь экран сделали слайдшоу из детализированных скриншотов с работами по направлению Beauty Work. Фотогалерею клиент может пополнять самостоятельно.
Каталог с работами – простой и удобный. Во-первых, по сравнению с прошлой версией у нас есть появилась удобное разделение кейсов на три направления: рекламные ролики, клипы и фильмы (раньше был единый каталог). Во-вторых, без какого-либо наведения на работу и появления текста при ховере мы сразу видим, что это за компания/артист/песни и т.д. (ранее название и компанию, для которой делался ролик, можно было узнать лишь при выполнении лишнего действия). В-третьих, демонстрация превью, а именно самых ярких моментов из видеороликов, пришла на замену статичным скриншотам. Каталог с работами на примере рекламных роликов:
Скорость считывания информации у пользователей увеличится – им не придется выполнять лишние действия в виде наведения на карточку с видео, чтобы узнать название; а также лишний раз включать ролик, чтобы понять настроение, мотив и посыл работы, ведь у каждой теперь есть превью. Также были сделаны такие блоки как контактная информация, информация о трудоустройстве в компанию, клиенты компании и ее новости (последние выпущенные работы; автоматически подгружаются самые последние работы из каталога). Например, ниже скриншот блока с новостями. Автоматически подгружаются последние работы из общего каталога с кейсами
Сложности при создании сайта, с которыми мы столкнулись
Все было бы хорошо, если бы это не был наш первый заказ в нише видеопродакшена. На тот момент они правда были первыми, а после этого я очень часто работала с видеопродакшенами. Самая большая и сложная сложность – это огромное количество видеоматериала, который афигеть сколько весит. Как размещать на одной странице по 30 видео с превью, если каждый видеоролик весит по несколько ГБ? Мы не хотели оставлять скриншоты принципиально – это не про VFX, это не про обладаение формы над пространством. Нет. Расчет был как раз на то, что эти превью и перехватят все внимание пользователя.
Большая ошибка. Мы просто посмотрели по таймкодам какие моменты из роликов можно поставить на превью: сделали в панели администратора ячейку, чтобы в два клика можно было выставлять нужный промежуток времени. Итого, что получилось – ничего не грузит. Видео прогружается до момента с установленным таймкодом по 10-20 секунд. Чем дальше тот самый сочный момент из превью – тем дольше это все прогружалось. Пипец, подумали мы.Как решили? Наняли обычного монтажера, чтобы он сделал нам превью. Техническое задание простое – дали разрешение для превью (оно не превышало показатели в 600p, точно не вспомню), длительность не больше 10 секунд, выбираешь самые яркие моменты. В целом, все. Итого каждый кусочек видео весил в среднем не больше 10 Мб.
Также старались не размещать на одной странице большое количество видеороликов: на главной странице это реализовано как карусель из видео, а в каталоге у нас получилось достаточно большое скопление роликов, но разбитое на страницы (добавили пагинацию). Кстати, сами видео вытянуты из Vimeo: работы заказчика изначально хранились там. Заглядывая в мои будущие кейсы также советую Dropbox, если рассматриваете облачное хранилище для подобных сайтов.
Панель администратора делали на WordPress. Свои задачи в части обновления контента она выполняет по сей день хорошо. Достаточно просто знать как работает редактирование страницы Вконтакте, чтобы отредактировать страницу на сайте в нашей панели администратора. Вот как она выглядела изнутри (наши с разработчиком скриншоты во время работы):
Общие впечатления по сайту
Это не самая сильная работа, но хотелось начать цикл статей про разработанные мною сайты с каких-то интересных кейсов. Может с технической точки зрения они будут вам полезны. Например, в видеопродакшенах ждите много работы с видео – причем иногда неожиданной). Я буду дальше рассказывать про другие кейсы в нише видеопродакшена, там тоже будут свои нюансы: выбор CMS или другой подводный камушек.
Сайт до сих пор служит компании, они самостоятельно добавляют туда материалы, по SEO он нормально продвигается, так что всё гуд и свою задачу мы выполнили :)
Эх.. Первый пост на данной платформе. Интересно, получится ли написать что-то интересное?!
Сегодня, хотелось бы создать задаток для будущих постов в данной серии. Она (серия), повествует, о том, как решил создать свою веб-студию, что из этого вышло на данный момент и выйдет в будущем.
Сразу хочу ответить, что сам по себе - разработчик средней руки. Имею в стеке HTML5, CCS3, JS, Node.js, PHP, React.js, SQL, PostgreSQL и Kotlin. Занимаюсь программированием около 3.5 лет и на данный момент, заканчиваю учебное заведение по специальности. С предисловием - всё. Переходим к самому интересному (возможно, что не очень).
Опустим процесс обучения азам и сразу перейдём к моменту получения первого заказа. Интересно, что успел его выцепить ещё в то время, когда еле-еле освоил азы HTML и CSS. Как-то гулял по просторам интернета и попал на биржу «Weblancer». Не могу сказать, что она сильно популярная, но в отличие от аналогов в RU сегменте, хотя бы даёт пару бесплатных откликов и возможность получить реальный заказ, а не спамит кучей фейков от ботов. Тогда, моим максимумом были простенькие landing-page и формочки. Отправив пару откликов на немногочисленные запросы, которые хотя бы в теории мог выполнить, получил один положительный ответ и сразу же упало сообщение в личку от заказчика. Им оказался мужчина из Киева, который занимался перепродажей БУ стиральных машинок. Стоимость работы была мизерная (как и большинство подобных на фрилансе) - около 4000 рублей, но тогда, мне казалось, что это какие-то космические деньги.
Стоит упомянуть, что к моменту сдачи заказа, мы уже успели успешно ретироваться с биржи в Viber и деньги были перечислены напрямую, что в дальнейшем привело к моей блокировке на самой платформе (в целом - не жалею).
Требовался простенький сайт, который должен был включать в себя написанные копирайтером текста и соответствовать заданной стилистике, которая, к слову, была достаточно лёгкой, так как, представляла из себя что-то похожее на сайты прямиком из середины нулевых. Ох.. Каким же испытанием для меня стала вёрстка этого простенького на данный момент макета и его адаптирование под мобильные устройства. Ушли примерно 2 дня, слёзы, пот, кровь и нервы, но сайт был сделан и функционирует по сей день.
Заказчик был крайне доволен, оставил положительный отзыв и предложил подработать личным репетитором для его сына. Ставку согласовали в размере 500 руб/час (взрыв мозга для меня в 17 лет). Можно ли сказать, что был хорошим репетитором? Думаю, что да, хоть мои знания на тот момент и ограничивались самым базисом, старался подготавливать интересный материал и повторять все необходимые темы к урокам. Потом, парень ушёл на летние каникулы и к сожалению - больше мы не сотрудничали. В этом году, мужчина написал мне в Discord с просьбой помочь разобраться в части кода и мы быстренько разобрали, что там и как. Собственно, больше не контактировали, но опыт оказался интересным и зародил во мне желание найти подобное в будущем.
Долго ждать не пришлось - спустя месяц, упал заказ по вёрстке продающей landing-page под прогнозы на спорт. К слову.. Это был мой первый негативный опыт (кинули), но хочу оставить эту часть истории для отдельного поста. Возможно, что кому-то будет интересно, как избежать подобного и не потерять собственные время, деньги, силы и нервы.
Затем, последовал период проблем в личной жизни и мне пришлось выпасть из всего этого примерно на год. Осознал, что нахожусь в простое и никуда не двигаюсь. Принял волевое решение сутками налегать на документацию и в ускоренном темпе осваивать различные технологии. Так прошло около нескольких месяцев и на меня вышел подрядчик. Мы успели закрыть несколько крупных заказов и несколько landing-page, вошёл во вкус и начал получать удовольствие от профессии - это уже не было таким адом, каким было в момент изучения материала. Сложно передать боль и страдания во время изучения чего-то сложного, когда месяцами не выходишь из дома, смотришь в экран и пытаешься в чём-то разобраться, но предполагаю, что студенты технических ВУЗов смогут понять.
На данный момент, мы до сих пор работаем вместе, да и обрасти новыми связями успел, что не может не радовать, а ручки стали сильными, набитыми (буквально на автомате делаешь то, что требуется).
В какой-то момент, мне надоело просто делать заказы, терять процент с комиссии подрядчиков и играть в сломанный телефон. Из всех возможных идей, самой интересной, оказалась возможность создания собственной студии с командой разработчиков, постоянным потоком клиентов и перспективами масштабирования. Знакомые с набитой рукой, были подняты по единому сигналу сирены, взывающей к общей жажде развития и чего-то нового.
Теперь, я, как и мои соратники по студии, стоим перед бескрайней пропастью возможностей, которая, одновременно пугает и в то же время, побуждает к действию, маня и внушая тот самый энтузиазм, который когда-то, все мы испытывали, взяв первый заказ, впервые открыв документацию, установив WebStorm и написав первую строчку кода.
А вот что же будет дальше, Вы, узнаете из последующих постов, которые, уверяю - будут интересными, объёмными и постараются передать Вам наш опыт.
Приветствую, уважаемые Пикабушники. Первый пост, сильно не пинайте.
Занимаюсь фрилансом более 5 лет, есть много свободного времени. За время фриланса удалось поднабраться опыта в создании сайтов. Если кому нужна помощь в настройке, создании сайта, готов помочь на безвозмездной основе. Также могу научить, показать как сделать небольшие правки по сайтам.
