당신이 좋아할 밴드 웹사이트 레이아웃을 만드는 7가지 방법

새로운 밴드 웹사이트 디자인을 이제 막 시작했든 작업 중인 새 프로젝트를 위해 사이트를 업데이트했든, Bandzoogle의 플랫폼은 웹사이트 레이아웃의 가능성을 확장할 수 있는 훌륭한 도구를 제공합니다.

어떤 밴드 웹사이트 템플릿을 선택하든 레이아웃을 사용자 지정하여 특정 요구 사항과 미학에 실제로 적합한 모양을 만드는 방법은 많이 있습니다.

밴드 또는 기타 음악 프로젝트를 위한 웹사이트를 구축할 때 정보를 가능한 한 명확하게 배치하는 동시에 아티스트로서의 브랜드 및 가치에 충실하는 것이 중요합니다.

"이미지 및 텍스트" 기능은 웹사이트 페이지에 대한 고유한 레이아웃을 만들 때 사용하는 가장 좋아하는 기능 중 하나입니다. 그것은 매우 다재다능한 기능이며 모든 장치에서 깨끗한 포맷을 보장합니다.

섹션 사용자 정의와 함께 이 기능을 사용하여 웹 사이트에서 다양한 목적을 위한 7밴드 웹 사이트 레이아웃을 만드는 방법을 보여 드리겠습니다.

먼저 필요에 따라 사용하거나 생략할 수 있는 "이미지 및 텍스트" 기능의 모든 요소에 대해 설명하겠습니다.

• 이미지: 물론 "이미지 및 텍스트" 기능에 이미지를 추가할 수 있습니다. 이 이미지는 정사각형, 원형 ​​또는 5:4 또는 16:9 비율로 자를 수 있습니다. "이미지 링크" 영역에서 이 이미지에 대한 하이퍼링크를 추가할 수도 있습니다. 이미지를 웹사이트에 업로드하기 전에 웹용으로 이미지를 최적화해야 합니다.
• 제목: 테마 편집 탭의 "제목 1" 설정에서 글꼴 스타일을 가져오는 제목을 추가할 수 있습니다.
• 소제목 : 테마 편집 탭의 "제목 2" 설정에서 글꼴 스타일을 가져오는 소제목을 추가할 수 있습니다.
• 설명: 여기의 설명 또는 '본문 텍스트'는 짧거나 길 수 있으며, 텍스트가 상당히 긴 경우 이미지 주위에 텍스트를 감싸는 옵션이 있습니다(심층 아티스트 약력의 경우 - 나중에 자세히 설명) ). 설명 영역의 텍스트에 하이퍼링크를 추가할 수 있습니다.
• 버튼: 버튼은 외부 페이지, 사이트의 페이지, 트랙, 앨범, 파일 또는 이메일 주소에 링크할 수 있습니다.

이제 이 기능과 기타 레이아웃 사용자 정의를 웹사이트에 적용하는 7가지 흥미로운 방법이 있습니다. 즐기십시오!

1. 음악 카탈로그, 프로젝트 포트폴리오 등을 구성합니다.

페이지에서 강조하고 싶은 다양한 프로젝트, 서비스, 앨범 등이 있는 경우 페이지의 여러 열에 여러 이미지 및 텍스트 기능을 사용하여 '방문 페이지'를 만드는 것이 좋습니다.

이것을 실제로 보려면 Jojo Worthington의 "생산 및 엔지니어링" 페이지를 확인하십시오. 여기에서 그녀는 이미지 및 텍스트 기능을 사용하여 조직적인 방식으로 모든 크레딧을 나열합니다.

아티스트 웹 사이트: 조조 워싱턴

비슷한 모양을 얻으려면 먼저 새 페이지나 섹션을 만드십시오. 새 페이지를 만들려면 콘텐츠 편집에서 "페이지" > "페이지 추가"를 클릭하고 필요에 따라 페이지 이름을 지정합니다. "내 페이지 만들기"를 클릭하십시오.

새 섹션을 만들려면 콘텐츠 편집에서 페이지의 두 섹션 사이에 마우스를 놓고 파란색 "+ 섹션 추가" 버튼을 클릭합니다.

음악에 맞는 맞춤형 모양과 느낌으로 멋진 웹사이트를 디자인하십시오. 지금 Bandzoogle로 웹사이트를 구축하세요!

시작하려면 페이지의 섹션을 두세 개의 열로 나누는 것이 좋습니다. 콘텐츠 편집에서 "새 섹션"(페이지 레이아웃 내의 파란색 수평선)을 클릭한 다음 생성한 섹션 위로 마우스를 가져간 다음 "열 편집"을 클릭한 다음 여기에서 "2개의 열" 또는 "3개의 열"을 선택합니다.

"이미지 및 텍스트" 기능을 추가하려면 "기능 추가" > "이미지 및 텍스트"를 클릭하고 회색 배치 화살표를 사용하여 이 섹션의 열 중 하나에 기능을 배치합니다. 버튼과 텍스트가 이미지 아래에 놓이도록 하려면 "스택" 표시 옵션을 선택합니다 .

그런 다음 하나의 프로젝트/앨범 등을 나타내는 이미지를 추가하고 필요에 따라 텍스트를 추가합니다. 제목/설명을 원하지 않으면 텍스트 필드에서 프롬프트를 제거하고 비워 두십시오.

이 이미지에 링크를 추가하려면 이미지 축소판 아래에 있는 "편집"을 클릭하십시오. 이미지 옆에 메뉴가 나타납니다. "링크"를 클릭한 다음 링크 유형을 선택합니다. 디스코그래피 페이지를 만드는 경우 "앨범" 또는 "트랙"에 링크하여 사이트에 설정된 앨범 또는 트랙/단일에 연결할 수 있습니다. 프로듀서, 엔지니어 등으로 포트폴리오를 만드는 경우 "외부 페이지"로 연결하여 제공된 필드에 프로젝트 URL을 입력할 수 있습니다. 적용을 클릭합니다.
마지막으로 버튼 옵션이 있습니다. 버튼을 제외하려면 "버튼 링크" 아래에서 "링크 없음"을 선택하십시오. 또는 다른 링크 유형(이미지에 적용한 것과 동일한 링크)을 선택합니다.

저장을 클릭하여 이러한 변경 사항을 모두 저장합니다. 귀하의 음반, 프로젝트 포트폴리오 등의 모든 항목에 대해 "이미지 및 텍스트" 기능을 계속 추가하십시오. 일단 구성되면 사이트 방문자가 클릭할 수 있는 항목의 훌륭한 그리드를 갖게 됩니다.

2. 홈 페이지에서 프로젝트 또는 제품 강조 표시

"이미지 및 텍스트" 기능을 사용하는 또 다른 좋은 방법은 밴드 웹사이트 홈페이지에서 몇 가지 주요 항목을 강조 표시하는 것입니다. 홈페이지는 최신 프로젝트와 사이트에서 제공하는 모든 것에 대한 간략한 개요를 제공할 수 있는 좋은 장소입니다. 아마도 몇 가지 흥미로운 발표가 있거나 사이트 방문자를 새 앨범, 온라인 상품 매장 또는 투어 일정으로 안내하고 싶을 것입니다.

"이미지 및 텍스트" 기능을 사용하여 이러한 항목을 깔끔하게 강조 표시하고 사람들을 이 콘텐츠를 찾을 수 있는 사이트 내부 페이지로 연결할 수 있습니다. 이미지를 사용하면 사이트 방문자의 관심을 끌 수 있습니다. 이렇게 하면 홈페이지가 깨끗하고 단순해지며 사이트 내부 페이지와의 상호 작용이 촉진됩니다.

Wolf & Moon과 Lightbound Music은 모두 홈페이지에서 이 작업을 훌륭하게 수행합니다.

아티스트 웹 사이트: Wolf & Moon

아티스트 웹 사이트: Lightbound Music

이 두 페이지 모두에서 "콜라주" 표시 스타일을 사용하고 있습니다. 그들은 콜라주 오버레이의 배경색이 아트웍과 완벽하게 일치하도록 새로운 제품/프로젝트를 보완하기 위해 웹사이트 템플릿을 사용자 정의했습니다.

섹션 배경색, 콜라주 오버레이 색상, 버튼 색상 및 사용하는 이미지의 색상 사이에서 여기에서 여러 색상으로 실제로 재생할 수 있습니다.

3. 개성을 더하기 위해 약력을 보강하십시오.

"이미지 및 텍스트" 기능의 제목, 부제, 버튼 및 이미지 옵션을 사용하여 뮤지션 약력을 작성할 때 개성을 많이 추가할 수 있습니다. 필요에 따라 이러한 항목을 포함하거나 생략할 수 있습니다.

Annie Sumi는 그녀의 약력 페이지에서 이 작업을 훌륭하게 수행합니다. Annie는 "이미지 및 텍스트" 기능의 "부제목" 필드에 자신의 음악적 연습에 공감하는 인용문을 배치했습니다. 이것은 다르게 스타일이 지정되고 그녀의 약력 상단에 강조 표시됩니다. 그녀는 "분할" 디스플레이 옵션을 사용하여 이미지가 약력 옆에 놓이도록 했습니다.

그녀는 아티스트의 헤드샷 이미지를 원으로 잘랐습니다. 이는 이미지를 보완할 뿐만 아니라 음악의 테마와도 잘 어울립니다. "이미지 및 텍스트" 기능에서 이미지를 자르려면 이미지 축소판 아래에 있는 "편집"을 클릭하십시오. 이미지 옆에 메뉴가 나타납니다. 여기에서 "자르기"를 클릭하고 자신에게 적합한 자르기 스타일을 선택하십시오. 필요에 따라 이미지를 끌어 위치를 지정하고 적용을 클릭합니다.

그녀는 또한 "옵션"에서 "텍스트 줄 바꿈" 스위치를 "켜기"로 전환하여 텍스트가 이미지 주위를 둘러싸도록 했습니다. 이렇게 하면 다양한 화면 크기에 잘 반응하고 페이지 레이아웃이 약력의 전체 길이에 걸쳐 전체로 보이도록 유지됩니다.

아티스트: 애니 수미

4. 조직화된 EPK 만들기

"이미지 및 텍스트" 기능에 대한 또 다른 표시 옵션은 "이미지 위의 텍스트"입니다. 이렇게 하면 이미지 중심의 멋진 레이아웃을 만들 수 있는 가능성이 매우 높아집니다. 이 옵션은 웹사이트에 EPK를 생성하는 데 훌륭하게 작동하여 예약자 및 기타 업계 사람들이 클릭 한 번으로 원하는 것을 빠르게 찾을 수 있기 때문에 감사할 것입니다. 나는 내 밴드의 EPK에서 이 예를 가져오고 있습니다. 여기서 요소는 "이미지 위의 텍스트" 옵션을 사용하여 명확하게 설명되어 있습니다.

여기에서는 위의 "방문 페이지" 제안(#1)에서 유사한 레이아웃을 설정했습니다. 새 앨범을 위해 촬영한 사진의 질감 이미지를 사용하고 이 모든 이미지를 원으로 잘라냈습니다. 그런 다음 각 이미지와 텍스트 기능에 간단한 "제목"을 추가하여 우리 밴드의 EPK에 포함된 다양한 요소에 레이블을 지정했습니다.

각 이미지는 각 카테고리에 대한 내용을 담고 있는 별도의 메뉴 외 페이지에 연결되어 있습니다. 예를 들어, 모든 보도 사진이 포함된 특별한 "EPK - 사진" 페이지가 있습니다.

매우 시각적인 EPK 페이지를 위해 이것을 자유롭게 시도하십시오!

아티스트 웹 사이트: The Lifers

5. 구독, 서비스 등에 대한 정보 페이지를 만듭니다.

많은 회원들이 사이트 방문자에게 놀라운 서비스를 제공합니다. 이것이 팬 구독을 판매하든 기타 맞춤 서비스(음악 레슨, 녹음 세션, 치료 등)를 판매하든, 우리는 회원이 세상에 제공하는 것에 항상 놀라고 있습니다.

Jackie Gage는 구독 제품에 대한 멋진 정보 페이지를 만들었습니다. Jackie는 "이미지 및 텍스트" 기능에 대해 "분할" 표시 옵션을 사용하여 제공하는 서비스 종류를 간략하게 설명합니다. Jackie는 이미지 및 텍스트 기능의 제목, 부제목 및 버튼 구성 요소를 잘 활용하여 사이트 방문자에게 주요 정보를 명확하게 설명합니다. 여기 멋진 작품!

아티스트 웹 사이트: Jackie Gage

6 . 레이아웃에 큰 영향을 미치려면 섹션 배경을 사용하세요.

훌륭한 이미지에는 많은 힘이 있습니다. 섹션에 배경 이미지를 추가하면 페이지가 시각적으로 분할됩니다. 이 휴식은 우리의 스크롤링 인간의 눈으로 환영되며 해당 콘텐츠는 즉시 중요하고 흥미진진하게 나타납니다. 이는 페이지 어딘가에 클릭 유도문안을 통합하는 또 다른 좋은 방법입니다.

Intune Experience는 홈 페이지에서 이를 훌륭하게 수행합니다. 그들은 홈 페이지 중간에 섹션에 "섹션 배경 이미지"로 멋진 질감 이미지를 설정했습니다. 그들은 "텍스트" 기능에 자신의 인용문을 추가하고 방문자에게 세션 예약을 요청하는 링크된 버튼을 추가했습니다.

이 레이아웃은 개인적인 느낌을 주고 시각적으로 흥미롭고 참여를 유도하는 명확한 메시지를 제공하므로 완벽합니다. 단순함이 여기서 핵심입니다.

아티스트 웹 사이트: Becki Fleischer

7. 즐기세요!

약간의 실험을 할 의향이 있다면 레이아웃을 가지고 놀 수 있는 방법이 너무 많습니다. 다음은 모양 자르기, 재미있는 색상, 섹션 배경, 다양한 열 레이아웃 등을 사용하여 레이아웃 가능성을 가지고 노는 사이트의 좋은 예입니다.

Piper Hayes는 원형 자르기와 이미지 및 텍스트 기능에 대한 '콜라주' 표시 옵션을 사용하여 보컬 코칭 사이트에 멋진 미학을 새겼습니다. 이 사이트는 훌륭한 색상 팔레트, 아름다운 질감 이미지, 두려움 없는 개인적인 손길을 결합하여 매우 환영하는 온라인 공간을 만듭니다.

아티스트 웹 사이트: Piper Hayes

이 게시물이 페이지에 다양한 레이아웃을 만들어 웹사이트에 개인적이고 미학적으로 즐거운 느낌을 줄 수 있는 방법에 대한 영감을 제공하는 데 도움이 되었기를 바랍니다. 물론, 귀하가 만든 것을 보고 피드백을 제공하기를 원하시면 수상 경력에 빛나는 지원 팀에 언제든지 연락해 주십시오. 우리는 모든 회원에게 무료 밴드 웹 사이트 리뷰를 제공합니다!