원형 카운터로 움직이는 아이콘으로 Divi의 고유한 기능 섹션 디자인

대부분의 웹사이트에는 제품이나 서비스의 기능을 표시하기 위해 잘 설계된 기능 섹션이 필요합니다. 그래서 이 튜토리얼에서는 Divi에서 고유한 기능 섹션을 만드는 방법을 보여 드리겠습니다. 이를 위해 Divi의 Circle Counter 모듈을 사용하여 광고 아이콘에 애니메이션을 추가할 수 있습니다. 그리고 몇 가지 사용자 정의 간격을 사용하여 구분선 배경과 잘 일치하도록 광고 문구를 쉽게 배치하는 방법을 보여 드리겠습니다. 최종 디자인은 깨끗하고 독특합니다. 그리고 몇 가지 사소한 터치로 다음 프로젝트에 큰 도움이 될 수 있습니다.

시작하자!

엿보기

다음은 애니메이션 요소를 설명하는 데 도움이 되는 디자인과 gif를 살짝 엿볼 수 있습니다.

새 페이지 만들기 및 Visual Builder 배포

시작하려면 WordPress 대시보드로 이동하여 페이지 > 새로 추가로 이동합니다. 그런 다음 페이지 제목을 지정하고 클릭하여 Divi Builder를 사용합니다. 그런 다음 을 클릭하여 Visual Builder를 사용합니다. 세 가지 옵션이 표시됩니다. "처음부터 빌드" 옵션을 선택합니다.

당신의 빈 캔버스가 기다리고 있습니다!

기능 섹션 헤더 생성

기능 섹션의 상단 헤더는 매우 간단합니다. 독특한 요소는 디자인에 약간의 깊이를 주기 위해 아래에 표시되는 미묘한 상자 그림자입니다.

그것을 만들려면 일반 섹션에 1열 행을 삽입하십시오.

그런 다음 행에 텍스트 모듈을 추가하고 다음과 같이 설정을 업데이트합니다.

콘텐츠:

<h1>Our Features</h2>
Everything you need.

텍스트 글꼴: 몬세라트
텍스트 글꼴 두께: 반 굵게
텍스트 텍스트 크기: 22px
텍스트 방향: 중앙
제목 글꼴 두께: 매우 굵게
제목 텍스트 크기: 6vw(데스크톱), 50px(태블릿), 30px(스마트폰)

이제 설정을 저장하고 섹션 설정으로 이동하여 다음과 같이 상자 그림자를 추가합니다.

박스 섀도우: 스크린샷 참조
상자 그림자 수직 위치: 19px
상자 그림자 흐림 강도: 80px
상자 그림자 확산 강도: -16px
그림자 색상: rgba(136,150,171,0.13)

설정을 저장합니다.

아주 간단한 것들. 이제 재미있는 부분으로 가자.

주요 기능 섹션 및 배경 디자인 만들기

기능을 유지하려면 새 섹션을 추가해야 합니다. 일반적으로 이전 섹션에 새 행을 추가할 수 있지만 이 경우 Section 요소에서 사용할 수 있는 Divider 배경을 추가해야 합니다.

방금 완료한 섹션 바로 아래에 새 섹션을 추가하세요. 그런 다음 행에 4열 레이아웃을 추가합니다.

이 열에 광고 문구를 추가하지만 지금은 섹션 설정을 업데이트하겠습니다.

이 섹션에서는 사용자 지정 최대 너비를 지정해야 합니다. 이것은 더 큰 브라우저 크기에서 디자인을 제자리에 유지하는 데 중요합니다. 또한 우리 광고의 배열과 일치하는 배경 역할을 하기 위해 Divider 섹션을 추가해야 합니다(자세한 내용은 나중에 설명).

섹션 설정으로 이동하여 다음을 업데이트합니다.

너비: 1080px
단면 정렬: 중앙
디바이더: 상단
구분선 스타일: 스크린샷 참조
디바이더 색상: rgba(136,150,171,0.07)
디바이더 높이: 52%

설정을 저장합니다.

섹션에 1080px의 사용자 정의 너비(또는 최대 너비)를 제공하는 것은 기본적으로 섹션 내에서 행이 기본적으로 설정되는 방식입니다. 따라서 기본적으로 전체 섹션을 기본 행 크기로 만듭니다.

4열 행에 Blurbs 추가

이 시점에서 우리는 4개의 열 각각에 광고 문구를 추가하기 시작할 수 있습니다. 첫 번째 광고 문구를 추가하려면 첫 번째 열의 회색 아이콘을 클릭하세요. 더 적은 텍스트(2 문장)를 포함하도록 상자의 내용을 업데이트한 다음 이미지 대신 아이콘을 사용하도록 선택합니다(저는 이미지 아이콘을 선택했습니다).

디자인 탭에서 다음을 업데이트합니다.

아이콘 색상: #974450
원 아이콘: 예
원형 색상: rgba(255,255,255,0.5)
아이콘 글꼴 크기 사용: 예
아이콘 글꼴 크기: 48px
텍스트 방향: 중앙

설정을 저장합니다.

이제 블러 모듈을 복사하여 나머지 각 열에 붙여넣어 각 열에 하나의 블러를 만듭니다.

이 시점에서 원하는 경우 돌아가서 아이콘을 업데이트할 수 있지만 반드시 그럴 필요는 없습니다.

겹침 광고 아이콘에 원 카운터 추가

광고 아이콘에 애니메이션을 추가하기 위해 각 아이콘을 다른 숫자 값을 가진 원 카운터와 겹칠 것입니다. 이렇게 하면 각 아이콘과 함께 원형 애니메이션이 점진적으로 증가하여 진행 상황이 표시됩니다. 그러나 각 원 카운터에 원하는 숫자 값을 사용할 수 있습니다.

첫 번째 열의 광고 문구 모듈 아래에 있는 회색 "새 모듈 추가" 아이콘을 클릭한 다음 카운터 모듈을 추가합니다.

circle 모듈 설정 편집을 시작하기 전에 블러 모듈 위로 드래그하십시오. 이제 다음과 같이 콘텐츠 설정을 업데이트할 수 있습니다.

제목 상자의 텍스트 삭제
번호: 25

그런 다음 디자인 탭 설정을 다음과 같이 업데이트합니다.

막대 배경 색상: #974450(광고 아이콘과 동일한 색상)
숫자 텍스트 색상: rgba(0,0,0,0) (숫자를 숨기기 위해 완전히 투명합니다)
숫자 텍스트 크기: 0px(원 안의 원치 않는 텍스트 공간 제거)
너비: 109px(겹칠 아이콘의 크기에 따라 설정됨)
모듈 정렬: 중앙
Margin-bottom: -102px(아이콘과 완벽하게 겹침)

설정을 저장합니다.

이제 원 카운터 모듈을 복사하여 나머지 각 열에 붙여넣은 다음 각 광고 문구의 맨 위로 드래그하기만 하면 됩니다. 복제된 원 카운터가 배치된 후 두 번째 원 카운터 번호를 50으로, 세 번째 카운터 번호를 75로, 네 번째 카운터 번호를 100으로 업데이트합니다. 애니메이션이 완료된 후 결과는 다음과 같아야 합니다.

행 패딩을 사용하여 구분선과 일치하도록 아이콘 위치 지정

이 디자인의 마지막 단계는 아이콘을 구분선 배경의 호와 일치하도록 배치하는 것입니다. 이렇게 하려면 행에 사용자 지정 패딩을 추가해야 합니다. 행 설정을 열고 다음을 업데이트합니다.

이 행을 전체 너비로 만들기: 예
열 2 사용자 지정 패딩: 상단(데스크톱) 9%, 상단(태블릿) 0%
열 3 사용자 지정 패딩: 상단(데스크톱) 9%, 상단(태블릿) 0%

그게 다야!

최종 결과를 확인하세요.

이제 다양한 숫자 값을 사용하여 원 카운터에 의해 아이콘이 어떻게 움직이는지 확인하십시오. 그리고 아이콘은 구분선 배경과 일치합니다.

기능 섹션이 모바일에서 어떻게 보이는지

다음은 태블릿과 스마트폰 디스플레이에서 디자인이 어떻게 보이는지 살펴보겠습니다.

마지막 생각들

이 기능 섹션 디자인의 고유한 요소는 가볍고 미묘하여 약간의 조정으로 자신의 레이아웃에 쉽게 통합할 수 있습니다. 그리고 원 카운터 애니메이션이 마음에 들지 않는 경우 자유롭게 제외하고 광고 모듈의 원 아이콘을 사용하면 됩니다. 또는 통계를 제공하기 위해 크리에이티브 레이아웃에 표시되는 숫자 값이 있는 원 카운터만 사용하도록 선택할 수 있습니다. 무엇이든 이 글을 통해 스스로 탐색할 수 있는 몇 가지 아이디어를 얻을 수 있기를 바랍니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!