글로벌 Divi 헤더에 동적 사이트 제목 및 슬로건을 추가하는 방법

글로벌 Divi 헤더에 동적 사이트 제목 및 슬로건을 추가하는 방법

[vc_row content_placement = "middle"css = ". vc_custom_1508940533685 {background-color : # f8f6f6! important;}"el_id = "themeforestpro"] [vc_column width = "3/4"css = ". vc_custom_1502759058885 {margin-bottom : 0p ! Important; border-bottom-width : 0px! Important; padding-bottom : 0px! Important;} "] [vc_column_text]

Divi : 사용하기 가장 쉬운 WordPress 테마

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] 다운로드 [/vcex_button][/ vc_column][/vc_row]

Divi 글로벌 헤더에 동적 사이트 제목과 슬로건을 추가하는 방법을 아는 것은 Divi 웹 사이트를 만들 때 유용합니다. 그렇게해야하는 몇 가지 좋은 이유가 있습니다. 한편으로 모든 사이트에 로고가있는 것은 아닙니다. 사이트 제목은 좋은 로고 대체물입니다. 또 다른 이유는 모든 사람이 볼 수있는 중요한 정보를 사이트에 포함하여 브랜드를 높이는 것입니다.

이 튜토리얼에서는 Divi 글로벌 헤더에 동적 사이트 제목과 슬로건을 추가하는 방법을 보여줍니다. 이 솔루션은 WordPress 백엔드에서 사이트 제목과 태그 라인을 동적으로 추출합니다. 또한 제목과 슬로건을 원하는대로 사용자 정의 할 수있는 Divi의 모든 강력한 디자인 옵션이 제공됩니다!

가능한 결과

다음은이 튜토리얼에서 빌드 할 디자인의 미리보기입니다.

동적 사이트 제목 전체 헤더 템플릿 6

동적으로 표시되는 헤더의 상단 중앙에있는 사이트 제목과 태그 라인을 확인합니다.

Divi 제목 수정 예

무료 다운로드

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

템플릿을 가져 오려면 Divi> 테마 생성기로 이동합니다.

페이지 오른쪽 상단에있는 이동성 아이콘을 클릭합니다.

이동성 팝업 창에서 가져 오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져 오기 버튼을 클릭합니다.

divi 템플릿 선택

완료되면 전체 헤더 템플릿을 Divi Theme Builder에서 사용할 수 있습니다.

전역 divi 헤더 수정

다음은 디자인으로 넘어갑니다.

사이트의 제목과 워드 프레스의 슬로건

각 WordPress 사이트에는 사이트 제목과 태그 라인이 있습니다. 사이트 제목은 기본적으로 사이트의 이름이고 태그 라인은 일반적으로 그것이 무엇인지 설명하는 짧은 문구입니다.

WordPress를 설치할 때 사이트 제목을 추가하고 잊어 버리는 것은 드문 일이 아닙니다.

divi 제목 사용자 지정

그리고 어떤 사람들은 태그 라인이 존재한다는 사실조차 깨닫지 못하고 시간을내어 업데이트하기도합니다. 또한 Divi 테마를 사용하면 사이트 제목과 슬로건이 기본적으로 사이트에 표시되지 않으므로 무시하기 쉽습니다. 그러나 사이트 제목과 태그 라인은 웹 사이트의 필수 부분이며 검색 엔진에서 인식됩니다.

WordPress 대시 보드로 이동하고 설정> 일반으로 이동하여 언제든지 WordPress에서 사이트 제목과 태그 라인을 찾고 업데이트 할 수 있습니다.

또는 테마 맞춤 설정 도구를 사용하여 다른 설정을 사용하여 일반 설정에서 사이트 제목을 업데이트 할 수 있습니다.

워드 프레스 아이덴티티 사용자 지정

WordPress 백엔드에서 사이트 제목과 슬로건이 어디에 있는지 알았으므로 Divi 헤더에 사이트 제목을 추가하는 방법을 알아 보겠습니다!

Divi의 글로벌 헤더에 동적 사이트 제목 및 슬로건을 추가하는 방법

미리 디자인 된 글로벌 헤더 템플릿 가져 오기

이 자습서에서는 처음부터 전체 헤더를 만드는 대신 동적 사이트 제목과 태그 라인을 기존 헤더에 추가하는 방법에 중점을 둘 것입니다. 시간을 절약하고 선명도를 높일 수 있습니다. 따라서이 헤더 디자인을 시작하기 위해 미리 정의 된 전역 헤더 템플릿을 네 번째 테마 생성기 팩 .

일단 당신이 팩을 다운로드 생성 테마 파일의 압축을 풀고 기본 웹 사이트 템플릿 JSON 파일을 찾습니다.

그런 다음 Divi> Theme Builder로 이동하십시오.

오른쪽 상단의 이동성 아이콘을 클릭합니다. 이식성 팝업 창에서 기본 웹 사이트 템플릿 JSON 파일을 선택하고 가져 오기 버튼을 클릭합니다.

Divi 모델 가져 오기

테마 빌더에 템플릿이 추가되면 바닥 글 템플릿을 삭제하고을 클릭하여 전체 머리글을 편집합니다.

바닥 글에서 템플릿 제거

헤더에 동적 사이트 제목 및 태그 라인 추가

템플릿 레이아웃 편집기 내에서 이미 디자인 된 미리 만들어진 헤더를 볼 수 있습니다. 사용자 지정을 즉시 시작할 수 있습니다.

로고 이동

시작하려면 로고를 동적으로 표시하는 이미지 모듈을 맨 위 행의 중간 열에서 맨 위 행의 왼쪽 열로 드래그합니다.

클릭 유도 문안 모듈을 추가하여 사이트 제목과 태그 라인을 표시합니다.

그런 다음 새 클릭 유도 문안 모듈을 맨 위 행 (로고가 있던 위치)의 중간 열에 추가합니다.

클릭 유도 문안 맞춤 설정

클릭 유도 문안 모듈을 사용하여 사이트 제목과 태그 라인을 표시합니다.

그러나 콘텐츠 추가를 시작하기 전에 먼저 아니요를 선택하여 배경색을 사용하십시오.

클릭 유도 문안 작업 구성

동적 사이트 제목 추가

콘텐츠 설정에서 제목 입력 상자 위로 마우스를 가져가 "동적 콘텐츠 사용"아이콘을 클릭합니다. 그런 다음 목록에서 "사이트 제목"을 선택합니다.

동적 사이트 슬로건 추가

그런 다음 마우스를 본문 영역 위로 가져가 "동적 콘텐츠 사용"아이콘을 선택합니다. 그런 다음 목록에서 "사이트 태그 라인"을 선택합니다.

divi 사이트 슬로건 추가

동적 홈페이지 링크 추가

특히 로고를 교체하는 경우 사이트 제목이 클릭시 홈페이지로 리디렉션되는 것이 일반적입니다. 전체 코스를 홈 페이지로 리디렉션하려면 홈 페이지 링크를 코스 링크 URL에 동적 콘텐츠로 추가합니다.

홈페이지에 링크 추가

제목의 텍스트 디자인 및 사이트의 슬로건

이제 사이트 제목과 태그 라인이 헤더에 동적으로 표시됩니다. 이제 스타일을 추가하기 만하면됩니다. 사이트 제목을 디자인하려면 제목 텍스트를 사용자 지정하고 태그 라인을 디자인하려면 본문을 사용자 지정해야합니다.

디자인 탭으로 이동하여 다음을 업데이트하십시오.

  • 제목 글꼴 : Heebo
  • 제목 글꼴 무게 : 굵게
  • 제목 글꼴 스타일 : TT
  • 제목 텍스트 크기 : 32px (데스크톱), 24px (태블릿 및 전화)
  • 제목 글자 간격 : 0.3em
  • 바디 폰트 : Roboto
  • 바디 폰트 스타일 : 이탤릭체
  • 본문 텍스트 색상 :
  • 본문 크기 : 13px
  • 본문 글자 간격 : 0.1em
  • 바디 라인 높이 : 1em
divi 제목 글꼴 사용자 지정

센터링을 돕기 위해 프로모션 설명에 다음 맞춤 CSS를 추가하여 본문 아래에 기본 패딩을 가져옵니다.

안쪽 여백 : 0px
사용자 지정 divi css 코드 추가

추가 설계 조정

튜토리얼의 마지막 부분에서는 각 열에서 항목이 세로 중앙에 유지되도록하고 버튼에 고유 한 디자인을 제공하기 위해 헤더에 대한 추가 디자인 조정을 수행합니다. 또한 태그 라인에 전후 라인을 추가합니다 (킥만).

세로로 열 / 컨텐츠 중심

현재 맨 위 행은 flex 속성을 사용하는“Equalize Column Heights”입니다. 작은 CSS 스 니펫을 추가하여 모든 열이 세로로 중앙에 유지되도록하여이를 활용할 수 있습니다. 이렇게하려면 맨 위 행의 설정을 열고 다음 요소를 기본 요소에 추가하십시오.

정렬 항목 : 중심;

버튼으로 열 업데이트

그런 다음 맨 위 행에서 열 3에 대한 설정을 열고 배경색과 패딩을 제거하십시오.

divi 연락처 버튼 사용자 지정

버튼 배경 업데이트

그런 다음 버튼 모듈 설정을 열고 다음과 같이 새 배경 그라데이션으로 배경을 업데이트합니다.

  • 그라데이션 배경 왼쪽 색상 : #ffffff
  • 오른쪽 배경 그라데이션 색상 : # 1dbf73
  • 그라데이션 방향 : 135deg
  • 시작 위치 : 10 %
  • 최종 위치 : 0 %
divi 버튼의 배경 사용자 지정

슬로건에 전후 문자 추가

각 동적 콘텐츠 요소는 톱니 바퀴 아이콘을 클릭하여 변경할 수 있습니다. 슬로건에 앞뒤 문자를 추가하려면 슬로건이 포함 된 클릭 유도 문안 모듈의 설정을 열고 사이트 슬로건의 동적 콘텐츠에서 수정 아이콘을 클릭합니다. 그런 다음 이전 및 이후 항목에 문자를 추가하십시오.

divi 슬로건 표시

최종 결과

결과를 보려면 사이트의 아무 페이지 나여십시오. 동적 사이트 제목과 태그 라인이 아름답게 표시되어야합니다!

최종 결과 divi

마지막 생각

동적 사이트 제목과 태그 라인으로 전체 헤더를 맞춤 설정할 수 있다는 점이 정말 좋습니다. 이것은 많은 사이트에서 유용 할 것 같습니다. 더욱 강력한 브랜드 표현을 위해 로고와 함께 사이트 제목과 태그 라인을 포함하는 아이디어도 마음에 듭니다.

출처: 우아한 테마

Divi에서 스크롤 효과를 사용하여 매끄러운 전환을 만드는 방법

Divi에서 스크롤 효과를 사용하여 매끄러운 전환을 만드는 방법

[vc_row content_placement = "middle"css = ". vc_custom_1508940533685 {background-color : # f8f6f6! important;}"el_id = "themeforestpro"] [vc_column width = "3/4"css = ". vc_custom_1502759058885 {margin-bottom : 0p ! Important; border-bottom-width : 0px! Important; padding-bottom : 0px! Important;} "] [vc_column_text]

Divi : 사용하기 가장 쉬운 WordPress 테마

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] 다운로드 [/vcex_button][/ vc_column][/vc_row]

서비스 페이지를 디자인 할 때 방문자가 귀하가 제공하는 다양한 서비스를 모두인지하도록해야합니다. 대부분의 경우 이것은 그들이 찾고있는 하나의 특정 서비스 일 뿐이지 만 서비스 구조에서 간소화 된 방법을 제공하면 방문자가 모든 서비스를 다룰 가능성이 높습니다. 

이 튜토리얼에서는 Divi의 스크롤 효과로 창의력을 발휘하고 원활한 서비스 전환을 만드는 방법을 보여줍니다. JSON 파일을 무료로 다운로드 할 수도 있습니다!

가자.

가능한 결과

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

섹션 divi 간 전환

1, 요소의 구조를 재현

섹션 1 추가

간격

작업중인 페이지에 새 섹션을 추가하여 시작하십시오. 섹션 설정을 열고 다른 화면 크기에서 패딩 값을 변경하십시오.

  • 상단 패딩 : 80px (데스크톱 및 태블릿), 0px (전화)
  • 하단 패딩 : 80px
Divi 매개 변수 섹션

새 행 추가

기둥 구조

다음 열 구조를 사용하여 새 행을 계속 추가하십시오.

크기 조정

더 많은 모듈을 추가하지 않고 선 매개 변수를 열고 치수 매개 변수에 다음 변경 사항을 적용하십시오.

  • 사용자 정의 거터 너비를 사용하십시오. 예
  • 거터 폭 : 1
  • 너비 : 90 %
  • 최대 너비 : 1580px
Divi 간격 구성

간격

그런 다음 사용자 지정 위쪽 및 아래쪽 여백을 추가하십시오.

  • 상단 여백 : 200px
  • 아래쪽 여백 : 200px
Divi 줄 간격 구성

1 열에 텍스트 모듈 추가

H2 콘텐츠 추가

1 열의 텍스트 모듈부터 시작하여 모듈을 추가 할 시간입니다. 원하는 H2 콘텐츠를 입력합니다.

현재 전문가가 제공하는 서비스

H2 텍스트 설정

모듈 디자인 탭으로 이동하여 다음과 같이 H2 텍스트 설정을 변경합니다.

  • 타이틀 2 경찰 : 분기 별
  • 헤더 2 텍스트 크기 : 80px (데스크톱), 50px (태블릿), 40px (전화)
  • 헤드 라인 2의 높이 : 1.2em
수석 디비 경찰

간격

그런 다음 태블릿과 휴대폰에 여백을 추가하십시오.

  • 하단 여백 : 50 픽셀 (태블릿 및 휴대 전화 만 해당)
Divi 텍스트 간격 구성

2 열에 텍스트 모듈 추가

콘텐츠 추가

두 번째 열로 이동하겠습니다. 필요한 첫 번째 모듈은 설명 내용이있는 텍스트 모듈입니다.

콘텐츠 divi 텍스트 상자

텍스트 설정

모듈 디자인 탭으로 전환하고 그에 따라 텍스트 설정을 변경합니다.

  • 텍스트 글꼴 : 캐빈
  • 텍스트 글꼴 스타일 : 대문자
  • 텍스트 색상 : # 000000
  • 텍스트 크기 : 18px (데스크톱), 15px (태블릿), 13px (전화)
  • 텍스트 문자 간격 : 3px (데스크톱), 1px (태블릿 및 전화)
  • 텍스트 줄의 높이 : 3em
Divi 텍스트 매개 변수

열 2에 분리 모듈 추가

시계

이 칼럼에서 다음으로 필요한 마지막 모듈은 분리 모듈입니다. "분리기 표시"옵션이 활성화되어 있는지 확인하십시오.

  • 구분 기호 표시 : 예
보이는 구분선

라인

그런 다음 모듈의 선 색상을 변경하십시오.

  • 선 색상 : # 000000
구분선 색상 배경

크기 조정

그런 다음 크기 조정 매개 변수를 변경하십시오.

  • 분배기 무게 : 3px
  • 너비 : 28 %
Divi 구분자 크기

간격

우리는 또한 최고 마진을 추가합니다.

  • 상단 여백 : 10px
Divi 분리기 모듈 간격

섹션 2 추가

간격

다음 정규 섹션으로 이동하겠습니다. 섹션에서 기본 상단 패딩을 제거합니다.

  • 상단 패딩 : 0px
섹션 2 나누기 간격

오버 플로우

오버플로도 숨 깁니다.

  • 수평 오버플로 : 숨겨진
  • 수직 오버플로 : 숨겨진
divi 모듈 오버플로 숨기기

새 행 추가

기둥 구조

다음 열 구조를 사용하여 첫 번째 행을 계속 추가하십시오.

divi 레이아웃 선택

크기 조정

더 많은 모듈을 추가하지 않고 선 매개 변수를 열고 치수 매개 변수에 액세스 한 후 다음과 같이 수정하십시오.

  • 사용자 정의 거터 너비를 사용하십시오. 예
  • 거터 폭 : 1
  • 열 높이 균등화 : 예
  • 너비 : 90 %
  • 최대 너비 : 1580px
거터 구성 분할 섹션

간격

그런 다음 기본 상단 및 하단 패딩을 모두 제거하십시오.

  • 상단 패딩 : 0px
  • 하단 패딩 : 0px
Divi 1 줄 모듈 간격 설정

열 1 설정

배경색

그런 다음 열 1의 설정을 열고 배경색을 변경합니다.

  • 배경색 : # f7f7f7
Divi 라인 모듈 배경 구성

간격

다양한 화면 크기에 맞춤 패딩 값을 추가하여 열 설정을 완료합니다.

  • 상단 패딩 : 200px (데스크), 100px (태블릿 및 전화)
  • 하단 패딩 : 200px (데스크), 100px (태블릿 및 전화)
  • 왼쪽 패딩 : 8 %
  • 오른쪽 패딩 : 8 %
행 모듈 열 설정

열 2 설정

간격

2 열의 설정을 열어 계속 진행합니다. 고급 탭으로 이동하여 다양한 화면 크기에 맞춤 패딩 값을 추가합니다.

  • 상단 패딩 : 100px (데스크톱), 50px (태블릿 및 전화)
  • 하단 패딩 : 200px
  • 왼쪽 패딩 : 150 픽셀 (데스크), 0 픽셀 (태블릿 및 전화)
Divi 모듈 간격 설정

열 1에 분리 모듈 추가

시계

첫 번째 열에서 필요한 첫 번째 모듈은 분리 모듈입니다. "분리기 표시"옵션이 활성화되어 있는지 확인하십시오.

  • 구분 기호 표시 : 예
divi 1 구분 기호 표시

라인

그런 다음 모듈의 선 색상을 변경하십시오.

  • 선 색상 : # 000000
Divi 구분 기호 설정

크기 조정

또한 크기 조정 매개 변수를 변경하십시오.

  • 분배기 무게 : 3px
  • 너비 : 50 %
Divi 구분자 크기

1 열에 텍스트 모듈 추가

H3 콘텐츠 추가

1 열에 필요한 다음 모듈은 H3 내용이 포함 된 텍스트 모듈입니다.

Divi 콘텐츠 섹션 설정

H3 텍스트 설정

모듈 디자인 탭으로 전환하고 H3 텍스트 설정을 변경합니다.

  • 타이틀 3 경찰 : 분기 별
  • 항목 3의 텍스트 색상 : # 000000
  • 항목 3 텍스트 크기 : 50px (데스크톱), 40px (태블릿), 35px (전화)
  • 헤드 라인 3의 높이 : 1.1em

2 열에 텍스트 모듈 추가

콘텐츠 추가

두 번째 열에서 필요한 첫 번째 모듈은 설명 내용이 포함 된 텍스트 모듈입니다.

Divi 텍스트 모듈 설정

텍스트 설정

다음과 같이 모듈의 텍스트 설정을 변경하십시오.

  • 텍스트 글꼴 : 캐빈
  • 텍스트 글꼴 스타일 : 대문자
  • 텍스트 크기 : 18px (데스크톱), 15px (태블릿), 13px (전화)
  • 텍스트 문자 간격 : 3px (데스크톱), 1px (태블릿 및 전화)
  • 텍스트 줄의 높이 : 3em
Divi 텍스트 몰드 글꼴 조정

2 열에 버튼 모듈 추가

복사본 추가

다음과 마지막으로 필요한 모듈은 버튼 모듈입니다. 원하는 사본을 입력하십시오.

텍스트 모듈 콘텐츠 설정

버튼 설정

그런 다음 버튼의 스타일을 지정하십시오.

  • 버튼에 사용자 정의 스타일 사용 : 예
  • 버튼 텍스트 크기 : 20 픽셀
  • 버튼 텍스트 색상 : #ffffff
  • 버튼 배경색 : # 000000
  • 버튼 테두리 너비 : 0px
Divi 버튼 스타일 설정
  • 버튼 글꼴 : 분기 별
  • 버튼 글꼴 무게 : 굵게
Divi 버튼 색상 설정

간격

또한 사용자 정의 패딩을 추가하십시오.

  • 상단 패딩 : 50px
  • 하단 패딩 : 50px
  • 왼쪽 패딩 : 100px
  • 오른쪽 패딩 : 100px
Divi 모듈 버튼 간격 설정

위치

그리고 그에 따라 버튼을 재배치하십시오.

  • 위치 : 절대
  • 위치 : 왼쪽 하단
Divi 버튼 모듈 위치 조정

필요한만큼 라인을 복제하십시오

전체 라인과 모든 해당 모듈을 완료하면 전체 라인을 세 번 복제 할 수 있습니다.

Divi 모듈 복제

모든 내용 변경

모든 내용을 두 줄로 편집하십시오.

divi 섹션 내용 편집

2. 스크롤 효과 적용

첫 번째 행 스크롤 효과

수평 운동

섹션의 모든 행을 완료했으면 스크롤 효과를 추가 할 차례입니다. 섹션의 첫 번째 줄을 열고 수평 이동을 추가합니다.

  • 수평 이동 활성화 : 예
  • 시작 오프셋 : -5
  • 평균 오프셋 : 0 (26 %)
  • 끝 오프셋 : 0
  • 트리거 모션 효과 : 요소 중간
divi 스크롤 효과 적용

페이드 인 및 아웃

또한 들어오고 나가는 페이드 효과를 사용하십시오.

  • 페이드 인 및 아웃 활성화 : 예
  • 초기 불투명도 : 100 %
  • 평균 불투명도 : 100 % (50 %)
  • 최종 불투명도 : 0 % (~ 53 %)
  • 트리거 모션 효과 : 요소 중간
페이드 애니메이션 섹션 divi 구성

가운데 행 스크롤 효과

수직 운동

다음으로 섹션의 첫 번째 줄과 마지막 줄 사이의 모든 줄에 스크롤 효과를 추가합니다. 먼저 수직 이동을 사용하십시오.

  • 수직 이동 활성화 : 예
  • 시작 오프셋 : -4
  • 평균 오프셋 : 0 (26 %)
  • 끝 오프셋 : 0
  • 모션 트리거 효과 : 요소 중간
Divi 스크롤 애니메이션 구성

페이드 인 및 아웃

또한 입출력 페이드 효과를 활성화하십시오.

  • 페이드 인 및 아웃 활성화 : 예
  • 초기 불투명도 : 0 %
  • 평균 불투명도 : 100 % (27 %에서 50 %)
  • 끝 오프셋 : 0 (53 %에서)
  • 트리거 모션 효과 : 요소 중간
Divi 라인 페이드 애니메이션

마지막 줄 스크롤 효과

수직 운동

그런 다음 섹션의 마지막 줄을 열고 다음 수직 이동을 추가하십시오.

  • 수직 이동 활성화 : 예
  • 시작 오프셋 : -4
  • 평균 오프셋 : 0 (26 %)
  • 끝 오프셋 : 0
  • 트리거 모션 효과 : 요소 중간
Divi 라인 모듈 스크롤 애니메이션

페이드 인 및 아웃

들어오고 나가는 페이드 효과로 당신은 끝났습니다!

  • 페이드 인 및 아웃 활성화 : 예
  • 초기 불투명도 : 0 %
  • 평균 불투명도 : 100 % (27 %에서 50 %)
  • 최종 불투명도 : 100 % (~ 53 %)
  • 트리거 모션 효과 : 요소 중간
Divi 라인 모듈 모양 애니메이션 설정

최종 결과

이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.

최종 데모

마지막 생각

이 기사에서는 Divi의 스크롤 효과로 아름다운 서비스 전환을 만드는 방법을 보여주었습니다. 한 서브가 사라지기 전에 다른 서브가 나타나기 시작하여 눈을 즐겁게합니다. 이 접근 방식은 개별 수준에서 각 서비스를 강조하는 데 도움이됩니다. JSON 파일을 무료로 다운로드 할 수도 있습니다! 질문이나 제안이 있으시면 아래 댓글 섹션에 댓글을 남겨주세요.

Divi로 팀원 스크롤링 캐 러셀을 만드는 방법

Divi로 팀원 스크롤링 캐 러셀을 만드는 방법

[vc_row content_placement = "middle"css = ". vc_custom_1508940533685 {background-color : # f8f6f6! important;}"el_id = "themeforestpro"] [vc_column width = "3/4"css = ". vc_custom_1502759058885 {margin-bottom : 0p ! Important; border-bottom-width : 0px! Important; padding-bottom : 0px! Important;} "] [vc_column_text]

Divi : 사용하기 가장 쉬운 WordPress 테마

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] 다운로드 [/vcex_button][/ vc_column][/vc_row]

정보 페이지를 만들 때 팀원도 소개하고 싶을 것입니다. 이렇게하면 방문자가 비즈니스 뒤에있는 사람들과 상호 작용할 수 있습니다. 스크롤에서 팀원 섹션에 활기를 불어 넣을 방법을 찾고 있다면이 튜토리얼이 도움이 될 것입니다. 방문자가 페이지를 스크롤 할 때 이동하는 자동 스크롤 팀 구성원 캐 러셀을 만듭니다. 

데모

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

스크롤 디비 팀원

임신의 시작

새 섹션 추가

간격

작업중인 페이지에 새 일반 섹션을 추가하여 시작하십시오. 섹션 설정을 열고 다양한 화면 크기에 맞춤 패딩을 추가합니다.

  • 상단 패딩 : 200px (데스크), 100px (태블릿 및 전화)
  • 하단 패딩 : 200px (데스크), 100px (태블릿 및 전화)
매개 변수 구성

오버 플로우

디자인에 가로 스크롤 막대가 나타나지 않도록하기 위해 고급 탭에서 섹션 오버플로를 숨 깁니다.

  • 수평 오버플로 : 숨겨진
  • 수직 오버플로 : 숨겨진
오버플로 구성

라인 # 1 추가

기둥 구조

다음 열 구조를 사용하여 섹션에 새 줄을 계속 추가하십시오.

divi 레이아웃 선택

크기 조정

아직 모듈을 추가하지 않고 행 설정을 열고 디자인 탭으로 전환 한 다음 크기 조정 설정에서 너비와 최대 너비를 변경합니다.

  • 너비 : 90 %
  • 최대 너비 : 1580px
Divi 라인 매개 변수

간격

또한 사용자 지정 상위 및 하위 패딩을 추가합니다.

  • 상단 패딩 : 100px
  • 하단 패딩 : 100px
줄 간격 divi 구성

열에 텍스트 모듈 추가

H2 콘텐츠 추가

첫 번째 텍스트 모듈부터 시작하여 모듈을 추가 할 때입니다. 원하는 H2 내용을 입력하십시오.

팀 만나기

H2 텍스트 설정

모듈 디자인 탭으로 이동하여 다음과 같이 H2 텍스트 설정을 변경합니다.

  • 서체 제목 2 : Quicksand
  • 서체 제목 2 : 세미 볼드
  • 항목 2의 텍스트 색상 : # 000000
  • 헤더 2 텍스트 크기 : 70px (데스크톱), 50px (태블릿), 40px (전화)
Divi 텍스트 간격

컬럼에 분리 모듈 추가

시계

그런 다음 분리 모듈을 추가합니다. "분리기 표시"옵션이 활성화되어 있는지 확인하십시오.

  • 구분 기호 표시 : 예
divi 구분 기호 표시

라인

그런 다음 회선 설정을 약간 변경하십시오.

  • 선 색상 : # edf000
  • 선 스타일 : 솔리드
  • 라인 위치 : 상단
Divi 간격 스타일

크기 조정

치수 매개 변수를 적절하게 수정하여 모듈 매개 변수를 완료하십시오.

  • 분배기 무게 : 20px
  • 너비 : 11 %
  • 모듈의 정렬 : 왼쪽
  • 높이 : 20px
divi 라인 모듈 크기 조정

2 번 줄 추가

기둥 구조

다음 줄로! 다음 열 구조를 사용하십시오.

Divi 열 구성

크기 조정

더 많은 모듈을 추가하지 않고 다음과 같이 라인 매개 변수를 열고 크기 조정 매개 변수를 수정하십시오.

  • 사용자 정의 거터 너비를 사용하십시오. 예
  • 거터 폭 : 2
  • 너비 : 100 %
  • 최대 폭 : 100 %
거터 너비 구성

간격

그런 다음 작은 화면에만 왼쪽 및 오른쪽 패딩을 추가하십시오.

  • 왼쪽 패딩 : 5 % (태블릿 및 휴대 전화 만 해당)
  • 오른쪽 여백 : 5 % (태블릿 및 휴대 전화 만 해당)
줄 간격 스타일 구성

열 매개 변수 (5x)

이제이 자습서의 다음 세 단계에서 열을 일부 변경합니다. 행의 각 열에 세 단계를 적용합니다.

Divi 매개 변수 라인 구성

그라데이션 배경

먼저 각 열에 그라데이션 배경을 추가합니다.

  • 1 색상 : rgba (255,255,255,0)
  • 2 색상 : rgba (0,0,0,0,84)
  • 그라디언트 유형 : 선형
  • 시작 위치 : 25 %
  • 최종 위치 : 86 %
  • 배경 이미지 위에 그라디언트 배치 : 예
Divi 후면 컬럼 구성

배경 이미지

그런 다음 원하는 배경 이미지를 업로드하십시오. 이 배경 이미지는 각 팀원을 나타내므로 각 열에 다른 이미지를 사용하십시오.

  • 배경 이미지 크기 : 표지
  • 배경 이미지의 위치 : 중앙
divi 열 배경 이미지 추가

주요 요소

각 열의 기본 태블릿 요소에 사용자 정의 CSS를 추가하여 열 설정을 완료하십시오. 이 CSS 코드 줄은 두 개를 나란히 배치하는 대신 태블릿에서 열을 다른 하나 아래에 배치하는 데 도움이됩니다.

너비 : 100 % 중요! 여백 : 50px 0px 50px 0px! 중요;
코드 css divi 열

열에 개인 모듈 추가

콘텐츠 추가

팀원에 대한 정보를 공유하기 위해 Person 모듈을 사용합니다. 첫 번째 Person 모듈을 열 1에 추가하고 원하는 콘텐츠를 사용합니다.

사람 이름 divi

이미지 삭제

그런 다음 이미지를 삭제하십시오. 대신 열의 배경 이미지를 사용합니다.

divi 이미지 제거

배경 이미지

그런 다음 모듈의 배경 이미지로 이미지 오버레이를 추가합니다. 이 튜토리얼의 시작 부분에서 폴더를 다운로드하여 사용중인 파일을 찾을 수 있습니다.

  • 배경 이미지 크기 : 표지
  • 배경 이미지의 위치 : 중앙
사람 모듈 배경 구성

제목 텍스트 설정

모듈 디자인 탭으로 이동하여 다음과 같이 제목 텍스트 설정을 변경합니다.

  • 타이틀 레벨 : H3
  • 제목 글꼴 : Quicksand
  • 제목 글꼴 무게 : 굵게
  • 제목 텍스트 색상 : #ffffff
  • 제목 텍스트 크기 : 230 %
Divi 모듈 제목 사용자 정의

본문 텍스트 설정

본문 텍스트 설정도 변경하십시오.

  • 본문 글꼴 : Open Sans
  • 본문 텍스트 색상 : #ffffff
  • 바디 라인 높이 : 2,2 em
Divi 바디 사용자 정의

위치 텍스트 설정

그런 다음 위치 텍스트 설정을 약간 변경하십시오.

  • 글꼴 위치 : Open Sans
  • 위치 텍스트 색상 : # edf000
Divi 위치

간격

그리고 간격 설정에 사용자 지정 패딩 값을 추가하여 모듈 설정을 완료합니다.

  • 상단 패딩 : 70 %
  • 낮은 패딩 : 10 %
  • 왼쪽 패딩 : 10 %
  • 오른쪽 패딩 : 10 %
Divi 사람 모듈 간격

Person 모듈을 4 번 복제

Person 모듈을 완료하면 전체 모듈을 네 번 복제 할 수 있습니다.

나머지 열에 중복 배치

행의 나머지 XNUMX 개 열에 중복 모듈을 배치합니다. 내용도 편집해야합니다.

행을 자동 스크롤 회전 목마로 전환

라인 2의 크기 변경

이제이 행을 자동 스크롤 팀 구성원 캐 러셀로 바꾸려면 행 설정을 다시 열고 크기 설정에서 너비와 최대 너비를 변경해야합니다.

  • 너비 : 180 %
  • 최대 너비 : 220 % (데스크), 100 % (태블릿 및 전화)
줄 divi 수정 간격

라인 2의 수평 이동 추가

고급 탭의 스크롤 효과 설정에 수평 이동을 추가하여 선 설정을 완료하면 완료됩니다!

  • 수평 이동 활성화 : 예
  • 시작 오프셋 :
    • 사무실 : 2,5
    • 태블릿 및 전화 : 0
  • 평균 오프셋 : 0 (40 %)
  • 끝 오프셋 :
    • 사무실 : -25 (62 %)
    • 태블릿 및 전화 : 0
  • 트리거 모션 효과 : 요소 중간
Divi 스크롤 애니메이션 구성

측량

이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.

스크롤 디비 팀원

마지막 생각

이 튜토리얼에서는 Divi의 내장 스크롤 효과로 창의력을 발휘하는 방법을 보여주었습니다. 특히, 자동 스크롤되는 아름다운 팀 구성원 캐 러셀을 다시 만들었습니다. 방문자가 페이지를 아래로 스크롤하면 캐 러셀의 다른 부분이 나타납니다.

Divi에 더 많은 소셜 미디어 아이콘을 추가하는 방법

Divi에 더 많은 소셜 미디어 아이콘을 추가하는 방법

[vc_row content_placement = "middle"css = ". vc_custom_1508940533685 {background-color : # f8f6f6! important;}"el_id = "themeforestpro"] [vc_column width = "3/4"css = ". vc_custom_1502759058885 {margin-bottom : 0p ! Important; border-bottom-width : 0px! Important; padding-bottom : 0px! Important;} "] [vc_column_text]

Divi : 사용하기 가장 쉬운 WordPress 테마

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] 다운로드 [/vcex_button][/ vc_column][/vc_row]

Divi를 사용하면 머리글에서 바닥 글까지 웹 사이트의 모든 세부 사항을 제어하고 디자인 할 수 있습니다. 웹 사이트에서 가장 많이 클릭되는 요소 중 하나는 소셜 미디어 아이콘입니다. 참여도가 높은 청중은 다른 곳에서 귀하를 찾고 귀하를 알고 싶어합니다. 분명히 가능한 한 쉽게 만들고 싶을 것입니다. 

따라서 Divi의 테마 옵션에서 추가 소셜 미디어 아이콘을 활성화하는 방법, Divi Builder를 사용하여 페이지 또는 게시물의 아무 곳에 나 소셜 미디어 아이콘을 삽입하는 방법, 기능을 활용하는 방법을 보여 드리겠습니다. 사이트의 구석 구석 구석 구석에 소셜 미디어 아이콘을 추가하는 Divi Builder 테마

Divi 바닥 글에서 추가 소셜 미디어 아이콘을 쉽게 활성화하는 방법

Divi 사이트에 더 많은 소셜 미디어 아이콘을 추가하는 가장 쉬운 방법은 패널로 이동하는 것입니다. 테마 옵션 , Facebook, Twitter, Instagram 및 RSS에 대한 활성화 옵션. 그런 다음 필드에 프로필의 URL을 입력하기 만하면됩니다. 이렇게하면 사이트 바닥 글에 아이콘 링크로 표시됩니다.

사회 아이콘 divi

워드 프레스 대시 보드 메뉴에서 Divi-테마 옵션 탭을 클릭하십시오 일반 . 네트워크 스위치를 보려면 아래로 스크롤하십시오. 또한 해당 토글 바로 아래에 활성화 한 각 Divi 소셜 아이콘의 URL을 입력해야합니다. 그렇지 않으면 아이콘이 나타나지만 아이콘을 클릭하면 사용자가 어디에도 없습니다. 사용 # URL 대신 사용자를 잠재적으로 페이지로 리디렉션하지 않고 페이지 404 .

Divi 테마 옵션

테마 옵션의 끝으로 스크롤하고 변경 사항 저장 . 이제 사이트의 바닥 글로 이동하여 소셜 아이콘을 클릭하여 테스트 할 수 있습니다!

바닥 글에 아이콘이 보이지 않으면 아래에서 테마 맞춤 설정 도구를 확인하십시오 모양-사용자 정의 그리고 확인 소셜 아이콘 표시 바닥 글 옵션에서 확인됩니다.

Divi 워드 프레스

그러나 소셜 바닥 글 아이콘에 대한 더 많은 옵션을 원한다면 Divi Theme Builder의 섹션으로 계속 스크롤하여 사용자 정의 템플릿과 전체 기본값을 모두 논의하십시오.

Divi Builder를 사용하여 소셜 미디어 추적기를 페이지에 추가하거나 콘텐츠를 게시하는 방법

때로는 페이지 또는 게시물 본문의 텍스트 블록, 이미지 또는 기타 콘텐츠 사이에 추가 소셜 미디어 아이콘을 배치하는 것이 의미가있을 수 있습니다. 예를 들어 방문 페이지 또는 정보 페이지는 방문자에게 귀하와 연결하는 방법을 알리기 위해 추가 소셜 아이콘을 추가 할 수있는 좋은 장소입니다. 일반 텍스트를 사용하여 소셜 프로필에 연결하는 것 이상으로 눈에 띄게됩니다. 또한 사람들은 인식 가능한 아이콘을 찾고 있습니다.

Divi Builder를 사용하여 소셜 미디어 아이콘을 페이지 또는 게시물에 직접 삽입 할 수 있습니다. 소셜 미디어 추적 .

WordPress 대시 보드에서 기존 페이지 나 기사를 만들거나 열 때마다 Divi Builder 사용 여부를 묻는 큰 자주색 버튼이 표시됩니다.

Divi 기사 생성

물론 그렇습니다. 그냥 클릭 Divi Builder 사용 페이지를 작성하거나 처음부터 게시 (또는 사전 정의 된 레이아웃 ). 또한 기본 WordPress 편집기를 사용하는 경우 Divi 소셜 미디어 아이콘을 포함 할 수 있습니다. 필요한 것은 블록을 삽입하는 것입니다. 디비 레이아웃 아래에서 수행하는 것과 동일한 단계를 따릅니다.

Divi Gutenberg 레이아웃

도구를 사용하여 사용 가능한 페이지 빌더 모듈을 사용하여 원하는대로 페이지 또는 게시물을 디자인 할 수 있습니다. Divi Builder를 처음 사용하는 경우 먼저이 개요를 확인하여 작동 방식을 명확하게 이해하는 것이 좋습니다.

소셜 미디어 아이콘을 페이지에 추가 할 준비가되면 검은 원 + 소셜 미디어 아이콘을 배치하려는 섹션에서 소셜 미디어 추적 이 나타납니다.

소셜 미디어에 모듈 팔로우 삽입

개인화를 시작하기 전에 원하는 소셜 네트워크를 선택하라는 메시지가 표시됩니다. 클릭 새로운 소셜 네트워크 추가 .

소셜 네트워크 소셜 모듈 divi 추가

그런 다음 드롭 다운 목록에서 하나를 선택하십시오.

새로운 소셜 네트워크 추가

선택한 상태에서 프로필의 URL을 추가하십시오. 선택적으로 색상, 그라디언트, 배경 등을 선택할 수 있습니다. 아이콘에 따라 다릅니다.

소셜 네트워크 버튼 사용자 지정

첫 번째 소셜 네트워크를 추가 한 후에는 동일한 단계에 따라 다른 네트워크를 계속 추가 할 수 있습니다. 탭 아래에 모두 나열됩니다. 내용 의 소셜 미디어 추적 설정 . 드래그 앤 드롭하여 편집, 복사 또는 재정렬 할 수 있습니다.

소셜 아이콘 사용자 지정

소셜 네트워크를 추가했으면 탭으로 전환하십시오. 내용 et 임신 다른 사용자 지정 옵션으로 플레이 할 수 있습니다. 상자의 그림자, 테두리 반경, 간격, 필터 및 아이콘 모듈의 인트로 애니메이션까지 모든 것을 변경할 수 있습니다. 버튼을 포함 할 수도 있습니다. 따라 모든 아이콘에 더 많은 관심을 끌 수 있습니다. 완료되면 녹색 진드기 .

우리를 따르라 버튼 divi

그런 다음 페이지에서 아이콘을 이동하여 적절하다고 판단되는 간격과 레이아웃을 작업 할 수 있습니다. (그만큼 분할 변환 옵션 그 결정에 놀랍습니다.) 모든 결정에 만족하면 녹색 저장 (또는 게시) 버튼 새 소셜 미디어 아이콘 모듈을 등록하려면 오른쪽 하단 모서리에 있습니다. 게시 / 저장 버튼이 표시되지 않으면 자주색 줄임표 (세 개의 점) 메뉴를 확장하려면 화면 하단 중앙에 있습니다.

Divi 버튼은 우리를 따르십시오

그 후에는 소셜 미디어 아이콘이 사이트에 게시됩니다.

Divi Theme Builder를 사용하여 소셜 미디어 아이콘 추가

위에서 언급했듯이 Divi Theme Builder는 사이트의 거의 모든 측면을 완벽하게 제어 할 수있는 강력한 도구입니다. 따라서 어디에서나 소셜 미디어 아이콘을 추가하려는 경우 테마 생성기를 사용하면됩니다.

테마 생성기로 시작하려면 Divi-테마 생성기 워드 프레스 대시 보드입니다.

디비 빌더

이것은 기존 Divi 테마 생성기 레이아웃에 소셜 미디어 아이콘을 추가하는 것과 관련이 있습니다. 아니면 새로운 것! 사이트의 머리글, 바닥 글 또는 전체 본문 또는 특정 카테고리 또는 기타 특수 페이지 유형에 추가하는 것은 중요하지 않습니다. 동일한 과정을 따릅니다.

먼저 추가 할 섹션을 찾습니다. 다시 말하지만, 글로벌 또는 개인화가 가능합니다. 이전에 테마 빌더를 사용한 적이 없다면 쉽습니다. 개별 게시물에 소셜 미디어 아이콘을 추가 할 예정입니다. 따라서 클릭하여 시작할 수 있습니다. 새 모델 추가 그리고 선택 모든 메시지 ou 특정 카테고리의 메시지 . 그런 다음 포함 할 카테고리를 선택하십시오. 그런 다음 템플릿 만들기 .

divi 모델 추가

이미 템플릿을 설정 한 경우 연필 편집 또는 수정하려는 섹션을 두 번 클릭하십시오.

Divi 레이아웃

여기에 소셜 미디어 아이콘을 추가하는 과정은 생성기에서 위에서 설명한 것과 동일합니다. 그러나 단일 페이지를 편집하는 대신 테마 작성기를 사용하기 때문에 선택한 위치에만 아이콘이 표시되지 않습니다. 머리글, 바닥 글 및 전역 템플릿에 템플릿을 추가 할 수 있습니다. 한 번 구성하지 않고도 표시 방법과시기를 선택할 수 있습니다. 위와 같이 페이지 단위가 아닙니다.

예를 들어 게시물 제목 아래에 소셜 미디어 아이콘을 포함하고 싶지만 게시하는 모든 블로그 게시물의 게시물 콘텐츠 위에 모듈을 추가합니다. 따라 소셜 네트워크. 원을 클릭 노아 + 대화 상자에서 선택 모듈 삽입 .

소셜 모듈 선택

그런 다음 소셜 미디어 아이콘을 표시 할 위치로 모듈을 드래그하면됩니다. (이 배치에는 와이어 프레임 모드를 사용하고 있습니다). 그런 다음 표시하려는 소셜 네트워크를 추가하기 만하면됩니다. 그런 다음 위에서 한 것처럼 크기와 색상을 사용자 정의합니다.

소셜 아이콘 미디어 모듈 divi

그리고 마찬가지로 Divi 테마 생성기에 소셜 미디어 아이콘을 추가했습니다. 작성한 모든 블로그 게시물 (이 예에서)에 표시됩니다.

공유 버튼이있는 divi에 표시

모양이 마음에 들지 않으면 테마 생성기는 쉽게 사용자 지정할 수 있습니다. 사이드 바 상단과 같은 다른 위치로 드래그하면됩니다.

Divi 소셜 공유 모듈 이동

녹색 버튼을 클릭하십시오 레지스터 구석에. 이제 사이트에서이 템플릿이있는 모든 블로그 게시물이 사이드 바 상단에 소셜 미디어 아이콘과 함께 업로드됩니다.

사이드 바 아이콘

Divi Theme Builder로 머리글 및 바닥 글에 소셜 미디어 아이콘 추가

Divi 설정의 기본 소셜 미디어 아이콘이 작동하지 않거나 충분한 사용자 정의를 제공하지 않았을 수 있습니다. 이 경우 언제든지 테마 빌더를 사용하여 더 완벽하게 사용자 지정할 수 있습니다. 

모든 템플릿에서 사용자 지정 바닥 글을 추가 할 수 있습니다. 이것은 기본 Divi를 대체합니다. 사용자 지정 템플릿이없는 모든 템플릿은 기본 테마 요소를 표시합니다. 소셜 미디어 아이콘은 사용자의 필요에 따라 게시물마다 다를 수 있습니다.

개인화 테마 divi 레이아웃

대체 할 전역 바닥 글을 추가 할 수도 있습니다. 모든 사용자가 만든 다른 바닥 글. (전역 본문 및 헤더에도 적용됩니다). 

게시물, 페이지, 프로젝트 및 범주에 대해 4 개의 사용자 지정 바닥 글을 디자인 한 다음 전역 바닥 글을 만든 경우 전역 바닥 글 만 표시됩니다. 

글로벌 템플릿은 신문이나 브랜드 등 사이트 전체의 소셜 미디어 아이콘에 적합합니다. 소셜 아이콘이있는 사용자 지정 템플릿은 네트워크의 일부인 개별 제작자에게 가장 적합 할 수 있습니다.

전역 divi 바닥 글 추가

사용자 지정 머리글, 바닥 글 및 본문 템플릿에 Divi Builder를 사용하면 원하는 거의 모든 Divi 부분에 소셜 미디어 아이콘을 추가 할 수 있습니다. 기본 디자인에 국한되지 않거나 WordPress 파일 시스템을 파헤쳐 야합니다. 또한 테마 생성기를 사용하면 Divi의 디자인 옵션을 사용하여 소셜 미디어 아이콘을 장식하고 각 특정 청중에게 올바른 방식으로 눈에 띄게 만들 수 있습니다.

결론

기본 Divi 바닥 글 옵션, 게시물 및 페이지 용 Divi Builder 도구, Divi Theme Builder의 강력한 기능이 있으면 설치해야 할 이유가 없습니다. 웹 사이트에 소셜 미디어 아이콘을 추가하는 플러그인. Divi는 소셜 아이콘의 모양과 위치를 완전히 제어 할 수 있습니다. 

브랜드, 게스트 작성자, 콘텐츠 제작자 마구간 또는 온라인에서 찾을 수있는 장소를 홍보해야하는지 여부에 관계없이 Divi는이를 수행 할 수있는 방법이 있습니다. 우리는 일방적이지만 웹 사이트에 소셜 미디어 아이콘을 추가하는 가장 쉽고 쉽고 세련된 방법이라고 생각합니다.

WooCommerce 제품에 대한 동적 혜택 그리드 생성

WooCommerce 제품에 대한 동적 혜택 그리드 생성

[vc_row content_placement = "middle"css = ". vc_custom_1508940533685 {background-color : # f8f6f6! important;}"el_id = "themeforestpro"] [vc_column width = "3/4"css = ". vc_custom_1502759058885 {margin-bottom : 0p ! Important; border-bottom-width : 0px! Important; padding-bottom : 0px! Important;} "] [vc_column_text]

Divi : 사용하기 가장 쉬운 WordPress 테마

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] 다운로드 [/vcex_button][/ vc_column][/vc_row]

제품 페이지를 디자인하는 방식은 방문자의 행동에 즉각적인 영향을 미칩니다. 잘 제작되고 개인화 된 제품 페이지 디자인은 방문자가 제품 구매 여부를 쉽게 결정할 수 있도록합니다. 제품 페이지를 더욱 매력적으로 만드는 방법을 찾고 있다면이 튜토리얼을 좋아할 것입니다. 

Divi 및 Advanced Custom Fields 플러그인을 사용하여 디자인에 동적 제품 혜택 그리드를 포함하는 방법을 보여 드리겠습니다. 혜택에 대한 필드 그룹을 만드는 것으로 시작합니다. 그런 다음 제품 페이지에서 사용자 정의 필드를 완성하고 제품 페이지 템플릿에 동적 콘텐츠를 포함합니다. 

가능한 결과

튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 빠르게 살펴 보겠습니다.

가능한 결과 divi

1. ACF 플러그인 및 제품 혜택 필드 그룹 플러그인 설치

고급 사용자 정의 필드 플러그인 설치

제품 백엔드에 다양한 제품 혜택을 표시하기 위해 무료 고급 사용자 정의 필드 플러그인을 사용할 것입니다. 액세스 WordPress 백엔드> 플러그인> 새로 추가> ACF 플러그인 찾기> 설치> 활성화 .

adavanced 사용자 정의 필드 플러그인 설치

맞춤 입력란으로 이동하여 새 입력란 그룹 추가

ACF 플러그인을 설치하고 활성화하면 사용자 정의 필드에 액세스하고 새 필드 그룹을 추가 할 수 있습니다.

acf 필드 생성

필드 그룹 설정

새 필드 그룹에 제목을 지정하고 제품 페이지에만 표시되도록 허용합니다.

  • "메시지 유형"은 "제품"과 같습니다.
규칙 추가

첫 번째 필드 추가

첫 번째 제품 혜택 제목에 새 필드를 추가하여 계속하십시오.

  • 필드 레이블 : 혜택 제목 1
  • 필드 유형 : 텍스트
AC 필드 추가
Divi 필드 사용자 정의

나머지 필드에 대해 단계를 반복하십시오.

제품의 다른 이점과 설명에 대해서도 동일하게 수행하십시오. 이러한 모든 필드에는 "텍스트"필드 유형이 할당되어야합니다.

  • 서비스 제목 1
  • 혜택 설명 1
  • 서비스 제목 2
  • 혜택 설명 2
  • 서비스 제목 3
  • 혜택 설명 3
  • 서비스 제목 4
  • 혜택 설명 4
acf 필드 구성

2. 제품에 혜택 추가

새 제품을 열거 나 추가하십시오

필드 그룹과 필드가 생성되면 개별 수준에서 제품에 제품 혜택을 추가 할 수 있습니다. 선택한 제품을 열거 나 새 제품을 만듭니다.

Divi 제품 생성

제품 혜택 필드를 작성하십시오

그리고 제품의 이점을 실현하십시오.

divi 장점 필드 작성

3. Divi Theme Builder에서 제품 페이지 템플리트 작성

Divi Theme Builder로 이동하여 새 템플릿 추가

Divi로 시작할 시간입니다! 새 템플릿을 만들려면 Divi Theme Builder로 이동하여 "새 템플릿 추가"를 클릭하십시오.

Divi 테마 빌더

모든 제품에 템플릿 사용

이 템플릿은 모든 제품에 사용되지만 특정 카테고리 또는 라벨이있는 제품을 대신 선택할 수 있습니다.

모든 woocommerce 제품 추가

모델 본문 템플릿 편집기 시작

그런 다음 "사용자 정의 바디 추가"를 클릭하고 "사용자 정의 바디 생성"을 선택하여 모델의 바디를 입력하십시오.

Divi 본문 작성

섹션 1 편집

배경색

템플릿 편집기에 들어가면 섹션이 나타납니다. 해당 섹션을 열고 배경색을 검은 색으로 변경하십시오.

  • 배경색 : # 000000
Divi 섹션 배경 구성

간격

섹션의 디자인 탭으로 이동하여 사용자 정의 상단 및 하단 패딩을 추가하십시오.

  • 상단 패딩 : 10px
  • 하단 패딩 : 10px
Divi 섹션 간격 구성

새 줄 추가

열 구조

다음 구조를 가진 섹션에 새로운 줄을 추가하여 계속합시다 :

라인 모듈 레이아웃 구성

간격

모드를 추가하지 않고 행 설정을 열고 간격을 조정 해 보겠습니다.

  • 개인화 된 개골창 사용 : 예
  • 거터 폭 : 1
  • 너비 : 90 %
  • 최대 너비 : 100 %
줄 모듈 간격 설정

간격

모든 상단 및 하단 내부 간격을 제거하십시오.

  • 높은 내부 여백 : 0px
  • 낮은 내부 여백 : 0px
Divi 라인 모듈 간격 설정

Woo Cart Notice 모듈을 열에 추가하십시오

동적 컨텐츠

이 줄과 섹션에서 필요한 유일한 모듈은 Woo Cart Notice 모듈입니다. 동적 섹션에서 "이 제품"이 선택되어 있는지 확인합니다.

  • 제품 :이 제품
설정 woo cart 알림 모듈 divi

색 배경

그런 다음 모듈 설정을 열고 투명한 배경을 사용하십시오.

  • 배경색 : rgba (0,0,0,0)
Woo Cart 모듈 Divi 설정

텍스트 설정

"디자인"탭으로 전환하고 텍스트 글꼴을 변경합니다.

  • 텍스트 글꼴 : Karla
Divi 모듈 글꼴 설정

버튼 설정

스타일 설정을 정의하여 플러그인 설정을 완료하십시오.

  • 버튼에 사용자 정의 스타일 사용 : 예
  • 버튼 텍스트 크기 : 20px
  • 버튼 텍스트 색상 : # 000000
  • 버튼 배경 : # ffd623
  • 버튼 테두리 너비 : 0px
  • 둥근 테두리 버튼 : 0px
우 카트 알림 모듈 색상 설정
  • 버튼 글꼴 : Oswald
  • 버튼 글꼴 스타일 : Shift
우 카트 공지 모듈 색상 디자인 조정
  • 높은 내부 여백 : 20px
  • 낮은 내부 여백 : 20px
  • 왼쪽 내부 여백 : 50px
  • 내부 오른쪽 여백 : 50px
구성 설계 모듈 우 카트 고지

섹션 2 추가

그라데이션 배경

이전 섹션 아래에 다른 일반 섹션을 추가하십시오. 그런 다음 설정을 열고 다음과 같이 그라데이션 배경을 사용하십시오.

  • 색상 1 : # 000000
  • 색상 2 : #ffffff
  • 시작 위치 :
    • 데스크톱 : 30 %
    • 태블릿 : 57 %
    • 전화 : 54 %
  • 최종 위치 :
    • 데스크톱 : 30 %
    • 태블릿 : 57 %
    • 전화 : 54 %
Divi 라인 모듈 후면 조정

간격

디자인 탭으로 이동하여 높은 내부 여백을 추가하겠습니다.

  • 상단 패딩 : 150px
Divi 라인 모듈 간격 구성

새 행 추가

열 구조

아래 표시된 것과 동일한 구조로 새 줄을 추가하여 계속합니다.

Divi 선 스타일 구성

크기 조정

아직 모드를 추가하지 않고 설정을 열고 다음과 같이 간격을 변경합니다.

  • 맞춤형 거터 사용 : 예
  • 거터 공간 : 1
  • 너비 : 95 %
  • 최대 너비 : 2560px
  • 라인 정렬 : 중심
거터 구성 divi 모듈

간격

내부 마진도 제거 할 예정입니다.

  • 상단 패딩 : 0px
Divi 모듈 간격 구성

주요 요소

열의 내용을 Desktop의 중앙에 맞추기 위해 행 모듈의 기본 요소에 두 줄의 CSS 코드를 사용합니다.

바탕 화면 :

디스플레이 : 플렉스; 정렬 아이템 : 중앙;

태블릿 및 휴대 전화 :

디스플레이 : 블록;
Divi 라인 모듈 스타일 설정

1 열에 Woo Image 모듈 추가

동적 컨텐츠

모듈을 추가 할 시간입니다. 열 1의 Woo Images 모듈부터 시작하겠습니다. "이 제품"이 선택되어 있는지 확인합니다.

  • 제품 :이 제품
Woocommerce 제품 이미지 모듈 설정

수직 스크롤 애니메이션 효과

고급 탭의 수평 이동 스크롤 효과를 사용하여 이미지에 미묘한 움직임을 추가합니다.

  • 수직 이동 활성화 : 예
  • 시작 오프셋 :
    • 사무실 : -4
    • 태블릿 및 전화 : 0
  • 평균 오프셋 : 0
  • 끝 오프셋 : 0
  • 트리거 모션 효과 : 요소 중간
Divi 이미지 모듈 조정

Woo 제목 모듈을 열 2에 추가

동적 컨텐츠

2 열에서 우리에게 필요한 첫 번째 모드는 Woo 타이틀 모드입니다. 동적 콘텐츠 영역에서 "이 제품"이 선택되어 있는지 확인합니다.

  • 제품 :이 제품
제품 혜택 표

제목 텍스트 설정

그런 다음 디자인 탭으로 이동하여 다음과 같이 제목 텍스트 스타일을 지정합니다.

  • 제목 글꼴 : Oswald
  • 제목 글꼴 스타일 : 대문자
  • 제목 텍스트 색상 : # ffd623
  • 제목 텍스트 크기 : 80px
Divi 타이틀 모듈 디자인 조정

간격

왼쪽 및 오른쪽 여백을 추가하여 Woo 제목 모듈을 완성하십시오.

  • 왼쪽 여백 : 5 %
  • 오른쪽 여백 : 5 %
Divi 타이틀 모듈 설정

Woo 설명 모듈을 열 2에 추가

동적 컨텐츠

다음 모듈 인 Woo 설명 모듈로 이동하겠습니다. 이를 위해 다음과 같은 동적 콘텐츠를 사용합니다.

  • 제품 :이 제품
  • 설명 유형 : 간단한 설명
제품 설명 모듈 설정

텍스트 설정

모듈 디자인 탭으로 전환하고 그에 따라 텍스트 설정을 변경합니다.

  • 텍스트 글꼴 : Karla
  • 텍스트 색상 : #dbdbdb
  • 텍스트 크기 : 17 픽셀 (데스크톱 및 태블릿), 15 픽셀 (전화)
  • 텍스트 줄 높이 : 1,9 em
색상 조정 모듈 설명 divi

크기 조정

그런 다음 다른 화면 크기에서 너비를 변경하십시오.

  • 폭 : 59 % (데스크톱), 82 % (태블릿 및 전화)
Divi 요약 모듈 너비 조정

간격

간격 설정에 사용자 정의 여백 값을 추가하여 Woo 설명 모듈을 완료하십시오.

  • 상단 여백 : 50px
  • 아래쪽 여백 : 100px
  • 왼쪽 여백 : 5 %
  • 오른쪽 여백 : 5 %
Divi 제품 설명 모듈

2 열에 Blurb 모듈 추가

동적 컨텐츠

이 자습서의 첫 번째 부분에서 추가 한 제품 이점을 표시하기 위해 Blurb 모듈을 사용합니다. 첫 번째 Blurb 모듈을 추가하고 제목과 본문에 대해 생성 된 첫 번째 혜택의 동적 내용을 사용하십시오.

  • 제목 : Benefit Title 1
  • 본문 : 혜택 설명 1
Divi 요약 모듈 텍스트 설정

업로드 이미지

다음에 이미지를 업로드하거나 원하는 아이콘을 사용하십시오. 이 자습서의 시작 부분에서 다운로드 할 수있는 다운로드 폴더에서이 자습서 전체에서 사용한 것을 찾을 수 있습니다.

이미지 모듈 요약 divi 구성

이미지 / 아이콘 설정

모듈의 디자인 탭으로 이동하여 다음과 같이 이미지 / 아이콘 설정을 변경하십시오.

  • 이미지 / 아이콘 배치 : 상단
  • 이미지 / 아이콘 정렬 : 왼쪽
Divi 조정 모듈

제목 텍스트 설정

다음으로 제목 텍스트 설정을 수정합니다.

  • 제목 글꼴 : Oswald
  • 제목 글꼴 스타일 : 대문자
  • 제목 텍스트 크기 : 25px
divi 요약 모듈 글꼴 구성

본문 설정

본문 설정과 함께.

  • 바디 글꼴 : Karla
  • 텍스트 크기 : 17 픽셀 (데스크톱 및 태블릿), 15 픽셀 (전화)
  • 바디 라인 높이 : 1,9 em
텍스트 모듈 요약 div 구성

크기 조정

그런 다음 크기 조정 설정으로 이동하여 너비를 변경하십시오. 기본 너비를 50 % 미만으로 사용하는 것이 중요합니다. 그러면 다음 단계에서 두 개의 Blurb 모듈을 나란히 표시 할 수 있습니다.

  • 이미지 너비 : 25 %
  • 너비 : 49 %
divi 요약 모듈 크기 구성

간격

또한 다양한 화면 크기에서 사용자 지정 패딩 값을 사용하여 Blurb 모듈 주변에 공백을 추가합니다.

  • 상단 패딩 : 8 %
  • 낮은 패딩 : 8 %
  • 왼쪽 패딩 : 8 % (데스크톱 및 태블릿), 2 % (전화)
  • 오른쪽 여백 : 8 % (데스크톱 및 태블릿) 2 % (전화)
divi 요약 모듈 간격 구성

주요 요소

이제 요약 모듈이 두 단계로 텍스트를 나란히 표시하는지 확인합니다. 먼저 모듈 너비가 50 % 미만인지 확인합니다 (이전 단계에서했던 것처럼). 다음으로 행의 속성을 사용합니다. 고급 섹션의 기본 요소에이 CSS 속성을 추가합니다.

디스플레이 : 인라인 블록;
CSS 코드 DIVI 모듈 추가

요약 모듈을 3 번 복제

첫 번째 Blurb 모드를 완료하면 세 번 복제 할 수 있습니다. Blurb 모듈이 그리드에 나타나는 것을 자동으로 알 수 있습니다.

제품명 divi 섹션

Blurb 모듈 이미지 편집

중복 된 각 Blurb 창에서 이미지를 편집합니다. 이 문서의 시작 부분에서 다운로드했을 수있는 다운로드 폴더에서 찾을 수 있습니다.

Divi 요약 모듈 이미지

Blurb 모듈의 동적 내용 수정

또한 각 중복 Blurb 모듈의 동적 내용을 수정하십시오.

  • 제목 : 서비스 제목 (2,3 또는 4)
  • 본문 : 장점 설명 (2,3, 4 또는 XNUMX)
Divi 요약 모듈 규칙

Blurb 모듈에 개별적으로 테두리 추가

블 러브 모듈 1 테두리 설정

이제 그리드 디자인을 완료하기 위해 개별 수준에서 Blurb 모듈에 테두리를 추가 할 것입니다. 첫 번째 Blurb 모드를 열고 직선 테두리를 사용하십시오.

  • 오른쪽 테두리 너비 : 1px
  • 오른쪽 테두리 색상 : # ffd623
둥근 테두리 구성 divi 요약 모듈

또한 첫 번째 Blurb 모듈에 아래쪽 테두리를 추가하십시오.

  • 아래쪽 테두리 너비 : 1px
  • 하단 테두리 색상 : # 000000
divi 하단 여백 구성
블 러브 모듈 2 테두리 설정

그런 다음 두 번째 Blurb 모듈을 열고 아래쪽 테두리를 사용하십시오.

  • 아래쪽 테두리 너비 : 1px
  • 하단 테두리 색상 : # 000000
구성 테두리 모듈 요약 divi
블 러브 모듈 3 테두리 설정

세 번째 Blurb 모듈에 직선 테두리를 추가하여 그리드 디자인을 완성하십시오.

  • 오른쪽 테두리 너비 : 1px
  • 오른쪽 테두리 색상 : # ffd623
제품 혜택 표

Woo 바구니에 추가 2 열의 모듈

동적 컨텐츠

디자인에 필요한 마지막 모듈은 Woo Add to Cart 모듈입니다. 동적 콘텐츠 영역에서 "이 제품"이 선택되어 있는지 확인합니다.

  • 제품 :이 제품
카드 divi 모듈 설정에 추가

필드 설정

다음 디자인 탭으로 이동하여 필드 설정을 변경합니다.

  • 필드 배경 색상 : #ffffff
  • 필드 텍스트 색상 : # 000000
스타일 색상 모듈 구성 장바구니에 담기 divi
  • 반올림 된 필드 : 0px (모든 모서리)
  • 필드의 아래쪽 테두리 너비 : 1px
  • 필드의 아래쪽 테두리 색상 : # 000000
분할 섹션 간격 구성

버튼 설정

그런 다음 버튼의 스타일을 적절하게 지정하십시오.

  • 버튼에 사용자 정의 스타일 사용 : 예
  • 버튼 텍스트 크기 : 20 픽셀
  • 버튼 텍스트 색상 : # 000000
  • 버튼 배경 색상 : # ffd623
  • 버튼 테두리 너비 : 0px
  • 버튼 테두리 반경 : 0px
divi 버튼 디자인 구성
  • 버튼 글꼴 : Oswald
  • 버튼 글꼴 스타일 : 대문자
divi 버튼 구성
  • 상단 패딩 : 20px
  • 하단 패딩 : 20px
  • 왼쪽 패딩 : 50px
  • 오른쪽 패딩 : 50px
divi 모듈 크기 구성

간격

사용자 정의 여백 값을 추가하여 모듈 매개 변수를 완료하십시오.

  • 상단 여백 : 100px
  • 왼쪽 여백 : 5 %
divi 간격 구성

3. 테마 생성기의 수정 사항을 저장하고 결과를 미리 봅니다.

제품 페이지 템플리트 디자인을 완료하면 모든 Theme Builder 변경 사항을 저장하고 결과를 제품에 표시 할 수 있습니다!

divi 디자인 저장
divi 수정 사항 저장

측량

이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.

데모 결과

마지막 생각

이 기사에서는 다음 Divi 제품 페이지 템플릿으로 창의력을 발휘하는 방법을 보여주었습니다. 특히, 동적 제품 혜택 그리드를 포함하여 제품 페이지에 추가 혜택을 추가하는 방법을 보여 드렸습니다. 이 튜토리얼은 고급 사용자 정의 필드 플러그인과 함께 Divi를 사용하여 만들었습니다. JSON 파일을 무료로 다운로드 할 수도 있습니다! 질문이나 제안이 있으시면 아래 댓글 섹션에 댓글을 남겨주세요.

Divi를 사용하여 사이트에서 다크 모드를 구현하는 방법

Divi를 사용하여 사이트에서 다크 모드를 구현하는 방법

[vc_row content_placement = "middle"css = ". vc_custom_1508940533685 {background-color : # f8f6f6! important;}"el_id = "themeforestpro"] [vc_column width = "3/4"css = ". vc_custom_1502759058885 {margin-bottom : 0p ! Important; border-bottom-width : 0px! Important; padding-bottom : 0px! Important;} "] [vc_column_text]

Divi : 사용하기 가장 쉬운 WordPress 테마

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] 다운로드 [/vcex_button][/ vc_column][/vc_row]

다크 모드는 사용자가 눈에 부담을주지 않고 웹을 경험할 수있는 편리한 옵션으로 계속 인기를 얻고 있습니다. 현실을 직시하자면, 우리 모두는 예상보다 화면을 응시하는 데 더 많은 시간을 보내는 경향이 있으므로 사용자 경험에 추가 된 편의성 (예 : 다크 모드)은 먼 길을 갈 수 있습니다. 

운영 체제, 프로그램 및 브라우저에는 일반적으로 기본 제공되는 다크 모드 기능이 포함되어 있지만 일부 개발자는 웹 사이트에 대한 사용자 지정 다크 모드 환경을 포함하여 다른 수준으로 끌어 올립니다. 아이디어는 브랜딩 및 / 또는 디자인을 타협하지 않고도 웹 사이트가 어두운 모드에서 어떻게 보이는지 더 많이 제어하는 ​​것입니다.

이 튜토리얼에서는 플러그인없이 처음부터 Divi에서 커스텀 다크 모드 토글을 만드는 방법을 보여줍니다. 이 다크 모드 토글 기능을 사용하면 다크 모드 디자인을 제어하고 브랜드에 맞는 더 나은 사용자 경험을 얻을 수 있습니다.

시작하자!

측량

다음은이 튜토리얼에서 빌드 할 디자인의 미리보기입니다.

다음은 우리가 만들 맞춤형 어두운 모드 토글입니다.

다크 모드 전환

여기에 사전 정의 된 레이아웃 중 하나에 적용된 다크 모드의 전후가 있습니다.

그리고 여기에 글로벌 헤더에 추가 된 다크 모드 토글이 있습니다. 사이트를 탐색 할 때 밝음 / 어두움 모드가 어떻게 유지되는지 확인하십시오.

1 부 : 어두운 모드에서 스위치 빌드

이 튜토리얼의 첫 번째 부분에서는 Divi의 페이지로 다크 모드 토글을 빌드 할 것입니다. 코드로 토글이 생성되면 Divi 라이브러리에 저장하고 웹 사이트의 어느 위치 에나 추가 할 수 있습니다.

시작하려면 프런트 엔드에 Divi를 사용하여 처음부터 빌드 할 때 기본 섹션에 한 열 행을 추가합니다.

Divi 섹션

요약 모듈 추가

커스텀 토글을 만들기 위해 약간의 커스텀 CSS로 Blurb 모듈을 디자인 할 것입니다.

줄에 새 프리젠 테이션 텍스트 모듈을 추가하십시오.

내용

제목 및 본문에 대한 기본 더미 콘텐츠를 제거합니다. 그런 다음 이미지 대신 사각형 아이콘을 추가합니다.

Divi 요약 모듈

임신

디자인 설정으로 이동하여 다음을 업데이트하십시오.

  • 아이콘 색상 : # 666666
  • 이미지 / 아이콘 정렬 : 왼쪽
  • 아이콘 글꼴 크기 : 22 픽셀
Divi 아이콘 구성
  • 너비 : 50px
  • 모듈의 정렬 : 중심
  • 높이 : 25px
Divi 사이징 구성
  • 여백 : 0px 낮음
  • 둥근 모서리 : 4px
  • 테두리 너비 : 2px
  • 테두리 색상 : # 666666
Divi 테두리 구성

맞춤 CSS

디자인이 제자리에 있으면 고급 탭으로 전환하십시오. Custom CSS에서 다음 사용자 지정 CSS를 기본 요소에 추가하여 둥근 모서리의 스타일로 인해 오버플로가 가려지지 않도록합니다.

오버플로 : 표시! 중요;

그런 다음 After 요소에 다음 사용자 지정 CSS를 추가합니다.

내용 : "빛"; 위치 : 절대; 왼쪽 : -35px; 위쪽 : 0px;

클릭하면 "라이트"에서 "어두운"로 변경되는 레이블이 Blurb 모듈에 추가됩니다.

Divi 토글 버튼

본문 디자인

포스트 의사 요소 텍스트는 본문 텍스트 스타일을 상속하므로 다음과 같이 Divi 옵션을 사용하여 본문 텍스트 스타일을 추가 할 수 있습니다.

  • 바디 폰트 : Roboto
  • 본문 텍스트 색상 : # 666666
  • 본문 텍스트 크기 : 13px
  • 본문의 간격 : 1px
글꼴 토글 버튼

코드 모듈로 사용자 정의 코드 추가

다크 모드 토글을 작동하는 데 필요한 코드 (CSS / JQuery)를 추가하기 위해 코드 모듈을 사용합니다.

같은 열의 Blurb 모듈 아래에 새 코드 모듈을 만듭니다.

코드 모듈 추가

그런 다음 코드 영역에 다음 코드를 붙여 넣습니다.

/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});

사용자 정의 CSS 클래스 추가

사용자 지정 코드를 사용하려면 Blurb 모듈 또는 스위치에 사용자 지정 CSS 클래스를 추가해야합니다. 이렇게하면 블 러브가 다크 모드 토글 및 온 클릭 기능을 트리거 할 수 있습니다.

블 러브 모듈 클래스

Blurb 모듈 설정을 열고 다음과 같이 사용자 정의 CSS 클래스를 추가하십시오.

  • CSS 클래스 : et-dark-toggle
코드 css divi

어두운 모드가 가능한 클래스

또한 다크 모드 기능을 사용하려는 각 Divi 요소에 사용자 정의 CSS 클래스를 추가해야합니다. 요소에 CSS 클래스가 있으면 해당 요소는 다크 모드가 활성화 된 후 추가 한 코드에서 사용자 정의 "다크 모드"CSS를 상속합니다. 이 방법을 사용하면 일부 요소가 다크 모드에서 스타일링이 필요하지 않을 수 있으므로 다크 모드 디자인을 더 잘 제어 할 수 있습니다.

먼저 어두운 모드 토글이 포함 된 섹션에 어두운 모드를 추가 할 수 있습니다.

섹션 매개 변수를 열고 다음 CSS 클래스를 추가하십시오.

  • CSS 클래스 : et-dark-mode-capable
CSS 선택기 Divi 섹션

2 부 : Divi 페이지에 어두운 모드 기능 추가

이제 CSS 코드와 클래스가 준비되었으므로 Divi의 전체 페이지에 다크 모드 기능과 디자인을 적용 할 준비가되었습니다. 이를 위해 모바일 앱 랜딩 페이지의 미리 만들어진 레이아웃을 사용합니다.

레이아웃을 추가하려면 비주얼 빌더 하단의 설정 메뉴를 열고 새 레이아웃 추가 아이콘을 클릭합니다.

그런 다음 사전 정의 된 레이아웃 탭에서 모바일 앱의 랜딩 페이지 레이아웃을 선택합니다.

"기존 콘텐츠 교체"옵션이 선택되지 않았는지 확인합니다. 다크 모드 토글로 섹션을 지우고 싶지 않습니다.

divi 1 레이아웃 선택

다크 모드 스타일은 "capable and-dark-mode"CSS 클래스가있는 요소에만 적용되므로 다른 방식으로 페이지에 추가하도록 선택할 수 있습니다.

  1. CSS 클래스를 페이지의 각 요소에 개별적으로 추가 할 수 있습니다.
  2. CSS 클래스를 페이지 전체의 요소로 확장 할 수 있습니다 (수동으로 수행하는 것보다 빠릅니다). 예를 들어 상단 섹션의 섹션 설정을 열고 해당 섹션의 CSS 클래스를 페이지의 모든 섹션으로 확장 할 수 있습니다.
  3. CSS 클래스를 요소의 전역 기본값에 추가 할 수 있습니다. 이것은 CSS 클래스를 모든 사이트 전체 요소에 적용하여 사이트 전체에 다크 모드 기능을 추가합니다. 예를 들어 섹션 설정을 열고 전역 기본 아이콘을 클릭하여 전역 섹션 기본값을 변경할 수 있습니다. 그런 다음 CSS 클래스를 추가하고 사이트의 모든 섹션에 대해 CSS 클래스로 등록 할 수 있습니다.

페이지 요소에 CSS 클래스 추가

이 예에서는 CSS 클래스를 섹션 및 텍스트 모듈의 전역 기본값에 추가하여 페이지 요소를 업데이트합니다. 또한 진행하면서 다른 페이지 요소에 몇 가지 사항을 추가 할 것입니다.

모든 섹션

모든 섹션에 CSS 클래스를 추가하려면 다크 모드 토글이 포함 된 상단 섹션의 설정을 엽니 다. 그런 다음 섹션 전역 기본값을 변경하고 다음 CSS 클래스를 전역 기본값 섹션에 추가합니다.

  • CSS 클래스 : et-dark-mode-capable

모든 전문 섹션

또한 전문화 된 섹션에서 CSS 클래스를 전역 기본값에 추가하십시오.

모든 전문 섹션에 추가

텍스트 모듈

그런 다음 페이지에서 텍스트 모듈 중 하나의 설정을 열고 동일한 CSS 클래스를 전역 텍스트 기본값에 추가합니다.

텍스트 모듈에 추가

결과를 테스트하려면 라이브 페이지로 이동하여 페이지 상단의 어두운 모드 토글을 클릭하십시오.

클리어 모드에서 페이지 모양은 다음과 같습니다.

클리어 모드

그리고 다음은 어두운 모드에서 페이지 모양입니다.

어두운 모드

추가 자료

관심을 가질만한 다른 리소스는 다음과 같습니다.

마지막 생각

Divi 사이트에 커스텀 다크 모드 토글을 장착하면 사용자 경험을 향상시키고 눈을 즐겁게하고 편안하게하는 완전히 새로운 디자인을 만들 수 있습니다. 도움이 되셨기를 바랍니다.