Divi 평가 모듈을 고정시키는 방법

Divi로 레이아웃을 구축할 때 흥미로운 점 중 하나는 디자인에 접근할 수 있는 다양한 방법입니다. 콘텐츠를 포함하는 모듈이 좋은 예입니다. 콘텐츠 옵션을 사용하거나 다른 모듈과 함께 사용하여 고유한 디자인을 만들 수 있습니다. 예를 들어, 모듈의 조합을 통해 끈적한 요소를 만들 수 있습니다. 이 기사에서는 평가 콘텐츠가 정상적으로 스크롤되도록 하면서 Divi 평가 모듈을 고정시키는 방법을 살펴보겠습니다.

시사

다음은 우리가 무엇을 만들지 살펴보겠습니다. 이 디자인의 모바일 버전은 고정되지 않으므로 미리 보기용으로 데스크톱 버전만 표시합니다.

My Divi 사용후기 스티커 모듈 예제

예를 들어 Divi 내에서 사용할 수 있는 무료 Electrical Services Layout Pack의 랜딩 페이지를 사용하고 있습니다. 이 페이지는 레이아웃 하단 근처에 이미 평가 섹션이 있지만 완전히 다른 디자인입니다. 해당 섹션의 후기를 대체하고 새로운 디자인의 스타일을 반영하겠습니다. 제목은 유지하지만 설정을 표시하기 위해 다시 만들겠습니다.

이 튜토리얼에서는 두 개의 모듈을 사용하여 평가를 작성하겠습니다. 평가 모듈을 사용하여 이미지, 이름, 직함 및 회사를 표시하겠습니다. 추천 콘텐츠의 경우 텍스트 모듈을 사용하겠습니다. 텍스트 모듈은 정상적으로 스크롤됩니다. 평가 모듈은 평가가 끝날 때까지 사용자가 스크롤할 때 그대로 유지됩니다. 그런 다음 평가 모듈이 텍스트 모듈과 함께 스크롤됩니다.

스티커 평가 섹션 제목 만들기

먼저 새 섹션 을 만들고 단일 열 행 을 추가합니다. 이 행에는 중앙에 표시될 제목이 있습니다.

제목 텍스트 모듈

다음으로 제목에 대한 텍스트 모듈 을 추가합니다.

그런 다음 텍스트 모듈의 설정 을 엽니다. 텍스트를 제목 3으로 변경하고 본문 콘텐츠 편집기에서 제목을 추가합니다.

• 텍스트: 제목 3
• 내용: 행복한 고객

디자인 설정

다음으로 디자인 탭 으로 이동합니다. 텍스트 정렬 을 가운데로 설정합니다.

• 텍스트 정렬: 가운데

제목 텍스트 로 H3을 선택합니다. 글꼴로 Chakra Petch를 선택합니다. Weight를 Bold로, Color를 검정색으로 설정합니다.

• 글꼴: 차크라 페치
• 무게: 굵게
• 색상: #000000

마지막으로 텍스트 크기에 대한 태블릿 아이콘 을 선택하고 바탕 화면 크기를 50px, 태블릿 크기를 28px, 전화 크기를 20px로 설정합니다. 모듈의 설정을 닫습니다.

• 크기: 데스크탑 50px, 태블릿 28px, Phone20px

첫 번째 평가에 대한 행 추가

그런 다음 제목 아래 에 2/3, 1/3 행을 추가합니다 . 이 행에는 첫 번째 평가가 있습니다.

행 설정

디자인 탭 을 열고 열 높이 균등화 를 활성화합니다.

• 열 높이 균등화: 예

열 설정

행의 설정으로 첫 번째 열의 설정을 엽니다.

테두리 스타일 까지 아래로 스크롤하고 위쪽 테두리 스타일을 선택합니다. 너비를 2px로 변경하고 색상을 #ffd600으로 변경합니다. 행 설정을 닫습니다. 이렇게 하면 우리가 교체한 원본 평가와 같이 평가 위에 노란색 선이 추가됩니다.

• 테두리 스타일: 상단
• 상단 테두리 색상: #ffd600
• 너비: 2px

평가 텍스트 모듈

다음으로 추천 콘텐츠에 대한 텍스트 모듈 을 추가합니다. 노란색 선 아래의 왼쪽 열에 텍스트 모듈을 추가합니다.

콘텐츠 편집기에 평가 내용을 입력합니다.

다음으로 디자인 탭 으로 이동합니다. 글꼴로 Chakra Petch를 선택합니다. Weight를 Bold로, Color를 Black으로 설정합니다. 텍스트 크기에서 데스크탑은 30px, 태블릿은 14px를 선택합니다. 전화 설정은 자동으로 태블릿을 따르므로 변경할 필요가 없습니다. 텍스트 줄 높이를 2em으로 설정합니다. 이것은 주의를 끌 거대한 인쇄 평가를 만듭니다.

• 글꼴: 차크라 페치
• 무게: 굵게
• 검정색
• 크기: 데스크탑 30px, 태블릿 14px
• 줄 높이: 2em

텍스트 정렬 까지 아래로 스크롤하고 가운데를 선택합니다. 텍스트 모듈의 설정을 닫습니다.

• 정렬: 중앙

평가 모듈 설정

다음으로 오른쪽 열에 평가 모듈 을 추가합니다. 이것은 고정되어 그 사람의 이름, 회사 이름, 직위 및 이미지를 표시합니다.

콘텐츠 설정

모듈의 설정 을 열고 평가 내용을 추가하십시오. 본문 내용을 비워 둡니다. 이를 위해 텍스트 모듈을 사용했습니다.

• 작가
• 직위
• 회사
• 영상

배경 으로 스크롤하여 흰색으로 설정합니다.

• 배경: #ffffff

그런 다음 핀 아이콘 을 선택합니다. 이것은 모듈이 고정될 때 배경의 색상을 변경할 수 있는 고정 버전의 배경입니다. 배경색으로 검정색을 선택합니다.

• 스티커 배경색: #000000

견적 아이콘

다음으로 디자인 탭 으로 이동합니다. 견적 아이콘 색상으로 #ffd600을 선택하십시오.

• #ffd600

영상

이미지 까지 아래로 스크롤하고 너비와 높이를 150px로 설정합니다. 둥근 모서리를 0px로 변경합니다.

• 이미지 너비: 150px
• 둥근 모서리: 0px

텍스트

텍스트 정렬 까지 아래로 스크롤하고 가운데 옵션을 선택합니다. 이것은 저자의 이름, 직위 및 회사 이름 텍스트를 가운데에 맞춥니다.

• 텍스트 정렬: 가운데

저자 텍스트

작성자 텍스트 아래에서 글꼴에 대해 Chakra Petch를 선택하고 정렬에 대해 가중치를 Bold and Centered로 설정합니다. 일반 색상은 검정색을 선택하세요. 핀 아이콘을 선택하고 고정 색상을 #ffd600으로 설정합니다. 바탕 화면 크기를 20px로, 태블릿 크기를 14px로 설정합니다.

• 글꼴: 차크라 페치
• 일반 텍스트 색상: 검정
• 고정된 텍스트 색상: #ffd600
• 크기: 20px 데스크탑, 14px 태블릿

위치 텍스트

그런 다음 텍스트 위치 로 스크롤합니다. 글꼴로 엑소를 선택합니다. 일반 텍스트 색상으로 검정색을 선택합니다. 핀 아이콘을 클릭하고 고정된 색상을 흰색으로 설정합니다.

• 글꼴: 엑소
• 일반 텍스트 색상: #000000
• 고정된 텍스트 색상: #ffffff

회사 텍스트

회사 텍스트 까지 아래로 스크롤합니다. 글꼴로 엑소를 선택합니다. 일반 텍스트 색상으로 검정색을 선택합니다. 핀 아이콘을 클릭하고 고정된 색상을 흰색으로 설정합니다.

• 글꼴: 엑소
• 일반 텍스트 색상: #000000
• 고정된 텍스트 색상: #ffffff

박스 섀도우

Box Shadow 로 스크롤하고 첫 번째 옵션을 선택합니다.

• 상자 그림자: 첫 번째 그림자 옵션

스크롤 효과

마지막으로 고급 탭으로 이동하여 스크롤 효과 까지 아래로 스크롤합니다. 데스크탑을 선택하고 고정 위치로 고정을 선택합니다. 고정 상단 오프셋을 50px로 설정합니다. 하단 고정 요소를 기둥으로 설정합니다. 이것은 모듈에 고정 방법과 위치를 알려줍니다.

• 고정 위치: 상단에 고정
• 고정 상단 오프셋: 50px
• 하단 접착 요소: 기둥

고정 위치에 대해 태블릿 아이콘 을 선택하고 고정하지 않음을 선택합니다. 이렇게 하면 모듈이 태블릿 및 전화 장치에 달라붙는 것을 방지할 수 있습니다. 모듈의 설정을 닫습니다.

• 고정 위치: 고정하지 마십시오

이제 스크롤하면 평가 모듈이 화면 상단에 고정되고 색상이 변경됩니다.

모듈이 열의 맨 아래에 정렬되면 열과 함께 스크롤됩니다.

첫 번째 평가 행 복제

다음 으로 첫 번째 행을 복사하고 변경하여 두 번째 행을 만듭니다. 행 위로 마우스를 가져간 다음 복제 아이콘을 클릭합니다.

마지막으로, 텍스트 및 평가 모듈 을 한 번에 하나씩 열고 이전 콘텐츠 를 새 평가 콘텐츠로 바꿉니다. 변경을 완료했으면 모듈을 닫고 페이지를 저장하십시오. 복제 프로세스를 반복하여 더 많은 평가를 추가합니다. 이제 눈에 띄고 멋지게 보이는 두 개의 평가가 있는 흥미로운 끈적끈적한 평가 섹션이 있습니다.

결과

마무리 생각

Divi 평가 모듈을 고정시키는 방법을 살펴보았습니다. Divi의 설정은 모든 요소를 ​​고정시킬 수 있습니다. 콘텐츠를 위한 텍스트 모듈과 지원 정보를 위한 평가 모듈과 같은 모듈을 함께 사용하면 흥미로운 디자인을 만들 수 있습니다. 여기에서 만든 평가는 Divi의 모듈과 고정 설정을 함께 사용하는 방법의 한 예일 뿐입니다.

우리는 당신의 의견을 듣고 싶습니다. Divi 평가판 모듈 고정 옵션을 사용합니까? 의견에 귀하의 경험에 대해 알려주십시오.