영웅 이미지 디자인 팁 및 Divi 전체에서 사용하는 방법

게시 됨: 2017-06-19

오늘의 튜토리얼에서는 좋은 영웅 이미지/섹션을 디자인하는 방법에 대한 몇 가지 팁을 공유할 것입니다. 공유할 팁은 자신의 웹사이트나 고객의 웹사이트에 효과적인 영웅 섹션을 만드는 데 도움이 될 수 있습니다.

일반적으로 영웅 이미지의 스타일을 지정하는 방법에는 여러 가지가 있으며 일반적으로 웹사이트의 내용에 따라 스타일을 지정하는 방법이 다릅니다. 그렇기 때문에 모든 종류의 웹사이트에 적용되고 모든 사람이 알아야 하는 일반적인 디자인 팁을 다룰 것입니다.

다른 끝을보고 한 후, 우리는 또한 팁에 살고 예를 들어 영웅 섹션을 공유하는거야 그리고 우리가 어떻게 귀하의 웹 사이트 빌더로 디비이 예를 재현하는 방법을 보여 드리겠습니다.

단계별로 만드는 방법을 보여드릴 예제는 다음과 같습니다.

올바른 이미지 선택

웹사이트, 특히 영웅 이미지를 디자인할 때 기본으로 돌아가는 것이 중요합니다. 영웅 섹션은 사람들이 웹사이트를 방문할 때 가장 먼저 보고 경험 하게 될 것임을 고려해야 합니다. 그것은 그들의 행동에 영향을 미치고 그들이 당신의 웹사이트에 연결하는 감정을 결정합니다.

고품질

영웅 이미지를 올바르게 선택하는 데 정말 중요한 또 다른 요소는 품질입니다. 자명하지만 얼마나 많은 웹 사이트가 이에 부응하지 않는지 알면 놀랄 것입니다.

웹 사이트에서 대표하는 서비스 또는 제품과 관련하여 품질을 유지하기를 원하기 때문에 가능한 한 전문적으로 보이길 원합니다.

Divi 내에서 이미지 사용에 대한 궁극적인 가이드에서 언급했듯이 최소 너비가 1920px인 이미지를 사용하는 것이 좋습니다.

전체 화면 모드 고려

전체 화면 모드의 영웅 섹션에서 영웅 이미지를 사용하는 것도 자주 사용됩니다. 영웅 섹션을 전체 화면으로 만들면 더 심오한 수준에서 청중과 소통할 수 있습니다. 영웅 섹션에서 제공되는 것에 더 집중하고 있으므로 실제로 가치가 있어야 합니다.

전체 화면 영웅 섹션을 만드는 것을 고려하고 있다면 웹사이트에서 가장 많은 상호작용을 얻을 수 있는 부분이기 때문에 웹사이트에서 가장 좋은 부분인지 확인하세요. 방문 초기 단계에서 그들과 교류함으로써 웹사이트의 나머지 부분에서 그들과 상호작용할 가능성이 높아집니다. 마찬가지로 전체 화면 영웅 섹션이 가치가 없다면 사람들이 웹사이트에 계속 머무르는 것을 방해할 수 있습니다.

중심에 또는 중심에 두지 않음

대부분의 사람들은 대칭이 눈에 매우 매력적이라는 사실에 동의할 수 있습니다. 그러나 우리는 웹에서 너무 많이 보고 더 이상 특별하다고 생각하지 않을 수도 있습니다. 중심을 잡지 않아도 아름다운 일을 많이 할 수 있습니다.

그러나 위험을 감수하고 싶지 않다면 영웅 이미지를 대칭적으로 만드는 것을 포함하여 영웅 섹션을 위해 만들고 있는 모든 콘텐츠를 중앙에 배치하는 데 항상 대체할 수 있습니다.

대비 만들기

영웅 이미지에는 일반적으로 이미지 자체, 콘텐츠 및 CTA의 세 가지가 포함됩니다. 각 방문자가 경험에서 각자의 역할을 하기를 원하므로 방문자가 조화를 이룰 수 있어야 합니다. 그렇기 때문에 색상을 사용하여 일정한 균형을 만드는 것이 중요합니다. 일반적으로 이미지에 색상 또는 그라디언트 오버레이를 추가하면 작업이 완료됩니다.

Divi 빌더에서 새로운 배경 디자인 옵션을 사용할 수 있게 되면서 대비를 만드는 것이 정말 쉬워졌습니다. 배경 이미지에 사용된 색상을 사용하여 영웅 섹션에 가장 적합한 색상 및 대비 조합을 만들 수 있지만 아래의 영웅 섹션을 다시 만들 때 다시 알려드리겠습니다.

대신 비디오 배경을 사용해보십시오

웹사이트에 생명을 불어넣고 싶다면 이미지 대신 동영상을 사용하는 것도 고려해 볼 수 있습니다. 영웅 섹션의 비디오를 선택할 때 이미지와 동일한 팁이 적용됩니다.

만들고 있는 웹 사이트와 일치하는 다양한 비디오를 온라인에서 찾거나 직접 만들 수 있습니다. Coverr는 특히 영웅 섹션에 사용할 수 있는 동영상을 제공하는 웹 사이트입니다. 그들은 많은 리소스 없이 웹사이트를 구축하는 데 탁월한 다양한 유형의 짧은 비디오를 청중에게 제공합니다.

그들은 매주 월요일에 7개의 새로운 비디오를 업로드하며 공유하는 비디오는 상업적 목적으로도 무료로 사용할 수 있습니다.

차이를 만드는 CTA

훌륭한 영웅 이미지와 섹션에는 항상 목적이 있습니다. 그 목적은 가장 일반적으로 방문자와 웹 사이트 뒤에 있는 사람 또는 회사 간의 상호 작용입니다. 당신은 당신의 방문자를 알고 싶고 바라건대; 충성도가 높은 방문자 또는 리드로 전환하십시오.

실제로 그 목표를 달성하고 목적을 달성하려면 좋은 CTA가 유용할 수 있습니다. CTA를 설계할 때 고려해야 할 사항도 있습니다. CTA의 효과를 높이고 영웅 이미지가 의도한 결과를 전달하도록 하고 싶습니다.

CTA를 설계할 때 다음 사항을 고려하십시오.

CTA가 사람들이 가장 먼저 알아차리는 것 중 하나인지 확인하십시오(색상 및 대비를 통해).
사용 중인 CTA 사본을 생각해 보십시오. 당신은 그것이 설득력이 있기를 원합니다
CTA를 클릭한 후 이어지는 내용이 그만한 가치가 있는지 확인하십시오(결과를 얻으려면 추가 가치 제공).

만들기 시작(데스크톱)

영웅 이미지에 대한 일반적인 팁을 살펴보았으므로 이제 실제로 적용할 차례입니다. 우리가 만든 예제는 제품 지향적이지만 다른 요소(예: 컨텍스트)도 포함했습니다.

우리는 충분한 대비, 좋은 CTA, 고품질 이미지가 있는지 확인했으며 전체 너비 섹션 대신 표준 섹션을 사용했지만 영웅 섹션이 데스크톱에서 전체 화면으로 표시되도록 간격 하위 범주를 수동으로 조정했습니다.

섹션 선택

전각 섹션 또는 일반 섹션 중에서 선택합니다. 표준 섹션이 더 유연하기 때문에 표준 섹션을 선택하고 필요에 맞는 영웅 섹션으로 전환할 것입니다.

배경 옵션

영웅 섹션에서 표현될 이미지는 제품이지만 컨텍스트와 감정도 활용했습니다. 사진이 찍힌 환경이 모험과 관련이 있음을 알 수 있습니다. 히어로 이미지에서 제공하는 콘텐츠를 통해서도 감성을 활용하고 있습니다.

당신은 사람들에게 모험적인 삶을 살면서 '시간을 내라'고 말하고 있습니다. 당신은 또한 그들이 인생에서 가장 원하는 것을 추구하는 것이 괜찮다는 것과 이 특정 시계가 이 여정의 이상적인 마지막 터치라고 말하고 있습니다.

이 예제에 사용된 이미지는 Unsplash에서 가져온 것입니다. 배경 이미지로 사용하려는 이미지를 선택하고 작업 중인 섹션의 설정을 엽니다. 콘텐츠 탭 내에서 배경 하위 범주를 찾을 수 있습니다. 배경 이미지를 추가하여 시작합니다.

다음으로, 우리는 우리가 사용하는 이미지에 색상 오버레이를 넣고 싶습니다. 이것은 위에서 논의한 '대비 만들기' 팁으로 돌아갑니다. 우리가 사용할 텍스트 모듈 및 버튼 모듈과 더 나은 균형을 만들기 위해 이미지에 특정 어둠을 추가합니다.

대부분의 경우 회색 오버레이 색상이 사용됩니다. 이미지의 색상을 그다지 변경하지 않는 오버레이로 사용하는 가장 표준적인 색상입니다. 우리가 사용한 색상 코드는 '#BFBFBF'입니다.

그런 다음 배경 이미지로 돌아가서 배경 이미지 혼합을 적용합니다. 이 경우 '곱하기'를 사용합니다. 배경 이미지 위치도 '왼쪽 상단'으로 변경합니다.

행 설정

계속해서 우리가 만든 섹션에 전체 너비 행을 추가할 것입니다. 설정을 열고 디자인 탭의 간격 하위 범주에서 상단 패딩에 '10%'를 추가합니다.

그런 다음 고급 탭으로 이동하여 가시성 하위 범주에서 휴대폰 및 태블릿에 대한 행을 비활성화합니다.

첫 번째 텍스트 모듈

그런 다음 첫 번째 텍스트 모듈을 추가합니다. 설정을 열고 콘텐츠 탭의 콘텐츠 상자에 사용할 제목을 입력합니다. 디자인 탭으로 이동하여 텍스트 하위 범주를 다음과 같이 수정합니다.

텍스트 방향: 오른쪽
텍스트 글꼴: 랍스터
텍스트 글꼴 크기: 80
텍스트 글꼴 색상: #FFFFFF
텍스트 줄 높이: 1.7em

동일한 탭을 아래로 스크롤하여 Spacing 하위 범주에서 Top Margin에 '25%'를 추가하고 Right Margin에 '-12%'를 추가합니다.

두 번째 텍스트 모듈

다른 텍스트 모듈을 추가하고 콘텐츠 상자에 텍스트를 입력한 다음 디자인 탭으로 이동합니다. 텍스트 하위 범주에서 다음 변경 사항을 적용합니다.

텍스트 방향: 오른쪽
텍스트 글꼴: 몬세라트
텍스트 글꼴 크기: 15
텍스트 글꼴 색상: #FFFFFF
텍스트 줄 높이: 1.7em

동일한 탭을 아래로 스크롤하여 Spacing 하위 범주에서 Top Margin에 '4%'를 추가하고 Right Margin에 '-12%'를 추가합니다.

버튼 모듈

계속해서 버튼 모듈을 추가하고 버튼 텍스트를 입력하십시오. 그런 다음 디자인 탭으로 이동하여 버튼 정렬을 '오른쪽'으로 변경합니다.

동일한 탭을 아래로 스크롤하여 Button 하위 범주를 다음과 같이 수정합니다.

버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 크기: 20
버튼 텍스트 색상: #FFFFFF
버튼 배경색: #E02B20
버튼 테두리 너비: 2
버튼 테두리 색상: #E02B20
버튼 테두리 반경: 3
버튼 글꼴: 몬세라트
버튼 글꼴 스타일: 대문자

모바일 및 태블릿 버전

데스크탑 화면의 영웅 이미지를 만들 때 더 많은 가능성이 있습니다. 반면에 휴대폰과 태블릿의 경우 간단한 방법으로 모든 것을 보기 좋게 만드는 방법을 찾아야 합니다.

누군가가 휴대전화나 태블릿으로 귀하의 웹사이트를 방문할 때 모든 것을 중앙 집중화할 것입니다. 데스크탑용으로 만든 행을 복제하여 동일한 섹션에 배치합니다.