У клиента сайт на тему бокса. И когда-то ему сделали сайт WordPress на шаблоне про единоборства (шаблоны темы “Campo”, Автор: BoldThemes). Там был предустановлен конструктор Bold Builder.
Плюсы: визуальный просмотр и редактирование доступны сразу.
Минусы: много скрытого функционала — без разработчиков не обойтись.
Задача 1. Крупный текст на мобильном.
Проблема: На мобильном просмотре Блок о клубе и Блок тренера – выглядят громоздкими и через уменьшение размера и даже с установкой галочки “адаптив” – не уменьшаются, а выглядят очень крупно.
Смотрели код, но решить проблему никак не могли.
Решение: Текст находился в SubHeader и имел настройки для более крупного отображения. Переписала его в текстовый блок, и теперь он корректно отображается на сайте в мобильной версии. В блоке с тренером хотела применить элемент Иконки с описанием, но увы. там не было возможности сделать текст белым. Плюс, на выборе иконки зависала страница.
В текстовом блоке тоже нет по умолчанию возможности покрасить текст белым. Но в тексте есть вкладка “код”, где можно придать нужные атрибуты тексту. Ловите шпаргалку, как кодом html изменить цвет тексту на сайте:
<div style="color: white; text-align: center;">
<strong>Тренерский стаж – с 2014 года</strong><br>
Аккредитован Федерацией Тайского бокса города Москвы<br>
Регулярное участие на соревнованиях и возможность получать официальные разряды и звания<br>
Ученики — призёры городских и всероссийских соревнований.
</div>
Задача 2. Фото сотрудников.
Проблема: Блок с тренерами выглядел неопрятно. Разные фотографии, огромный и неудобный. К тому же нужно было добавить еще одного тренера. В результате блок совсем не вписывался в сайт, нарушая общее оформление. Тексты оставить такими по оформлению. но сделать белыми.
Решение:
У нас были фото только двух тренеров, а требовалось четыре. Когда разместили снимки рядом, стало видно: они разного масштаба, да и расстояние от головы до верхнего края кадра везде разное — галерея «скакала». Решила предложить вариант: сгенерировать недостающие фото с помощью нейросетей.
Нейрофотосессия тренера Егора
Нужно было взять фото нового тренера Егора и вписать в стиль фотосессии. Получилось с первого раза. Только я забыла поставить в настройках вертикальный формат:
А дальше нейросеть начала капризничать. Я давно заметила, что если результат не устраивает, то нужно создать новый диалог. а не продолжать мучиться в этом.
Здесь я использовала NanaBanana. Решила попробовать в Sora.
Сора неверно перерисовала лицо и опять фото было ненужного формата. Ладно, идем обратно в НанаБанана.
В итоге – получилось отлично!
Нейрофотосессия тренера Александра
Вдохновленная быстрым решением задачи с Егором я решила сделать Александра.
Работа с нейросетевой генерацией — это всегда лотерея: иногда всё получается сразу, а иногда приходится искать обходные пути и дорабатывать вручную. История с Александром — яркий пример. Его невысокий рост стал неожиданной проблемой: когда я попыталась «переодеть» его в футболку другого тренера, нейросеть упорно рисовала крупного мужчину. Логика понятна: в её базе данных такие сочетания, видимо, выглядели естественнее. Я могла бы точнее сформулировать запрос, но заранее предугадать «ход мыслей» алгоритма невозможно. Это напоминает: даже с продвинутыми инструментами творческий процесс остаётся диалогом, где нужно искать компромиссы.
В конце концов пришлось взяться за «напильник» — вручную подправить результат. А с футболкой так и не сложилось: времени на новые эксперименты с нейросетью уже не было, поэтому Александр остался в своей.
Получилось очень неплохо, на мой взгляд!
ЗЫ: Клиент выбрал эконом‑вариант доработок: исправили ключевые недочёты, но от масштабного редизайна отказались из‑за лимита бюджета. Проект оставлен „открытым“ — планируем вернуться к модернизации, когда появится финансирование.
А вот и секрет моей работы с нейросетями! У меня есть доступ к крутому телеграм‑боту, где собрано больше 70 нейронок — и для графики, и для звука, и для видео, и даже для кода.
Что нравится:
- токены расходуются очень бережно — можно генерировать сколько угодно;
- качество результатов просто отличное;
- есть чат, где пользователи делятся своими находками;
- и отдельный плюс — канал Syntx Family с промптами, которые уже проверены на практике.
Хотите попробовать? Вот ссылка: https://t.me/syntxaibot?start=aff_249284543
Задача 3. Блок Филиалы.
С BoldBuilder вышла незадача: чтобы сделать всё красиво, пришлось бы серьёзно копаться в коде. Решили не усложнять и сделать попроще. Главное, чего хотел клиент — чтобы телефон, сайт и логотип были кликабельными. И вот сюрприз: в конструкторе такой возможности просто нет! Выход один — править код. К счастью, выше я уже показывала, как это делается в тестовом редакторе во вкладке «Код». Еще один нюанс, ссылки должны открываться на новой странице:
Вот готовый HTML‑код с кликабельными ссылками на телефон и сайт. Ссылки открываются в новой вкладке, а текст оформлен аккуратно и читаемо:
<div style="color: black; text-align: center; font-family: Montserrat, Manrope, Lato, sans-serif;">
<div>Адрес: Москва, Ленинградский проспект, 36</div>
<p>
<div>Телефон: <a style="color: black; text-decoration: underline;" href="tel:+79651108080" target="_blank" rel="noopener noreferrer"><strong>8 (965) 110‑80‑80</strong>
</a></div>
<p>
<div>Сайт: <a style="color: black; text-decoration: underline;" href="https://dynamo-boxing.ru" target="_blank" rel="noopener noreferrer"><strong>dynamo‑boxing.ru</strong>
</a></div>
</div>
Пояснение по элементам
Блок‑контейнер
<div style="color: white; text-align: center; font-family: Arial, sans-serif;">
- color: white; — белый цвет текста. С черным так же все просто, можно написать black;
text-align: center; — выравнивание по центру.
font-family: Arial, sans-serif; — шрифт для лучшей читаемости. У меня стоит другое значение, потому что другой шрифт используется.
Ссылка на телефон
<a href=”tel:+79651108080″ target=”_blank” rel=”noopener noreferrer”>8 (965) 110‑80‑80</a>
- href="tel:+79651108080" — запускает звонок при клике (формат: +7 + 10 цифр без пробелов).
- target="_blank" — открывает в новой вкладке.
- rel="noopener noreferrer" — защита от фишинга (рекомендуется при target="_blank").
- text-decoration: underline; — подчёркивание для видимости ссылки.
Ссылка на сайт
<a href="https://dynamo-boxing.ru" target="_blank" rel="noopener noreferrer">dynamo‑boxing.ru</a>
- href="https://dynamo-boxing.ru" — URL сайта (убедитесь, что протокол https:// указан верно).
- Остальные атрибуты аналогичны телефонной ссылке.
Важные замечания
- Проверка номера телефона: в tel: используйте только цифры без скобок и пробелов (+79651108080).
- Протокол сайта: замените https:// на https://, если сайт поддерживает HTTPS (безопаснее).
- Контрастность: если фон светлый, измените цвет ссылок на контрастный (например, #007bff для синего).
- Тестирование: проверьте на мобильном устройстве — клик по телефону должен запускать набор номера.
Вариант с цветными ссылками (если нужен акцент)
Если хотите выделить ссылки цветом (например, синим), измените color в стилях:
<a href="tel:+79651108080" target="_blank" rel="noopener noreferrer" style="color: #007bff; text-decoration: underline;">8 (965) 110‑80‑80</a>
Буду рада, если мои наработки помогут вам в ваших задачах.
Всех обняла =)