7 способов создать макет веб-сайта группы, который вам понравится

Если вы только начинаете работу над новым дизайном веб-сайта группы или обновляете свой сайт для нового проекта в разработке, платформа Bandzoogle предоставляет отличные инструменты для расширения возможностей макета вашего веб-сайта.

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

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

Функция «Изображение и текст» — одна из моих любимых функций при создании уникальных макетов страниц веб-сайта. Это очень универсальная функция, обеспечивающая чистое форматирование на всех устройствах.

Я покажу вам, как использовать эту функцию в сочетании с настройками разделов, чтобы создать на вашем веб-сайте 7 макетов веб-сайтов для различных целей.

Прежде всего, я объясню все элементы функции «Изображение и текст», которые можно использовать или опускать по мере необходимости:

• Изображение: Конечно, вы можете добавить изображение к функции «Изображение и текст». Это изображение можно обрезать как квадрат, круг или с соотношением сторон 5:4 или 16:9. Вы также можете добавить гиперссылку на это изображение в области «Ссылка на изображение». Обязательно оптимизируйте изображения для Интернета, прежде чем загружать их на свой веб-сайт.
• Заголовок. Вы можете добавить заголовок, стиль шрифта которого зависит от настроек «Заголовок 1» на вкладке «Редактировать тему».
• Подзаголовок: вы можете добавить подзаголовок, стиль шрифта которого зависит от настроек «Заголовок 2» на вкладке «Редактировать тему».
• Описание: описание или «основной текст» здесь может быть коротким или длинным, и есть варианты обтекания текста вокруг изображения, если это довольно длинный текст (возможно, для подробной биографии художника — подробнее об этом позже). ). Гиперссылки могут быть добавлены к тексту в области описания.
• Кнопка: Кнопка может ссылаться на внешнюю страницу, страницу на вашем сайте, трек, альбом, файл или адрес электронной почты.

А теперь представляем 7 интересных способов применить эту функцию и другие настройки макета к вашему веб-сайту — наслаждайтесь!

1. Организуйте свой музыкальный каталог, портфолио проектов и многое другое.

Если у вас есть много различных проектов, сервисов, альбомов и т. д., которые вы хотели бы выделить на странице, отличным вариантом является создание «целевой страницы» с использованием нескольких функций «Изображение» и «Текст» в нескольких столбцах на вашей странице.

Чтобы увидеть это в действии, зайдите на страницу Джоджо Уортингтон «Производство и разработка», где она использует изображения и текст, чтобы перечислить все свои кредиты в организованном порядке.

Сайт исполнителя: Джоджо Уортингтон

Чтобы получить аналогичный вид, сначала создайте новую страницу или раздел. Чтобы создать новую страницу, в разделе «Редактировать содержимое» нажмите «Страницы» > «Добавить страницу» и назовите страницу по мере необходимости. Нажмите «Создать мою страницу».

Чтобы создать новый раздел, в разделе «Редактировать содержимое» наведите указатель мыши между двумя разделами на своей странице и нажмите синюю кнопку «+ Добавить раздел».

Создайте потрясающий веб-сайт с индивидуальным внешним видом, который соответствует вашей музыке. Создайте веб-сайт с Bandzoogle прямо сейчас!

Я бы порекомендовал для начала разбить раздел страницы на две или три колонки. В разделе «Редактировать содержимое» нажмите «Новый раздел» (синяя горизонтальная линия на макете страницы), а затем наведите указатель мыши на созданный раздел и нажмите «Редактировать столбцы», затем выберите здесь «2 столбца» или «3 столбца».

Чтобы добавить функцию «Изображение и текст», нажмите «Добавить функцию» > «Изображение и текст» и поместите функцию в один из столбцов в этом разделе с помощью серых стрелок размещения. Выберите параметр отображения «Стек», чтобы кнопка и любой текст располагались под изображением.

Затем добавьте изображение, представляющее один проект/альбом/и т. д., и при необходимости добавьте любой текст. Если вам не нужны заголовки/описания, просто удалите подсказки из текстовых полей и оставьте их пустыми.

Чтобы добавить ссылку на это изображение, нажмите «Изменить» под миниатюрой изображения. Рядом с изображением появится меню. Нажмите «Ссылка», а затем выберите тип ссылки — если вы создаете страницу дискографии, вы можете сделать ссылку на «Альбом» или «Трек», чтобы сделать ссылку на альбом или трек/сингл, установленный на вашем сайте. Если вы создаете портфолио в качестве продюсера, инженера и т. д., вы можете указать ссылку на «внешнюю страницу» и ввести URL-адрес проекта в соответствующее поле. Нажмите Применить.
И последнее, но не менее важное: есть опция «Кнопка» — чтобы исключить кнопку, выберите «Нет ссылки» в разделе «Ссылка на кнопку». Или выберите другой тип ссылки (вероятно, ту же ссылку, которую вы применили к своему изображению).

Нажмите Сохранить, чтобы сохранить все эти изменения. Продолжайте добавлять функции «Изображения и текст» для всех элементов вашей дискографии, портфолио проектов и т. д. После того, как они будут созданы, у вас будет отличная сетка элементов, которую посетители вашего сайта могут просматривать.

2. Выделите проекты или продукты на своей домашней странице

Еще один отличный способ использовать функцию «Изображение и текст» — выделить несколько ключевых элементов на домашней странице веб-сайта вашей группы. Домашняя страница — отличное место для краткого обзора ваших последних проектов и всего, что предлагает ваш сайт. Возможно, у вас есть несколько захватывающих объявлений, или вы хотите познакомить посетителей вашего сайта с вашим новым альбомом, интернет-магазином товаров или графиком вашего тура.

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

Wolf & Moon и Lightbound Music прекрасно справляются с этой задачей на своих домашних страницах.

Сайт исполнителя: Wolf & Moon

Сайт исполнителя: Lightbound Music

Обратите внимание на использование стиля отображения «Коллаж» на обеих этих страницах. Они настроили шаблоны своих веб-сайтов, чтобы дополнить свои новые продукты / проекты, чтобы цвет фона наложения коллажа идеально соответствовал художественному оформлению.

Вы действительно можете играть с несколькими цветами здесь, между цветом фона вашего раздела, цветом наложения коллажа, цветами кнопок и цветами на изображении, которое вы используете.

3. Дополните свою биографию, чтобы добавить индивидуальности

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

Энни Суми отлично справляется с этой задачей на своей странице «Био». Энни поместила цитату, которая перекликается с ее музыкальной практикой, в поле «Подзаголовок» функции «Изображение и текст». Это выглядит по-другому и выделено в верхней части ее биографии. Она использовала опцию «разделенного» отображения, чтобы изображение располагалось рядом с биотекстом.

Она обрезала свое изображение артиста в виде круга — это не только дополняет изображение, но и прекрасно сочетается с темами ее музыки. Чтобы обрезать изображение в функции «изображение и текст», нажмите «редактировать» под миниатюрой изображения. Рядом с изображением появится меню. Нажмите «Обрезать» здесь и выберите стиль обрезки, который вам подходит. Перетащите изображение, чтобы расположить его, и нажмите «Применить».

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

Художник: Энни Суми

4. Сделайте суперорганизованный EPK

Другой вариант отображения для функции «Изображение и текст» — «Текст на изображении». Это освобождает так много возможностей для создания прекрасных макетов, которые очень ориентированы на изображения. Этот вариант прекрасно работает для создания EPK на вашем веб-сайте, который оценят букмекеры и другие представители отрасли, поскольку они могут быстро найти то, что ищут, одним щелчком мыши. Я беру этот пример из EPK моей собственной группы, где элементы четко обозначены с помощью опции «Текст на изображении».

Здесь я настроил аналогичный макет из предложенного выше предложения «Целевая страница» (# 1). Я использовал несколько текстурных изображений из фотосессии, которую мы сделали для нашего нового альбома, и обрезал их как круги. Затем я добавил простой «Заголовок» для каждого изображения и текста, чтобы обозначить различные элементы, включенные в EPK нашей группы.

Каждое изображение связано с отдельной страницей вне меню, содержащей контент для каждой категории. Например, у меня есть специальная страница «ЕПК — Фото», где собраны все наши фотографии для прессы.

Не стесняйтесь попробовать это для очень наглядной страницы EPK!

Сайт исполнителя: The Lifers

5. Создайте информационную страницу для подписок, услуг и т. д.

Многие из наших членов предлагают удивительные услуги посетителям своих сайтов - будь то продажа фан-подписок или другие индивидуальные услуги (уроки музыки, сеансы звукозаписи, терапия и т. д.), мы всегда поражаемся тому, что наши участники приносят миру.

Джеки Гейдж создал замечательную информационную страницу для своих предложений по подписке. Джеки использует параметр отображения «Разделить» для функции «Изображение и текст», чтобы обозначить виды услуг, которые они предлагают. Джеки отлично использует компоненты заголовка, подзаголовка и кнопки функции изображения и текста, чтобы основная информация была четко изложена для посетителей сайта. Замечательная работа здесь!

Сайт исполнителя: Джеки Гейдж

6 . Используйте фоны разделов для большего эффекта в ваших макетах

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

Intune Experience прекрасно делает это на своей домашней странице. Они установили красивое текстурное изображение в качестве «фонового изображения раздела» в разделе на полпути к своей домашней странице. Они добавили цитату от себя в функцию «Текст», а затем кнопку со ссылкой, призывающую посетителей забронировать сеанс.

Этот макет идеален, так как он дает индивидуальный подход, он визуально интересен и дает четкое сообщение для взаимодействия. Простота действительно является ключом здесь.

Сайт исполнителя: Бекки Флейшер

7. Получайте удовольствие!

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

Пайпер Хейс добилась отличной эстетики на своем сайте Vocal Coaching с использованием круговой обрезки и опции отображения «коллаж» для функции «Изображение и текст». Этот сайт сочетает в себе великолепную цветовую палитру, прекрасные текстурные изображения и бесстрашные личные штрихи, чтобы создать очень гостеприимное онлайн-пространство.

Сайт исполнителя: Пайпер Хейс

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