다음 Divi 웹사이트를 위한 글로벌 프리셋 스타일 가이드 설정하기 (무료 프레임워크 다운로드!)

안녕하세요 디비네이션입니다! 매주 새로운 사은품을 증정하는 주간 Divi 디자인 이니셔티브의 다음 편에 참여해 주셔서 감사합니다. 오늘 우리는 구축하려는 모든 웹사이트에 사용할 수 있는 무료 글로벌 사전 설정 스타일 가이드 프레임워크를 공유하고 있습니다. Divi의 글로벌 사전 설정을 사용하면 웹 디자인 프로세스의 속도를 빠르게 높일 수 있으므로 살펴보겠습니다!

글로벌 사전 설정 스타일 가이드 프레임워크 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

다음 Divi 웹사이트를 위한 글로벌 프리셋 스타일 가이드 설정하기

글로벌 사전 설정 스타일 가이드란 무엇입니까?

글로벌 사전 설정 스타일 가이드는 Divi 웹사이트 내에서 사용하기 위해 스타일링할 가장 중요한 요소에 대한 개요입니다. 다음 세 부분으로 구성됩니다.

1. 컬러 팔레트

2. 텍스트 스타일

3. 모듈 스타일

글로벌 사전 설정은 열, 행 및 섹션에도 글로벌 사전 설정을 포함할 수 있는 모듈 이상에 도달하지만 위에서 언급한 세 부분인 웹사이트에서 가장 균일한 요소에 중점을 두고 있습니다. 아이디어는 한 곳에서 모든 요소의 스타일을 지정하고 적용한 디자인 스타일에 만족하는 즉시 다양한 텍스트 스타일과 모듈 스타일을 전역 사전 설정으로 전환할 수 있다는 것입니다.

색상 팔레트는 Divi 테마 옵션에 추가할 수 있는 항목이지만 더 자세한 내용은 게시물 아래에 있습니다. 페이지와 템플릿을 디자인하는 동안 스타일 가이드를 별도의 창에 보관할 수 있습니다. 이렇게 하면 설정을 하나씩 수동으로 적용해야 하는 것과 달리 이동하면서 그라디언트 배경 설정을 복사하고 붙여넣는 데 도움이 됩니다.

글로벌 사전 설정 스타일 가이드 생성/사용 시기

바람직하게는 페이지, 템플릿 등을 만들기 전에 전역 사전 설정 스타일 가이드를 만들고 사용하기 시작합니다. 그 이유는 디자인을 구축하는 동안 전역 사전 설정에 즉시 액세스할 수 있기 때문입니다. 디자인으로 돌아가 요소 수준에서 인라인 스타일을 재설정하고 전역 사전 설정을 적용합니다.

스타일 가이드를 만든 후 Divi 빌드 프로세스를 시작하면 개별 설정 내에서 수동으로 모듈을 변경할 필요가 없습니다. 처음부터 전역 사전 설정으로 작업하는 경우 한 곳에서 수정하고 변경 사항이 전체 웹 사이트에서 한 번에 전개되는 것을 볼 수 있습니다.

이 게시물에서 공유하는 무료 글로벌 사전 설정 프레임워크 스타일 가이드는 디자인 영감 단계로 바로 들어가는 데 도움이 될 것입니다. 스타일 가이드를 직접 작성하는 대신 조화와 균형이 있는 디자인 스타일을 만드는 데 집중할 수 있습니다. 스타일 가이드 내에서 UI 요소의 스타일 지정을 마치면 이를 전역 사전 설정으로 전환하고 페이지와 템플릿을 구축할 때 사용할 수 있습니다.

전역 사전 설정 스타일 가이드를 사용하는 방법

프레임워크 레이아웃을 Divi 라이브러리에 다운로드 및 업로드

이 게시물에서 무료 글로벌 사전 설정 스타일 가이드 프레임워크 레이아웃을 다운로드하여 시작하세요. 그런 다음 다운로드 폴더의 압축을 풀면 웹 사이트 백엔드 내부의 Divi 라이브러리로 이동하여 상단의 "가져오기/내보내기"를 클릭합니다. 그런 다음 "가져오기" 탭으로 전환하고 다운로드 폴더에서 찾을 수 있는 스타일 가이드 프레임워크 레이아웃을 업로드합니다.

레이아웃을 위한 새 초안 페이지 만들기 및 프레임워크 레이아웃 업로드

레이아웃이 업로드되면 라이브러리 내부에서 열거나 별도의 페이지 초안을 만들 수 있습니다. 페이지 경험을 계속하기 위해 두 번째 옵션을 선택합니다. 새 페이지를 추가하고 "저장된 레이아웃"에서 레이아웃을 찾습니다.

색상 팔레트 설정

스타일 가이드 프레임워크에 들어가면 원하는 색상 팔레트를 설정할 수 있습니다. 추가하는 색상의 수는 전적으로 귀하에게 달려 있습니다. 스타일 가이드 내에서 색상을 시각적으로 표시하기 위해 텍스트 모듈의 배경 설정을 사용하고 있습니다. 해당 텍스트 모듈을 열고 배경 설정으로 이동하여 배경색을 수정합니다. 사용 중인 16진수 코드를 복사하여 그 아래의 텍스트 모듈에 배치하면 전역 사전 설정 스타일 가이드에도 항상 각 16진수 색상 코드의 작성된 버전이 있습니다.

Divi 테마 빌더 내부의 색상 코드로 사용자 정의 색상 팔레트 만들기

Divi 테마 옵션으로 이동

스타일 가이드의 16진수 코드를 사용하여 Divi 내부에서 구축하는 동안 빠르게 액세스할 수 있는 사용자 지정 색상 팔레트를 만들 수 있습니다. 스타일 가이드 프레임워크 내에서 텍스트와 모듈의 스타일을 지정하기 전에 이 작업을 수행하는 것이 좋습니다. 색상 팔레트를 추가하려면 Divi 테마 옵션으로 이동하십시오.

스타일 가이드의 16진수 코드를 사용하여 색상 팔레트 사용자 정의

스타일 가이드에서 찾을 수 있는 원하는 16진수 색상 코드를 기본 색상 팔레트에 추가합니다.

텍스트 스타일 추가

다음으로 스타일 가이드 프레임워크 내에서 다양한 텍스트 유형의 스타일을 지정할 수 있습니다. 각 텍스트 유형에 대해 제공하는 대안의 수는 전적으로 귀하에게 달려 있습니다. "1차", "2차" 및 "3차" 옵션이 있다고 해서 각 텍스트 유형에 대해 3가지 변형이 있어야 한다는 의미는 아닙니다. 더 많은 가능성을 제거하거나 추가하십시오.

스타일 모듈

스타일 가이드 프레임워크의 마지막 부분에서는 가장 많이 사용되는 모든 Divi 모듈을 나열했습니다. 여기에서 염두에 두고 있는 스타일에 따라 모듈 수정을 시작할 수 있습니다. 모든 모듈이 서로 닿을 수 있는 거리에 있다는 사실은 디자인 스타일과 균형에 대한 더 나은 개요를 얻는 데 도움이 될 것입니다. 각 인기 모듈에 대해 "1차", "2차" 및 "3차" 옵션도 제공했습니다. 그러나 다시 한 번, 페이지 및 템플릿 빌드 프로세스 전체에서 사용하는 각 모듈의 변형 수를 스스로 결정하십시오.

모듈을 전역 사전 설정으로 전환(하나씩 및 선택한 이름 사용)

모든 텍스트 스타일과 모듈 스타일이 완료되면 반응적인 측면도 잊지 마십시오. 이제 모듈을 전역 사전 설정으로 전환해야 합니다. 그렇게 하려면 개별 수준에서 스타일이 지정된 각 모듈을 열고 모달 상단의 현재 스타일에서 새 사전 설정을 만들 수 있습니다. 기본 모듈도 기본 모듈로 만들도록 선택할 수 있습니다. 전역 사전 설정을 만든 후에는 모듈에 대해 특정 사전 설정이 선택되어 있는지 확인하십시오. 이렇게 하면 스타일 가이드 레이아웃을 사용하여 전역 사전 설정을 가져오고 내보내는 데 도움이 됩니다.

또한 모듈의 이름을 지정하는 간소화된 방법을 찾으면 혼란스러운 경우 스타일 가이드를 쉽게 참조할 수 있습니다. Blurb 모듈 스타일의 세 가지 변형 이름을 지정하는 좋은 방법은 다음과 같습니다.

• 기본 버튼
• 보조 버튼
• 3차 버튼

그리고 전역 사전 설정으로 전환하는 각 텍스트 스타일 또는 모듈에 대해 이 접근 방식을 반복할 수 있습니다.

중첩 모듈: 중첩 요소를 전역 사전 설정으로 전환

소셜 미디어 팔로우 모듈과 같은 중첩 모듈의 경우 모듈 내부의 항목을 열고 해당 요소도 새 사전 설정으로 저장해야 합니다.

다른 웹사이트에서 스타일 가이드 레이아웃 내보내기 및 가져오기(사전 설정 포함)

모든 모듈을 전역 사전 설정으로 바꾸고 모듈 설정 내에서 해당 사전 설정을 선택하면 모든 사전 설정이 포함된 레이아웃을 내보낼 수 있습니다. 그런 다음 레이아웃을 다른 웹사이트에 업로드하는 즉시 레이아웃과 함께 사전 설정을 가져올 수 있어 시간을 절약할 수 있습니다. 사전 설정을 포함하여 완성된 스타일 가이드 레이아웃을 Divi 라이브러리에 저장합니다. 그런 다음 파일을 내보냅니다.

새 스타일 가이드를 업로드하려는 웹사이트로 이동하여 Divi 라이브러리로 이동한 다음 사전 설정이 포함된 JSON 파일을 업로드하여 Divi 빌드 프로세스를 시작하세요!

팁: 스타일 가이드를 별도의 탭에 보관하여 특정 스타일(그라데이션/상자 그림자/테두리/…)을 복사/붙여넣기

마지막으로 스타일 가이드를 항상 별도의 탭에 보관하는 것이 좋습니다. Divi의 내장 및 교차 페이지 복사-붙여넣기 옵션을 사용하면 그라디언트 배경과 같은 스타일을 한 요소에서 다른 요소로 빠르게 전송할 수 있습니다!

매주 새로운 글로벌 사전 설정 스타일 가이드!

이 글로벌 사전 설정 스타일 가이드 프레임워크를 즐기시기 바랍니다. 이 프레임워크는 구축하는 모든 종류의 웹사이트에 사용할 수 있습니다. 아래 의견 섹션에서 귀하의 의견을 기다리겠습니다. 다음 주에 더 많은 무료 혜택을 확인하세요!