Divi의 테마 빌더 및 Anime.js를 사용하여 전역 헤더 안에 SVG 로고를 추가하고 애니메이션하는 방법

게시 됨: 2020-07-29

로고는 브랜드 아이덴티티의 중심 부분입니다. 그렇기 때문에 접하는 모든 웹 사이트 헤더에 거의 항상 포함됩니다. 헤더에 로고를 추가할 때 PNG 파일을 업로드하거나 SVG 통합을 대신 선택할 수 있습니다. 보다 맞춤화된 접근 방식을 위해 SVG 로고에 애니메이션을 적용할 수도 있습니다. 이것이 바로 이 게시물에서 보여드릴 내용입니다. 먼저 Divi 빌드 글로벌 헤더에 추가한 다음 Anime JS 라이브러리를 사용하여 애니메이션을 적용하는 방법을 보여드리겠습니다. 이 예제에서는 간단한 디자인을 사용하지만 일단 접근 방식을 익히면 모든 로고에 애니메이션을 적용할 수 있습니다!

시작하겠습니다.

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 간단히 살펴보겠습니다.

데스크탑

svg 로고

이동하는

svg 로고

글로벌 헤더 템플릿을 무료로 다운로드하십시오

글로벌 헤더 템플릿을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

1. Adobe Illustrator에서 SVG 로고 만들기 및 SVG 코드 가져오기

Illustrator 열기 및 새 문서 만들기

이 자습서의 첫 번째 부분에서는 Adobe Illustrator 내에서 간단한 로고를 만듭니다. 이미 자신만의 SVG 로고가 있는 경우 해당 로고를 자유롭게 사용하세요. 또는 위의 다운로드 폴더에서 로고 샘플 Illustrator 파일에 액세스할 수도 있습니다. 로고 샘플을 처음부터 만드는 것을 선호하는 경우 1:1 비율로 새 문서를 추가하여 시작하십시오.

너비: 500px
높이: 500px

svg 로고

기존 레이어에 원 추가

우리가 추가할 첫 번째 요소는 원입니다. Spice Shop Layout Pack의 색상 팔레트와 일치하는 채우기 색상을 사용합니다. 또한 원이 캔버스 내부의 중앙에 정렬되도록 합니다.

채우기: #0C1019
스트로크: 없음

svg 로고

새 레이어 생성 및 로고 텍스트 추가

다음으로 새 레이어를 추가합니다.

svg 로고

이 레이어를 사용하여 로고 텍스트를 추가합니다.

글꼴: 몬세라트
글꼴 두께: 검정
글꼴 크기: 110pt

svg 로고

로고 윤곽선 만들기

로고 텍스트 수정이 끝나면 요소를 마우스 오른쪽 버튼으로 클릭하고 "윤곽선 만들기"를 클릭하여 텍스트를 윤곽선으로 바꿀 수 있습니다.

svg 로고

텍스트 윤곽선 정렬

텍스트 윤곽선도 가운데 정렬되도록 합니다.

svg 로고

SVG로 내보내기

이제 모든 경로가 준비되었으므로 SVG를 내보낼 수 있습니다. 그렇게 하려면 상단의 "파일" 옵션을 가리키고 "내보내기"로 이동한 다음 "다른 이름으로 내보내기..."를 클릭합니다.

svg 로고

SVG 코드 받기

"내보내기" 버튼을 클릭하면 몇 가지 추가 SVG 옵션이 있는 창이 나타납니다. 거기에서 SVG 코드를 복사할 수 있습니다. 이 튜토리얼의 뒷부분에서 사용할 수 있도록 SVG를 가까이에 두십시오.

svg 로고

2. Divi 테마 빌더 내에서 전역/사용자 정의 헤더 생성 시작

Divi 테마 빌더로 이동하여 글로벌 헤더 만들기 시작

이 튜토리얼의 첫 번째 부분을 살펴보고 로고의 SVG 코드를 얻었으니 이제 Divi로 전환할 차례입니다! WordPress 백엔드 내부의 테마 빌더로 이동하여 새 전역 헤더를 생성합니다.

svg 로고

섹션 설정

배경색

전체 헤더 템플릿을 입력하면 섹션이 표시됩니다. 해당 섹션을 열고 배경색을 적용합니다.

배경색: #eaeaea

svg 로고

간격

디자인 탭으로 이동하여 다음으로 모든 기본 상단 및 하단 패딩을 제거합니다.

상단 패딩: 0px
하단 패딩: 0px

svg 로고

새 행 추가

열 구조

다음 열 구조를 사용하여 새 행을 계속 추가합니다.

svg 로고

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 디자인 탭으로 이동하여 다음과 같이 사이징 설정을 수정합니다.

사용자 지정 거터 너비 사용: 예
거터 폭: 1
열 높이 균등화: 예
폭: 95%
최대 너비: 100%

svg 로고

간격

모든 기본 상단 및 하단 패딩도 제거하십시오.

상단 패딩: 0px
하단 패딩: 0px

svg 로고

주요 요소

작은 화면 크기에서 열이 서로 옆에 유지되도록 하기 위해 행의 기본 요소에도 한 줄의 CSS 코드를 추가합니다.

display: flex;

svg 로고

1열 주요 요소

다음으로, CSS 코드 한 줄을 각 열에 개별적으로 추가하여 열 구조(1/4 및 3/4)가 더 작은 화면 크기에서 유지되도록 합니다. 첫 번째 것부터 시작하십시오.

width: 25% !important;

svg 로고

2열 주요 요소

두 번째 열에 대해서도 동일한 작업을 수행하되 다른 너비 백분율을 사용합니다.

width: 75% !important;

svg 로고

3. SVG 로고 추가(내부 코드 모듈)

열 1에 코드 모듈 추가

첫 번째 코드 모듈부터 시작하여 모듈을 추가할 시간입니다. 이 코드 모듈을 열 1에 배치하고 SVG 코드를 추가하는 데 사용합니다.

svg 로고

복사된 SVG 코드 추가

구조화

코드 모듈 내부에 SVG 코드(이 튜토리얼의 1부 참조)를 붙여넣으면 아래 인쇄 화면과 같이 모든 것을 구성하는 데 도움이 됩니다. 그렇게 하면 SVG 내부의 다양한 요소에 대한 깔끔한 개요를 볼 수 있습니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 465 465">
  
<defs>
  
<style>
.cls-1{
fill:#0c1019;  
}

.cls-2{
fill:#fff;
}
</style>
  
</defs>
  
<g id="Layer_1" data-name="Layer 1">
  
<circle class="cls-1" cx="232.5" cy="232.5" r="232.5"/>
  
</g>

<g id="Layer_2" data-name="Layer 2">
  
<path class="cls-2" d="M88,284.1a49.87,49.87,0,0,1-14.9-5.78l8.36-18.92a52.84,52.84,0,0,0,12.32,5.12,48.23,48.23,0,0,0,13.09,1.92c3.59,0,6.16-.34,7.7-1a3.36,3.36,0,0,0,2.31-3.14q0-2.42-3-3.63a66.69,66.69,0,0,0-9.95-2.64A111.94,111.94,0,0,1,89,252a25.32,25.32,0,0,1-10.34-7q-4.41-4.89-4.4-13.25a22.79,22.79,0,0,1,4.07-13.21q4.07-5.94,12.15-9.35t19.64-3.4a71.06,71.06,0,0,1,15.56,1.7,48.59,48.59,0,0,1,13.48,5l-7.81,18.8q-11.34-5.72-21.45-5.72t-10,4.84q0,2.31,3,3.47a62.92,62.92,0,0,0,9.79,2.47,101.06,101.06,0,0,1,14.85,3.8,25.9,25.9,0,0,1,10.5,7q4.46,4.84,4.46,13.2a22.59,22.59,0,0,1-4.07,13.15q-4.08,5.88-12.16,9.35t-19.63,3.46A80.82,80.82,0,0,1,88,284.1Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M204.13,227a27.32,27.32,0,0,1,10.56,11,36.64,36.64,0,0,1,0,32.94,27.42,27.42,0,0,1-10.56,10.89,28.9,28.9,0,0,1-14.57,3.79q-10,0-15.29-5.16v25.41H149.41V224.31h23.65v4.95q5.38-6,16.5-6A28.91,28.91,0,0,1,204.13,227Zm-13.47,36.14q2.75-3.09,2.75-8.69c0-3.75-.92-6.66-2.75-8.75a9.46,9.46,0,0,0-14.08,0c-1.84,2.09-2.75,5-2.75,8.75s.91,6.63,2.75,8.69a9.59,9.59,0,0,0,14.08,0Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M228,215.9a12.05,12.05,0,0,1,0-18.15q4.13-3.57,10.84-3.58t10.88,3.41a11,11,0,0,1,4.08,8.8,12.12,12.12,0,0,1-4.08,9.41q-4.07,3.69-10.88,3.69T228,215.9Zm-1.59,8.41h24.85v60.17H226.41Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M276.29,281.63a30.66,30.66,0,0,1-12.65-11.12,30.79,30.79,0,0,1,0-32.28,30.74,30.74,0,0,1,12.65-11.06,41.08,41.08,0,0,1,18.31-4q11,0,18.81,4.73A24.57,24.57,0,0,1,324.19,241l-19.25,9.46q-3.51-7.92-10.45-7.92a9.65,9.65,0,0,0-7.31,3.08c-1.95,2.06-2.92,4.95-2.92,8.69s1,6.75,2.92,8.81a9.65,9.65,0,0,0,7.31,3.08q6.93,0,10.45-7.93l19.25,9.46a24.49,24.49,0,0,1-10.78,13.09q-7.8,4.74-18.81,4.73A41.21,41.21,0,0,1,276.29,281.63Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M393.05,260.17h-41.8a10.13,10.13,0,0,0,4.4,5.23,15,15,0,0,0,7.7,1.81,19.75,19.75,0,0,0,6.66-1,23.5,23.5,0,0,0,5.88-3.42l13,13.09q-8.79,9.69-26.29,9.68a43.19,43.19,0,0,1-19.14-4,30.43,30.43,0,0,1-12.76-11.17,31.09,31.09,0,0,1-.05-32.17,30.46,30.46,0,0,1,12.21-11.06,40.22,40.22,0,0,1,34.1-.33,28.65,28.65,0,0,1,12,10.67,30.85,30.85,0,0,1,4.45,16.83Q393.38,254.9,393.05,260.17Zm-38.94-17.93a10,10,0,0,0-3.3,5.95h19.36a10.06,10.06,0,0,0-3.3-5.89,9.51,9.51,0,0,0-6.38-2.15A9.72,9.72,0,0,0,354.11,242.24Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M402,281.57a13.75,13.75,0,0,1-4.13-10.29A13.36,13.36,0,0,1,402,261.11a15.8,15.8,0,0,1,20.79,0,13.35,13.35,0,0,1,4.12,10.17,13.74,13.74,0,0,1-4.12,10.29,15.48,15.48,0,0,1-20.79,0Z" transform="translate(-17.5 -17.5)"/>
  
</g>
  
</svg>

svg 로고

CSS 코드의 요소에 획 및 획 너비 추가

Illustrator에서는 추가한 요소에만 채우기 색상을 사용했습니다. 그 이유는 우리가 추가 경로를 생성하지 않기를 원하기 때문입니다. SVG 코드는 생각만큼 항상 예측할 수 있는 것은 아니므로 CSS 코드를 수동으로 변경하면 경로를 단순하게 유지하는 데 도움이 되는 경우가 많습니다. 이 게시물의 미리보기에서와 동일한 결과를 생성하려면 두 요소에 획을 추가해야 합니다. 그렇게 하기 위해 우리는 우리 코드 안의 두 클래스에 CSS 코드 라인을 추가할 것입니다. AI에서 생성된 "cls-1" CSS 클래스는 원을 나타내고 "cls-2" CSS 클래스는 텍스트 외곽선을 나타냅니다.

stroke: #0c1019;
stroke-width: 3px;

svg 로고

원 반경 감소

원에 추가 획을 추가했기 때문에 원이 SVG 캔버스(측면에서 눈에 띌 수 있음)보다 더 멀리 도달하는 것처럼 보입니다. 이 문제를 해결하기 위해 circle 태그 내부의 반경을 줄이기만 하면 됩니다. 원래 "232.5"를 사용하는 대신 "225"로 낮추었습니다. 이 숫자를 부드럽게 사용하여 선호하는 값을 스스로 결정할 수 있습니다.

r = "225"

svg 로고

코드 모듈 설정 수정

사이징

이제 SVG 코드가 준비되었으므로 코드 모듈 자체를 추가로 변경할 수 있습니다. 디자인 탭으로 이동하여 다양한 화면 크기에서 모듈의 너비를 수정합니다.

너비:
- 데스크탑: 25%
- 태블릿: 50%
- 전화: 80%

svg 로고

간격

간격 설정을 수정하여 하단 겹침도 생성합니다.

탑 패딩: 5%
하단 패딩:
- 데스크탑: -12%
- 태블릿: -20%
- 전화: -35%

svg 로고

4. Anime.js를 사용하여 SVG 로고에 애니메이션 효과 주기

이전 모듈 아래에 다른 코드 모듈 추가

SVG 로고가 Divi 헤더에 추가되었습니다! 이 자습서의 다음 부분에서는 Anime JS 라이브러리를 사용하여 SVG 로고에 애니메이션을 적용합니다. 미리보기에서 볼 수 있는 그리기 애니메이션은 가장 인기 있는 애니메이션 중 하나이지만 이 라이브러리를 사용하여 모든 종류의 애니메이션을 만들 수 있습니다. 이전 모듈 바로 아래에 새 코드 모듈을 추가합니다.

svg 로고

애니메이션 라이브러리 추가

가장 먼저 해야 할 일은 스크립트 태그 안에 라이브러리를 추가하는 것입니다.

src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"

svg 로고

애니메이션 타임라인 애니메이션 코드 추가

바로 아래에 아래의 인쇄 화면과 같이 스크립트 태그 사이에 애니메이션 JS 코드를 추가해야 합니다.

jQuery(function($){
$(document).ready(function(){  
  
anime.timeline({loop: false})

.add({
duration: 2000,
})
.add({
targets: ['path.cls-2', 'circle.cls-1'],
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
})
.add({
targets: 'path.cls-2',
duration: 10,
fill: ['rgba(0,0,0,0)', '#fff'],
}) 
.add({
targets: 'circle.cls-1',
duration: 2000,
fill: ['rgba(0,0,0,0)', '#0c1019'],
});

});  
});

각 "추가" 기능은 애니메이션 타임라인의 애니메이션을 나타냅니다. 이 "추가" 기능을 원하는 대로 수정하거나 새 기능을 추가하거나 현재 기능을 제거할 수 있습니다. 마지막 추가 기능이 ';' 끝에 (위의 코드에서 볼 수 있듯이). 이러한 "추가" 기능 내에서 다른 CSS 속성을 추가할 수 있습니다. 애니메이션.js 문서 예제에서 속성과 사용 방법에 대해 자세히 알아볼 수 있습니다.

svg 로고

5. 2열에 메뉴 모듈 추가

전역 헤더를 완성하는 데 필요한 유일한 요소는 2열의 메뉴 모듈입니다.

svg 로고

메뉴 선택

원하는 메뉴를 선택하세요.

svg 로고

배경색 제거

그런 다음 기본 배경색을 제거합니다.

svg 로고

메뉴 텍스트 설정

디자인 탭으로 이동하여 메뉴 텍스트 설정을 다음과 같이 수정합니다.

메뉴 텍스트 색상: #000000
메뉴 텍스트 크기:
- 데스크탑: 0.7vw
- 태블릿: 2.2vw
- 전화: 3vw
텍스트 정렬: 오른쪽

svg 로고

드롭다운 메뉴 텍스트 설정

드롭다운 메뉴 선 색상도 변경합니다.

드롭다운 메뉴 선 색상: #ffffff

svg 로고

아이콘 설정

햄버거 메뉴 아이콘 색상과 함께.

햄버거 메뉴 아이콘 색상: #0c1019

svg 로고

사이징

그런 다음 크기 설정으로 이동하여 너비가 "100%"인지 확인합니다.

폭: 100%

svg 로고

위치

고급 탭에서 모듈의 위치를 변경하여 모듈 설정을 완료합니다.

위치: 절대
위치: 중앙 오른쪽

svg 로고

6. 모든 테마 빌더 변경 사항 저장

전체 글로벌 헤더 디자인을 완료하면 모든 테마 빌더 변경 사항을 저장하고 웹사이트에서 결과를 볼 수 있습니다!

svg 로고

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

데스크탑

svg 로고

이동하는

svg 로고

마지막 생각들

이 게시물에서는 웹 개발 여정에서 Divi 전역 헤더를 한 단계 더 발전시키는 방법을 보여주었습니다. 보다 구체적으로, 우리는 Divi 및 Anime JavaScript 라이브러리를 사용하여 SVG 로고를 추가하고 애니메이션하는 방법을 보여주었습니다. 글로벌 헤더 템플릿 JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.

Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.