글로벌 사전 설정으로 Divi 사이트의 로고 이미지 최적화하기
게시 됨: 2020-09-25Divi에서 사이트 로고를 최적화하는 것은 웹사이트 디자인의 중요한 부분입니다. 그러나 그것이 신비스럽거나 벅찬 노력일 필요는 없습니다. 사실, Divi는 Divi 테마 빌더와 사용 가능한 모든 내장 디자인 옵션을 사용하여 매우 간단하게 만듭니다.
이 튜토리얼에서는 Divi에서 올바른 크기, 위치 및 스타일로 로고를 최적화하는 방법을 보여 드리겠습니다. 그런 다음 해당 디자인을 향후 개발에 사용할 수 있는 전역 사전 설정으로 저장하는 방법을 보여 드리겠습니다.
뛰어들자!
로고 이미지 사전 설정 레이아웃을 무료로 다운로드하십시오
이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
글로벌 헤더에서 이 로고 이미지 레이아웃을 사용하려면 먼저 다음과 같이 Divi 라이브러리로 가져와야 합니다.
- Divi > Divi 라이브러리로 이동합니다.
- 페이지 상단의 가져오기/내보내기 버튼을 클릭합니다.
- 이식성 팝업에서 가져오기 탭 선택
- 가져오기 사전 설정 선택
- 가져오기 버튼 클릭
그런 다음 테마 빌더로 이동하여 전역 헤더를 편집합니다. 로고를 원하는 위치에 이미지 모듈을 추가하고 사전 설정을 사용하여 그에 따라 로고의 스타일을 지정하고 배치합니다.
로고 크기
Divi로 로고 이미지를 최적화하기 전에 이미지 모듈에 업로드하기 전에 로고 이미지의 크기를 최적화하는 것을 고려하는 것이 중요합니다. 100x50px로 로고를 표시할 계획이라면 1920x1080px 로고 이미지를 사이트에 업로드하고 싶지 않습니다. 물론, 나중에 로고 이미지의 크기를 조정할 수 있는 방법이 있습니다(예: srcset 및 이미지 최적화 플러그인). 그러나 이는 페이지 로드 시간이 느려질 수 있으므로 모범 사례가 아닙니다. 그리고 솔직히 말해서 로고는 지저분한 단축키에 만족하기에는 너무 중요합니다.
다음은 고려해야 할 일반적인 로고 이미지 크기 목록입니다.
수평 레이아웃의 경우:
- 250픽셀 x 150픽셀
- 350픽셀 x 75픽셀
- 400픽셀 x 100픽셀
수직(정사각형) 레이아웃의 경우:
- 160픽셀 x 160픽셀(대형)
- 60픽셀 x 60픽셀(소)
생각보다 큰 로고 크기가 필요할 수 있습니다.
데스크탑에는 더 작은 로고가 필요하고 태블릿(또는 휴대폰)에는 더 큰 로고가 필요한 것이 일반적입니다. Divi에서는 열 레이아웃이 태블릿 및 휴대폰 디스플레이에서 1열 레이아웃으로 쌓이는 것이 일반적입니다. 그리고 태블릿 브라우저 너비는 일반적으로 데스크탑보다 로고를 위한 훨씬 더 큰 컨테이너인 980px의 최대 너비를 갖기 때문에. 따라서 더 큰 로고 크기를 선택하고 장치에 따라 최대 높이 또는 너비를 조정해야 할 수 있습니다. 태블릿에 필요한 것보다 작은 로고를 업로드하면 이미지의 선명도를 손상시키지 않고 크기를 늘릴 수 없습니다. 간단히 말해서 로고가 모든 브라우저 너비에서 가장 큰 표시 크기만큼 커야 합니다.
글로벌 사전 설정으로 Divi 사이트의 로고 크기 및 위치 최적화
글로벌 헤더 로고 편집
시작하려면 Divi > Theme Builder로 이동하여 Divi Theme Builder로 이동합니다. 그런 다음 클릭하여 기본 웹 사이트 템플릿 내에서 새 전역 헤더를 만듭니다.
그런 다음 "처음부터 빌드" 옵션을 선택합니다.
이 튜토리얼에서는 Divi 테마 빌더를 사용하여 사용자 정의 글로벌 헤더에 포함된 로고를 최적화할 것입니다. 기존 머리글 디자인을 사용하거나 블로그에서 미리 만들어진 글로벌 머리글(및 바닥글) 템플릿 중 하나를 가져올 수 있습니다. 일을 단순하게 유지하기 위해 로고와 메뉴가 있는 정말 간단한 헤더 레이아웃을 만들 것입니다.
행 및 열 레이아웃 추가
전역 머리글 레이아웃 편집기 내에서 1/4의 3/4 열 행을 추가합니다.
오른쪽 열에 이미지 모듈을 자리 표시자로 추가하여 헤더의 로고 배치를 시각화하는 데 도움이 됩니다.
로고 이미지를 표시하는 이미지 모듈 추가
왼쪽 열에 이미지 모듈을 추가합니다.
로고용 이미지 모듈 사용
보다 전통적인 헤더 디자인의 경우 Divi의 메뉴 모듈을 활용하여 로고를 표시할 수 있습니다. 그러나 Divi의 동적 콘텐츠 기능을 사용하면 원하는 수의 Divi 모듈을 사용하여 사이트 로고를 표시할 수 있습니다. 기본적으로 Divi에서 이미지를 표시할 수 있는 곳에 로고를 표시할 수 있습니다. 예를 들어, 사이트 로고를 블러브 모듈 이미지에 표시하거나 원하는 경우 배경 이미지로 표시하도록 선택할 수 있습니다. 이 튜토리얼에서는 이미지 모듈을 사용하여 사이트 로고를 표시하는 데 집중할 것입니다. 이렇게 하면 로고가 완전히 별도의 요소가 될 수 있습니다(메뉴 모듈 또는 블러브 모듈과 같은 모듈의 다른 요소와 연결되지 않음). 또한 이미지 모듈은 이미지 스타일을 지정하기 위해 구축되어 로고 이미지 스타일을 지정할 수 있는 많은 추가 디자인 옵션을 제공합니다. 사이트 로고를 동적 이미지로 추가하는 방법에 대한 자세한 내용은 기사 끝으로 이동하십시오.
몇 가지 다른 로고 이미지 크기를 테스트할 예정이므로 동적 사이트 로고 대신 일반 이미지를 예제에 사용할 것입니다.
예 1: 왼쪽 맞춤 로고 전역 사전 설정 만들기
이 첫 번째 예에서는 60x60px인 왼쪽 정렬 로고에 대한 간단한 사전 설정을 만들 것입니다.
이미지 모듈 설정을 열고 60x60px 로고 이미지를 이미지 모듈에 업로드합니다.
다음과 같이 이미지 디자인 설정을 업데이트합니다.
- 이미지 정렬: 중앙
- 최대 너비: 60px
- 모듈 정렬(데스크탑): 왼쪽
- 모듈 정렬(태블릿 및 휴대폰): 중앙
왼쪽 맞춤 로고를 위한 디자인인데도 이미지 정렬이 모듈 정렬과 다르기 때문에 이미지 정렬이 가운데로 설정되어 있습니다. 이미지 정렬은 모듈 내 중앙에 있습니다. 그리고 모듈의 최대 너비가 60px이므로 모듈 정렬이 이제 로고 이미지의 정렬을 지시하기 때문에 이미지 정렬은 실제로 중요하지 않습니다.
로고에 배경 이미지를 추가하거나 컨테이너를 둥글게 만들고 싶을 때 유용합니다. 기본적으로 이것은 로고 이미지 컨테이너를 로고 이미지 자체와 같은 크기로 만듭니다.
열이 모바일에서 쌓이기 때문에 모듈 정렬이 태블릿의 중앙으로 변경되었음을 알 수 있습니다.
현재 스타일에서 새 사전 설정 만들기
로고 디자인이 완료되었으므로 사전 설정 드롭다운을 클릭하고 "현재 스타일에서 새 사전 설정 만들기"를 선택하여 이미지 모듈에 대한 전역 사전 설정을 만들 수 있습니다.
로고 이미지 사전 설정에 고유한 이름을 지정합니다. 이 경우 사용할 이미지 크기와 사전 설정을 사용하도록 선택할 때 로고가 정렬되는 방식을 정확히 알려주기 위해 "Logo Left(60px x 60px)"라는 이름을 지정할 수 있습니다.
예 2: 오른쪽 맞춤 로고 전역 사전 설정 만들기
이 다음 예에서는 오른쪽 정렬된 로고 전역 사전 설정을 만들 것입니다. 이것은 우리의 현재 디자인과 사전 설정으로 쉽게 할 수 있습니다. 열 레이아웃을 4분의 3으로 변경하고 메뉴를 왼쪽 열로, 로고를 오른쪽 열로 이동하기만 하면 됩니다.
방금 만든 로고 이미지 사전 설정이 포함된 이미지 모듈의 설정을 엽니다.
그런 다음 디자인 설정을 업데이트하여 모듈 정렬을 오른쪽으로 변경합니다.
충분히 간단합니다. N0w 사전 설정 드롭다운을 클릭하고 현재 스타일에서 새 사전 설정을 만듭니다.
사전 설정에 "Logo Right(60px x 60px)"라는 이름을 지정합니다.
예 3: 중앙 로고 전역 사전 설정 만들기
이 다음 예에서는 중앙 로고 전역 사전 설정을 만들 것입니다. 이것은 중앙에 있는 로고이므로 이 예에서는 더 큰 로고를 사용할 수 있습니다.
먼저 열 레이아웃을 0/4 1/2 1/4 구조로 변경하여 로고의 중앙에 더 큰 열이 있도록 합니다. 그런 다음 로고를 중앙 열로 이동합니다.
250x150px 크기의 새 로고 이미지를 업로드하세요.
디자인 탭에서 다음을 업데이트합니다.
- 최대 너비: 250px
- 모듈 정렬: 중앙
그런 다음 현재 스타일에서 새 전역 사전 설정을 추가합니다.
그리고 이름을 "로고 센터(250px x 150px)"로 지정합니다.
예 4: 왼쪽 정렬된 큰 로고 전역 사전 설정 만들기
이 다음 예에서는 더 큰 왼쪽 정렬 로고(400px x 100px)에 대한 사전 설정을 만들 것입니다.
로고의 너비는 400px이므로 로고에 필요한 공간을 제공하는 열 구조가 필요합니다.
왼쪽에 로고가 있고 오른쪽에 메뉴가 있는 2열 구조로 돌아가 보겠습니다. 그러나 구조를 1/3 2/3로 변경해 보겠습니다.
기본 행 최대 너비를 1080px로 유지하면 너비가 대략 320px인 열이 생성됩니다.
이미지 모듈 설정을 열고 400x100px 크기의 로고 이미지를 추가합니다.
디자인 탭에서 다음을 업데이트합니다.
- 최대 너비: 400px
- 모듈 정렬(데스크탑): 왼쪽
- 모듈 정렬(태블릿): 중앙
언급했듯이 열의 최대 너비는 320px로, 로고 이미지가 데스크탑에서 전체 너비로 확장될 수 없음을 의미합니다. 그러나 열이 쌓이면 태블릿에서 사용할 수 있습니다. 이러한 이유로 이미지의 최대 너비를 400px로 설정하려고 합니다.
이제 로고가 중앙에 있을 뿐만 아니라 태블릿에서도 약간 커졌습니다.
그런 다음 현재 스타일에서 새 전역 사전 설정을 추가합니다.
"Logo Left(400px x 100px)"라는 이름을 지정하고 사전 설정을 저장합니다.
예 5: 호버 효과 전역 사전 설정을 사용하여 왼쪽 맞춤 로고 만들기
이 마지막 예에서는 왼쪽 정렬 로고에 약간의 호버 효과를 추가하고 새 전역 사전 설정으로 저장합니다.
일반적으로 사람들은 로고를 홈페이지에 연결합니다. 호버 효과를 추가하면 클릭 가능성이 더 명확해져서 UX를 개선할 수 있습니다.
이 예에서는 "로고 왼쪽(60픽셀 x 60픽셀)" 사전 설정과 함께 60픽셀 x 60픽셀 로고 이미지를 사용합니다. 이미지 설정을 열고 목록에서 사전 설정을 선택합니다.
이제 새 사전 설정으로 저장하기 전에 몇 가지 호버 효과 스타일로 사전 설정을 조정할 수 있습니다.
다음을 업데이트합니다.
- 둥근 모서리: 50%
- 박스 섀도우: 스크린샷 참조
- 상자 그림자 수평 위치: 0px
- 상자 그림자 수직 위치: 0px(데스크톱) 5px(호버)
- 그림자 색상: #ac3cf7
그런 다음 호버에 다음 변환 회전을 추가합니다.
- 변환 Z축 회전(호버링): 90deg
그런 다음 현재 스타일에서 새 사전 설정을 만들고 이름을 "Logo Left w/ Hover (60px x 60px)"로 지정합니다.
결과는 다음과 같습니다.
이미지 모듈에 동적 사이트 로고 추가
사이트 로고를 이미지 모듈에 동적으로 추가하려면 먼저 Divi 테마 옵션에서 사이트 로고를 확인하고 업로드해야 합니다.
선택한 로고의 크기를 염두에 두십시오.
그런 다음 전역 사전 설정이 있는 이미지 모듈로 이동하여 설정을 엽니다. 현재 이미지를 삭제하고 동적 콘텐츠 아이콘을 클릭합니다. 드롭다운에서 사이트 로고를 선택합니다.
이제 이미지 모듈이 사이트 로고를 동적으로 가져옵니다.
로고에 동적 홈페이지 링크도 추가하는 것을 잊지 마십시오.
마지막 생각들
이 튜토리얼이 Divi 헤더에 로고를 추가하는 과정을 간소화하는 데 도움이 되기를 바랍니다. Divi 테마에 업로드하기 전에 로고 이미지의 크기를 최적화하는 것으로 시작됩니다. 그런 다음 Divi의 기본 제공 디자인 설정을 사용하여 다른 열 레이아웃 및 다른 장치에 대한 이미지의 크기와 위치를 조정할 수 있습니다.
물론 각 웹 사이트에는 고유한 스타일이 필요하며 그 중 일부는 이러한 예에 설정된 지침을 벗어나게 됩니다. 하지만 몇 가지 조정만 하면 모든 고유한 레이아웃에 대한 새 사전 설정을 쉽게 만들 수 있다고 확신합니다!
댓글로 여러분의 의견을 기다리겠습니다.
건배!