Короче, у меня есть сайт. Не этот, на котором вы читаете этот пост, а другой, с битами и дизайнами. Он у меня появился уже несколько лет как, но не так давно я его обновил, а теперь хочу рассказать, как вы можете сделать себе такой же.

А ещё этот пост пишется спустя месяц после того, как BeatStars ко всем продажам через маркетплейс добавил комиссию 12%, настолько взбесив всё наше битмейкерское сообщество, что многие даже задумались о переходе на другие площадки.

Но помимо новой комиссии, BeatStars изменил ещё и стоимость своей «средней» подписки до всего 20$ в год. И в этих условиях создание собственного сайта выглядит как офигенная возможность одновременно и сэкономить на подписке, и получить красивую личную страничку, и при этом избежать комиссий.

А чем ещё битмейкеру может быть полезен свой сайт? 🤔
Ну во-первых, это красиво ©

Вообще, личный сайт позволяет разместить любую информацию так, как этого хочется именно тебе, а не так, как это задумали дизайнеры BeatStars, разрабатывая Pro Page. Сайт открывает практически безграничные возможности, когда дело доходит до внешнего вида и наполнения страниц.

Секция с часто задаваемыми вопросами, слайдер с отзывами покупателей, таймер обратного отсчёта до конца распродажи, лента контента из ваших социальных сетей — это только самое простое из того, что можно добавить на свой сайт, и чего нельзя сделать с Pro Page. И если часто задаваемые вопросы на Pro Page можно оформить в виде блоговой записи (о возможности создавать которые, я уверен, многие из вас слышат впервые), то всё остальное не сделать никак. Нужен сайт.

Сайт будет незаменим и тогда, когда вы решите задуматься о привлечении трафика из поиска. Возможности по SEO-оптимизации Pro Page крайне ограничены, и вы не сможете наполнить каждый её раздел релевантным текстом с ключевыми словами. Да, там можно указать Title и Description для главной страницы, но на этом — всё.

В конце концов, приучив своих покупателей закупаться именно на сайте, а не на Pro Page, вы сможете безболезненно переехать с BeatStars на любой другой маркетплейс, не потеряв при этом трафик. А ещё сайт — это выгодно, о чём я подробнее поговорю ниже.

Ну и да, я уже говорил, что ваш сайт может быть в разы красивее, чем Pro Page вашего любимого продюсера?

Для кого эта статья?

И вот тут я нахожусь в странной ситуации. Я понимаю, что одним постом, пусть даже самым подробным, невозможно описать весь процесс разработки сайта, особенно, когда дело касается дизайна. А значит я ожидаю, что мой читатель достаточно умный, не боится нажимать неизвестные ему кнопки и способен действовать самостоятельно. А с другой стороны, читатель, способный действовать самостоятельно, вполне вероятно разобрался бы во всём и без моего куцего мануала 😅

В общем, давайте так: пост нужен тем, кто ещё никогда не занимался запуском своих сайтов и понятия не имеет, с чего начать, но готов потратить время и усилия для того, чтобы разобраться в деталях в одиночку. В этом материале я просто намечу путь, по которому вам нужно будет двигаться, расскажу, как это всё будет работать и какие инструменты вам потребуются. Вот и договорились.

Теоретическая часть: как это всё будет работать

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

Прежде всего, вам нужно узнать, что такое iFrame. Говоря простыми словами, iFrame — это рамка, объект на странице вашего сайта, внутри которого загружается содержимое другого сайта. Ровно это мы и будем делать: создадим красивую (по возможности) страницу с собственным дизайном, на которую вставим плеер от BeatStars. Хотя, как вы могли уже догадаться, в iFrame можно вставить вообще что угодно, просто подменив ссылку в коде:

Вот, например, страница Amazon внутри моего сайта. Почему нет?

Прелесть таких встраиваемых плееров в том, что вам не нужно отдельно грузить биты на свой сайт и вообще хранить там что-либо, кроме файлов дизайна. Биты, загруженные на BeatStars, будут автоматически отображаться внутри плеера. А при желании, плеер от BeatStars можно заменить на любой другой: такие есть и у Airbit, и у Soundee, и у Traktrain, и даже у наших BestBeat и Beatmaker.tv, если вдруг вы делаете сайт для российской аудитории.

У плееров, встроенных через iFrame, есть и недостатки. Если интересно — добро пожаловать под спойлер с техническими подробностями.

Про недостатки iFrame
Так как iFrame — это, по сути, отдельный сайт, никакие объекты вне его не могут взаимодействовать с содержимым вашего плеера. Проще говоря, вы не сможете добавить на сайт, например, столбики с условиями лицензий и сделать так, чтобы их содержимое само синхронизировалось с тем, что указано у вас в лицензиях на BeatStars.

Второй недостаток — мне неизвестен какой-то простой способ сделать так, чтобы у каждого вашего бита была отдельная страница на сайте. Вам придётся либо создавать отдельную страницу под каждый бит вручную (о чём я расскажу ниже), либо просто забить на это и довольствоваться сайтом-одностраничником, оставляя везде ссылку тупо на главную страницу. Это тоже рабочий вариант и ваш клиент, скорее всего, не настолько глуп, чтобы не суметь воспользоваться поиском по плееру и найти там бит, за которым он пришёл, но упомянуть я это был обязан.

Вероятно, обе описанные выше проблемы всё-таки можно решить, но мы с вами музыканты, а не хакеры, так что оставим это для ребят, у которых C# это не не До-диез, а язык программирования. В нашем случае просто запомним: всё, что находится вне плеера — просто декорация, и она никак физически не связана с вашими данными на BeatStars. Поддерживать актуальность этих данных потребуется вручную, и от редактирования информации на BS она никаким магическим образом не отобразится на вашем сайте вне iFrame.

Сам сайт будет работать на WordPress. В теории, вы можете использовать хоть Тильду или любой другой движок/конструктор сайтов — суть от этого не поменяется. Прелесть же WordPress в том, что он а) бесплатный, и б) популярный, а значит для него существует много всяких приблуд от сторонних разработчиков, а также туториалов на YouTube.

Дизайн сайта мы будем делать с помощью плагина Elementor. Это как раз одна из таких приблуд для WordPress от сторонних разработчиков, которая поможет нам в решении поставленной задачи. Это классный визуальный редактор, благодаря которому вы сможете собрать дизайн сайта, не умея, собственно, ни дизайнить, ни кодить. Делаем биты, не зная музыкальной теории, делаем сайты, не умея в код. Всё как мы любим!

Итого: WordPress, Elementor и плеер от BeatStars — вот три главных штуки, из которых и будет состоять ваш будущий сайт. Естественно, сайту также нужен хостинг (место в интернете, где хранятся его файлы) и домен (адрес вида www.yourname.com) — об этом я тоже расскажу в практической части ниже.

Сколько это будет стоить

И прежде, чем мы напряжём (напрягём?) хоть один мускул в сторону выполнения поставленной задачи, давайте посчитаем, насколько это мероприятие вообще будет экономически оправдано. Быть может, проще платить за BeatStars Pro Page, и всё?

Чтобы пользоваться Pro Page, вы должны будете платить 20$ в месяц за подписку Professional на BeatStars, что равно 240$ в год (или 180$, если заплатить сразу за 12 месяцев). В рублях по курсу на момент написания этого поста это будет примерно 24 000₽ и 18 000₽ за год соответственно. Если к своей Pro Page вы захотите подключить ещё и домен, то это дополнительные 1200₽ в год.

Стоимость подписки на BeatStars

Теперь посчитаем, во сколько выйдет содержание сайта со встроенным плеером. Плеер доступен даже на бесплатном тарифе BeatStars, однако, чтобы снять ограничение в 10 битов на аккаунте и получить возможность загружать сколько угодно треков, покупаем подписку Starter за 20$ в год (2020₽ по курсу на день написания поста). Домен — ещё 1200₽, и хостинг — 219₽ в месяц (2150₽, если оплатить сразу год).

Итого: использование Pro Page с подключенным доменом обойдётся вам в 19 200₽, если подписку на BeatStars вы оплатите сразу на год. В свою очередь, содержание сайта вам обойдётся всего в 5370₽ в год.

Комиссии BeatStars, платёжных систем и посредников я тут не учитываю, потому что и пользователи Pro Page, и владельцы сайтов здесь находятся в абсолютно одинаковых условиях. Такие дела.

Практическая часть: делаем сайт на WordPress для продажи битов

Итак, алгоритм примерно такой:

  • Нужно купить домен и хостинг;
  • Установить WordPress;
  • Установить на сайт плагин Elementor и задизайнить главную страницу;
  • Получить код плеера BeatStars и вставить его на сайт;
  • Заработать миллионы.

Давайте по порядку.

Где купить домен и хостинг для сайта?

У человека, который впервые занимается вот этой вот всей ерундой, будет закономерный вопрос: а где, собственно, покупать домен с хостингом и есть ли какая-то разница, какого регистратора и хостинг-провайдера выбрать? Разница, вероятно, есть, но я, так вышло, не пользовался услугами всех компаний на рынке и подсказать однозначно лучший вариант не могу.

Однако сам я все свои сайты всю жизнь держу на Sprinthost (ссылка реферальная, конечно же) — у них я покупал и домены, и хостинг. Лучшее ли это решение? Хз, но ссылка на мой сайт у вас есть, блог этот тоже крутится у них же, так что можете хоть затестироваться, а можете выбрать любой другой вариант, мне без разницы. Почта на домене (это когда почтовый адрес не tyoma_krasavchik@mail.ru, а hello@anotherxlife.com) у меня тоже настроена через них. Доволен.

В общем, вот ссылка на страницу, где покупается домен. А вот — ссылка на страницу, где покупается хостинг. Хостинга хватит минимального, а домен можете покупать не только в зоне .com, но и в любой другой — тут уже дело вкуса.

Как установить WordPress на Sprinthost?

Прелесть Sprinthost в том, что WordPress на ваш сайт ставится в автоматическом режиме, буквально в два клика. Опять же, я не могу говорить за всех, и быть может у других хостинг-провайдеров это тоже так, но в любом случае, процесс установки WordPress на ваш сайт максимально простой.

Итак, после покупки домена и хостинга, находясь в админке Sprinthost, перейдите в раздел «Cайты», а затем выберите пункт «Автоустановка CMS».

Дальше ничего сложного. Нужно просто выбрать среди списка доступных к установке CMS нужный нам WordPress и установить его. По окончанию процесса вы получите письмо с данными для входа в админ-панель своего сайта.

Установка плагина Elementor

И вот, у вас уже есть работающий сайт, на котором правда, пока ничего нет, кроме пары стандартных демо-страничек WordPress. Теперь нужно установить на сайт плагин Elementor, с помощью которого вы будете делать всю красоту.

Плагины в WordPress ставятся очень просто — проще, чем плагины для DAW. Находясь в админке WordPress (куда вы вошли по данным, полученным в письме от Sprinthost) перейдите на вкладку «Плагины», а затем нажмите кнопку «Добавить новый»:

Вы попадёте на страницу каталога плагинов WordPress. Просто напишите в поисковой строке «Elementor», а затем установите и активируйте плагин:

Будьте внимательны: поиск по плагинам также покажет вам множество аддонов для Elementor. Они могут пригодится вам позже для добавления на сайт дополнительных штук, новых виджетов и блоков, которых нет в самом Элементоре. Но в рамках данной статьи это всё нам не нужно, нужен лишь сам Elementor.

Как сделать дизайн сайта с помощью Elementor

Здесь я буду супер-поверхностным, потому что ну невозможно одним блоком статьи рассказать то, чему посвящают целые ютуб-каналы. Так что просто опишу вам основы работы с Elementor, как в нём всё устроено, а дальше вы уже вольны делать что хотите и совершенствовать свои навыки самостоятельно. Благо, материалов в интернете на эту тему хоть отбавляй.

Итак, прежде чем делать дизайн вашей главной страницы, нужно, собственно, её создать. Для этого в админке WordPress перейдите на вкладку «Страницы», нажмите кнопку «Добавить новую», а затем, в открывшемся стандартном редакторе WordPress, нажмите «Редактировать в Elementor»:

Здесь начинается самое интересное — вы можете закрыть эту статью и пойти изучать редактор самостоятельно, благо, он не такой уж сложный в освоении. Скажу только, что по умолчанию на странице уже будут отображаться какие-то штуки типа заголовка, панели навигации и прочих вещей, относящихся к установленной на сайте теме, а изменить их прямо из редактора вы не сможете. Однако, от них можно избавиться и получить просто чистый холст с полной свободой действий.

Чтобы это сделать, откройте меню настроек плагина Elementor (иконка шестерёнки снизу слева) и измените макет страницы на «Холст Elementor»:

И вот после этого можно приступать к дизайну. Добавляйте на страницу секции, помещайте в них контент, меняйте их стиль и делайте вообще всё, что душе угодно. Вот на этом видео, например, я буквально за полторы минуты создаю основной баннер для сайта:

Спидран в деталях, остановок не будет!

Ну и да, не забудьте, что внешний вид каждого элемента нужно отстроить трижды: для десктопа, планшетов и телефонов. Чтобы это сделать, просто переключайтесь между макетами, включив режим адаптивности вот тут:

После того, как закончите работу, не забудьте опубликовать изменения. В случае, если вместо вашей страницы на сайте отображается что-то другое, зайдите в параметры WordPress и поменяйте настройки отображения главной страницы. Делается это в разделе Настройки → Чтение.

Как добавить плеер BeatStars на сайт и настроить его?

Где-то в процессе работы над главной страницей сайта настанет время вставить туда плеер от BeatStars. Как это сделать? Прежде всего, нужно получить код этого плеера. Найти его можно вот тут, в разделе My Media → Players:

Уверен, многие из вас впервые тыкают по этой ссылке

У меня, правда, эта ссылка уже ведёт на аналогичный раздел новой BeatStars Studio, поэтому скриншоты могут выглядеть иначе, чем то, что увидите вы, но суть от этого не поменяется. Здесь вам нужно просто создать новый плеер (кнопка Create new player), а затем на странице его настройки найти код для встраивания:

Этот код состоит просто из тега iFrame, ссылки и значений, определяющих ширину и высоту плеера. С этими параметрами можно экспериментировать, чем мы займёмся чуть позже, а пока просто скопируйте этот код и вернитесь с ним в редактор сайта. Cоздайте новую секцию для вашего плеера, если ещё не, а затем в списке виджетов найдите блок с названием «HTML-код» и перетащите его на страницу. Вставьте скопированный ранее код BeatStars в соответствующее поле, и вуаля, всё работает!

Проверьте, что в коде плеера значение его ширины (width) составляет 100%, а кусок style="max-width:1024px;" можно и вовсе удалить, иначе в десктопной версии он может не растягиваться на всю отведённую ему площадь, как на скриншоте выше, а на мобилках, напротив, не будет умещаться в экран из за слишком большого размера. Высоту можете оставить любой по своему усмотрению.

Осталось только настроить дизайн плеера так, чтобы он сочетался с дизайном сайта. Чтобы это сделать, вернитесь в админку BeatStars туда же, откуда копировали код плеера, а затем войдите в плеере в свой аккаунт, если это не произошло автоматически. Войдя в аккаунт, вы увидите в нижнем левом углу плеера кнопку Customize, которая, очевидно, открывает меню кастомизации.

Плеер делит технологическую базу с BeatStars Pro Page, так что это меню настроек вам может быть уже знакомо. Там можно менять цвета, шрифты, настраивать внешний вид секции c закреплённым треком (Featured Track) и всякое по мелочи:

Плеер BeatStars и его меню кастомизации

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

Бонусная часть для самых пытливых

Несмотря на свою кажущуюся простоту, BeatStars Blaze Pro (это официальное название этого плеера, кстати) достаточно функционален и его можно креативно использовать на своём сайте. Покажу несколько примеров.

Отображение конкретного треклиста

В какой-то момент вам захочется усложнить структуру своего сайта и добавить страницы под конкретные жанры/тайпы битов, сделать плейлист с битами по скидке или выделить отдельный раздел под бесплатные биты. И с плеером Blaze Pro это можно сделать без особых проблем.

Для этого вам потребуется создать отдельный плеер таким же образом, как вы делали это ранее, и в настройках плеера указать, какой треклист в нём должен отображаться:

Обратите внимание, что «плейлист» и «треклист» на BeatStars — разные сущности, поэтому не удивляйтесь, если в этом меню вы не видите ваших плейлистов. Плейлисты отображаются только внутри BeatStars, а вот треклисты нужны как раз для того, чтобы упорядочить свой каталог внутри плееров. Создать треклист можно в разделе My Media → Tracklists.

Плеер для конкретного бита, поискового запроса, тега

Треклисты — не единственный способ показать в плеере только тот контент, который вам нужен. У каждого трека в плеере есть кнопка «Share», нажав на которую, можно получить ссылку прямо на этот бит в этом плеере:

Та самая кнопка «Поделиться» (Share)

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

А ещё каждый поисковой запрос в плеере тоже имеет свою ссылку. Зная это, можно создать отдельный плеер, в котором будут отображаться только треки с тегом hard trap, например. И это всё без создания отдельных треклистов!

Чтобы получить такой плеер, просто возьмите код вашего основного Blaze Pro, который вы делали для главной страницы и где отображается весь ваш каталог, и к ссылке внутри него добавьте &search_keyword=hard%20trap — в этом случае вы получите плеер, в поисковой строке которого введен запрос Hard Trap:

Оба трюка, что я описал выше, можно совместить. То есть, можно сделать плеер, в котором сверху будет отображаться нужный вам трек, а под ним — другие биты с нужным вам тегом. Фактически, у вас появляется секция с рекомендуемыми битами, похожими на тот, за которым пришёл покупатель. Круто же!

Чтобы провернуть такой финт, нужно сначала получить ссылку на плеер с конкретным битом, а затем добавить к ней параметр поискового запроса, как я показал выше. В итоге ссылка будет выглядеть как-то вот так: https://player.beatstars.com/ ?storeId=111421 &trackId=12310512 &search_keyword=rnb (без пробелов, естественно).

Заключение

Знали бы вы, как сильно я прокрастинировал с этой статьёй 😅

Написать такой мануал мне хотелось давно, но при этом я понимаю, что дочитают его до конца 3 с половиной человека, а действительно повторить всё в нём написанное осмелится ещё меньшее количество людей. Тем не менее, писать его было интересно, и если это окажется хоть кому-то полезным, значит всё было не зря 🙂

Если у вас есть какие-то вопросы по технической части — не стесняйтесь задавать их в комментариях.