Divi 5의 아이콘 목록 모듈에 대해 알아야 할 모든 것

최신 Divi 5 업데이트 중 하나가 소개 된 회전 목마 및 로티 애니메이션과 모든 사이트에서 사용할 수있는 것 : 새로운 아이콘 목록 모듈. 일반 총알 포인트 대신 명확성과 시각적 매력을 더하는 의미있는 아이콘으로 스타일링 목록을 만들 수 있습니다.

제품 페이지의 기능, 프로세스 단계, 가격 책정 테이블의 서비스 또는 방문 페이지의 혜택을 생각해보십시오. 아이콘 목록 모듈을 사용하면 모든 디자인을보다 쉽게 ​​설계하고 방문자에게 매력적으로 만듭니다.

이 게시물에서는 기능에서 실제 사용 사례에 이르기까지 아이콘 목록 모듈에 대해 알아야 할 모든 것을 다루므로 목록을 업그레이드하고 Divi 사이트를 개선 할 수 있습니다.

아이콘 목록 모듈은 무엇입니까?

Divi 5의 아이콘 목록 모듈은 사이트 설계를 향상시키는 매력적이고 구조화 된 목록을 만들도록 설계되었습니다. 각 목록 항목을 고유 한 아이콘과 페어링 할 수있게 함으로써이 모듈은 일반 텍스트를 전문적이고 매력적인 컨텐츠로 변환합니다.

Divi 5 이전에 Divi 필수 텍스트 또는 Blurb 모듈에서 양식화 된 목록을 작성하여 덜 효율적이었습니다. 아이콘 목록 모듈은 이러한 격차를 메우고 사용자 친화적이고 고도로 사용자 정의 할 수있는 전용 솔루션을 제공합니다.

주요 기능

아이콘 목록 모듈에는 Divi 5에 큰 도움이되는 기능이 있습니다. 주요 기능은 다음과 같습니다.

쉬운 목록 생성

Divi의 광범위한 아이콘 라이브러리에서 항목을 추가하고 아이콘을 할당하여 목록을 신속하게 만듭니다. 모듈의 직관적 인 인터페이스를 사용하면 몇 분 안에 세련된 목록을 작성하여 수동 서식에 비해 시간을 절약 할 수 있습니다.

광범위한 사용자 정의 옵션

수백 개의 내장 아이콘 중에서 선택하고 크기, 색상 및 배치를 조정하여 사이트 디자인과 일치하는 응집력있는 모양을 만듭니다.

Divi의 강력한 디자인 설정을 활용하여 글꼴, 텍스트 색상, 간격, 정렬 및 배경을 사용자 정의하십시오. 호버 효과 또는 애니메이션을 추가하여 목록을보다 대화식으로 만들 수 있습니다.

아이콘 목록 모듈을 사용하는 방법

Divi 5의 아이콘 목록 모듈을 시작하는 것은 쉽습니다. 새 페이지를 만들거나 기존 페이지를 열십시오. 새 모듈을 추가하려면 클릭하고 아이콘 목록을 선택하십시오.

모듈을 추가하면 컨텐츠 탭에 3 개의 아이콘 목록 항목이 표시됩니다. 첫 번째를 클릭하여 편집하여 시작하겠습니다.

내용 탭에 텍스트 필드 에 제목을 입력하십시오.

다음으로 아이콘 드롭 다운 탭을 확장하십시오. 여기에서 Divi 라이브러리의 수백 개의 아이콘 중에서 선택할 수 있습니다. 아이콘이나 스크롤을 검색하여 사용하려는 아이콘을 찾을 수 있습니다.

아이콘 목록 모듈을 사용하면 개별 목록 항목에 링크를 추가하여 다른 페이지, 첨부 파일 등을 쉽게 연결할 수 있습니다.

디자인 탭은 아이콘 목록 항목을 스타일링 할 수있는 곳입니다. 아이콘 드롭 다운 메뉴에서 아이콘 색상과 크기를 할당하십시오.

배경 탭에서 아이콘을 배경색으로 할당하고 테두리 또는 상자 그림자를 추가하고 간격을 조정할 수 있습니다.

다른 옵션으로는 텍스트의 정렬을 제어하거나 텍스트 그림자를 추가하는 텍스트가 포함됩니다. 그러나 텍스트를 스타일링하려면 바디 텍스트 드롭 다운 메뉴를 선택하십시오. 글꼴, 무게, 스타일, 텍스트 정렬, 색상, 크기 등을 할당 할 수 있습니다.

다른 모든 Divi 모듈과 마찬가지로 사이징, 간격, 테두리 및 박스 그림자를 제어하고 필터, 전환 또는 애니메이션을 추가 할 수 있습니다.

첫 번째 아이콘 목록 항목을 스타일로 만들면 쉽게 복사하고 아이콘을 변경 한 다음 텍스트를 업데이트 할 수 있습니다.

아이콘 목록 항목 사이에 공간 추가

이전 섹션에서는 아이콘 목록 항목을 추가하는 방법을 보여주었습니다. 이 섹션에서는 Divi 5의 Flexbox 레이아웃 시스템을 사용하여 레이아웃 속성을 조정하는 방법을 검토합니다. 보시다시피, 우리는 각 아이콘 목록 항목 사이에 작은 공간을 사용할 수 있습니다.

기본 아이콘 목록 모듈 설정에서 디자인 탭을 클릭하십시오. 레이아웃 드롭 다운 메뉴를 찾아 설정을 공개하도록 확장하십시오.

기본적으로 Flex는 레이아웃 스타일로 선택됩니다. 이를 통해 Divi 5의 Flexbox 설정을 사용하여 간격, 레이아웃 방향 및 정렬을 제어 할 수 있습니다. 각 아이콘 목록 항목 사이에 간격을 추가하려면 수직 간격을 조정하십시오. 이것은 각 항목 사이에 호흡 공간을 추가하여 목록에 더 시각적 인 매력을 부여합니다.

모든 아이콘 목록 항목에 대한 범용 설계 설정

아이콘 목록 항목을 개별적으로 스타일링하는 것 외에도 기본 모듈의 디자인 설정을 사용하여 모든 아이콘 목록 항목에 스타일을 한 번에 추가 할 수 있습니다. 예를 들어, 모든 아이콘이 동일한 색상, 텍스트 또는 배경 스타일을 갖기를 원한다면 모듈 수준에서 수행 할 수 있습니다.

Divi 5의 아이콘 목록 모듈은 개별적으로 또는 전체적으로 목록을 스타일로 만들려면보다 사용자 친화적 인 방식으로 정보를 보여줄 수있는 좋은 방법을 제공합니다.

아이콘 목록 모듈을 사용한 실제 예

아이콘 목록 모듈은 다재다능하며 웹 사이트의 다른 영역을 향상시킬 수 있습니다. 다음은 디자인에 영감을주는 몇 가지 실제 예입니다.

여행 블로그

아이콘 목록 모듈은 여행 블로그에서 매력적인 콘텐츠를 만들 수있는 좋은 방법을 제공합니다. 이를 사용하여 블로그, 여행 일정, 포장 팁 또는 대상 하이라이트의 범주를 강조 표시 할 수 있습니다. 또한 호버 효과를 결합하고 각 목록 항목에 대해 다른 아이콘을 사용하여 명확하고 세련된 방식으로 정보를 제공 할 수 있습니다.

비즈니스 사이트의 기능

아이콘 목록 모듈을 사용하여 비즈니스 서비스를 보여줍니다. 관련 아이콘을 지정하고 브랜드와 일치하도록 색상을 사용자 정의하십시오. 쉬운 탐색을 위해 서비스 페이지에 링크를 추가 할 수도 있습니다.

단계별 프로세스 가이드

"가입 방법"과 같은 프로세스 단계를 요약하는 목록을 만듭니다. 체크 마크를 사용하여 각 단계를 통해 사용자를 시각적으로 안내하여 복잡한 정보를보다 소화 할 수 있습니다.

전자 상거래 상점 페이지

전자 상거래 사이트의 경우 아이콘 목록 모듈을 사용하여 상점의 기능을 강조 표시하십시오. Divi 5의 WOO 모듈과 쌍을 이루어 응집력있는 제품 카테고리 페이지를 만듭니다.

파일을 다운로드하십시오

무료로 다운로드하십시오

Divi Newsletter에 가입하면 Ultimate Divi Landing Page Layout Pack의 사본과 다른 놀라운 무료 Divi Resources, Tips 및 Tricks를 이메일로 보내 드리겠습니다. 따라 오면 당신은 곧 Divi Master가 될 것입니다. 이미 구독 한 경우 아래의 이메일 주소를 아래에 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

당신은 성공적으로 구독했습니다. 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하려면 이메일 주소를 확인하십시오!

Divi 5에서 아이콘 목록 모듈을 사용하십시오

Divi 5의 아이콘 목록 모듈은 거의 노력하지 않고 세련되고 기능적인 목록을 만들 수있는 좋은 방법을 제공합니다. 사용 편의성, 강력한 사용자 정의 옵션 및 Divi 5의 새로운 기능과의 원활한 통합으로 Divi 사용자에게는 필수품이됩니다. 서비스를 강조하거나 프로세스를 통해 사용자 안내 또는 제품 기능을 보여 주든이 모듈을 사용하면 잠재 고객을 참여시키는 전문 결과를 제공 할 수 있습니다.

시도해 볼 준비가 되셨습니까? 오늘 최신 Divi 5 Public Alpha를 다운로드하고 아이콘 목록 모듈을 직접 탐색하십시오. 새로운 기능을 출시 할 때 더 많은 Divi 5 업데이트를 계속 지켜봐주십시오.