У клиента сайт на тему бокса. И когда-то ему сделали сайт 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;— шрифт для лучшей читаемости. У меня стоит другое значение, потому что другой шрифт используется.
Ссылка на телефон
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>
Буду рада, если мои наработки помогут вам в ваших задачах.
Всех обняла, Alla❤️WP
Пишите вопросы в комментариях или в группе в тг: https://t.me/wordpress71/8
