Divi: 헤더에 대한 간단한 평가 슬라이더를 만드는 방법

Divi 헤더에 간단한 추천 슬라이더를 삽입하시겠습니까?

사이트에 평가를 추가하는 것은 비즈니스(또는 브랜드)에 대한 신뢰를 구축하고 사용자와 신뢰를 구축하는 효과적인 방법입니다. 방문자. 

평가 슬라이더는 한 곳에서 평가를 보여주는 편리한 도구입니다. 이를 염두에 두고, 사용자가 귀하의 사이트를 방문할 때 이 평가가 가장 먼저 보게 되는 것 중 하나가 되도록 압축된 평가 슬라이더를 헤더에 추가하는 것이 합리적입니다. 웹 사이트.

이 튜토리얼에서, 우리는 당신의 헤더에 짧은 평가를 보여주기 위해 컴팩트 평가 슬라이더를 만드는 방법을 보여줄 것입니다 사이트 웹. 

이를 위해 Divi Slider 모듈을 재미있고 독특한 방식으로 수정해 보겠습니다.

시작하자!

그러나 에 대한 가이드를 발견하기 전에 Divi, 세계 최고의 WordPress 테마 및 사용하기 가장 쉬운

측량

다음은 Divi의 Slider 모듈을 사용하여 구축할 컴팩트한 평가 슬라이더입니다.

그리고 여기에 동일한 평가 슬라이더가 전역 헤더에 추가되었습니다.

그리고 모바일에서는 이렇게 생겼습니다.

Divi Builder로 새 페이지 만들기

시작하려면 다음을 수행해야 합니다.

WordPress 대시보드에서 페이지> 새로 추가 새 페이지를 만듭니다.

이해하기 쉬운 제목을 지정하고 클릭하십시오. Divi Builder 사용

그런 다음 클릭 건물 시작 (처음부터 구축)

그 후에 Divi에서 디자인을 시작할 빈 캔버스가 생깁니다.

Divi에서 컴팩트 평가 슬라이더를 만드는 방법

새 행 및 슬라이더 모듈 추가

시작하려면 섹션에 XNUMX열 행을 추가하십시오.

그런 다음 Slider 모듈을 라인에 추가합니다.

슬라이드 편집

슬라이더 설정에서 탭 아래의 기본 두 번째 슬라이드를 제거합니다. 내용을 클릭한 다음 을 클릭하여 나머지 슬라이드의 설정을 변경합니다.

슬라이드 콘텐츠

탭 아래 내용 슬라이드 설정에서 다음을 업데이트하십시오.

• 제목: “Donec solicitudin molestie malesuada. Vivamus suscipit totortor eget.
• 버튼: 모두 읽기
• 몸: — 타티아나 가겔만

완료되면 슬라이드 설정을 저장합니다.

읽기 : Divi: 배경 마스크 설정 및 패턴 변형 옵션 사용 방법

슬라이더 설정 업데이트

슬라이드 복제 및 컨트롤 숨기기

첫 번째 슬라이드를 업데이트한 후 내용, 이 슬라이드를 복제하여 하나 이상의 추가 슬라이드를 만듭니다.

그런 다음 옵션 그룹 아래 요소, 다음을 업데이트하여 슬라이더 컨트롤을 숨깁니다.

• 제어 표시: 아니요

모든 슬라이드의 배경 업데이트

다음으로 모든 슬라이드에 사용할 배경을 추가합니다.

배경을 추가하려면 다음을 업데이트하세요.

• 배경 그라데이션:
  • 그라디언트 정지 0%: #000000
  • 그라디언트 스톱 100%: #000000

• 배경 이미지 :
  • 크기: 적합
  • 위치: 중앙 왼쪽
  • 혼합: 광도

슬라이더 설정

탭 아래 디자인, 다음을 업데이트합니다.

표지

• 배경 오버레이 사용: 예
• 배경 오버레이 색상: rgba(0,0,0,0.7)

제목 텍스트

• 제목 :
  • 표제 수준: H4
  • 글꼴: Josefin Sans
  • 글꼴 두께: 중간
  • 텍스트 정렬: 왼쪽
  • 텍스트 크기: 16px(데스크톱 및 태블릿), 14px(전화)
  • 라인 높이: 1,5em

본문 텍스트

• 신체 :
  • 글꼴: Josefin Sans
  • 텍스트 정렬: 왼쪽
  • 텍스트 색상: #aaaaaa
  • 문자 간격: 0,05em

단추

• 버튼에 사용자 정의 크기 사용: 예
• 버튼 :
  • 텍스트 크기: 1em
  • 텍스트 색상: 기본값(데스크탑), #000(호버)
  • 배경색(데스크탑): rgba(255,255,255,0.19)
  • 배경색(호버): #ffffff
  • 테두리 너비: 0픽셀
  • 문자 간격: 0,05em
  • 글꼴: Josefin Sans
  • 여백: 0px(상단 및 하단)
  • 패딩: 0px(상단 및 하단), 0,6em(좌우)

자동 채우기 및 애니메이션

다음으로 슬라이더 간격을 작게 업데이트하고 원하는 자동 애니메이션 속도를 설정합니다.

• 여백: 0px(상단 및 하단)
• 패딩: 1em(상단 및 하단), 5%(좌우)
• 자동 애니메이션: 켜짐
• 자동 애니메이션 속도: 3500

맞춤 CSS

탭 아래 Advnaced, 다음 사용자 정의 CSS를 추가하여 각 슬라이더 요소(제목, 버튼 및 화살표)의 스타일을 업데이트합니다.

슬라이드 제목

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

이렇게 하면 슬라이드 제목이 작은 화면에서 줄 바꿈을 만들지 않습니다.

슬라이드 버튼

position:absolute;
bottom: 1em;
right: 6%;

이렇게 하면 버튼이 제목 아래와 슬라이드 오른쪽에 위치하도록 절대 위치를 지정하여 슬라이더를 더욱 컴팩트하게 만듭니다.

화살표 드래그

font-size: 30px;
margin-top: -15px;

슬라이더의 작은 크기를 수용하기 위해 슬라이더 탐색 화살표를 더 작게 만듭니다.

팁: 더 부드러운 슬라이드 전환을 위해 동일한 배경색을 열에 추가하십시오.

이렇게 하려면 슬라이더의 상위 열 설정을 열고 다음 배경색을 추가합니다.

• 배경: #000000

슬라이드에 작성자 배경 이미지 추가

슬라이드에 작성자 배경 이미지를 포함하려면 각 슬라이드에 배경 이미지를 추가하면 됩니다.

슬라이드에 배경 이미지를 추가하면 배경 이미지는 슬라이더(슬라이드 아님) 설정 아래에 이미 있는 스타일을 상속합니다.

결과

최종 결과를 확인하십시오.

헤더 템플릿에 컴팩트 평가 슬라이더 추가

Divi 라이브러리에 모듈 저장

컴팩트한 평가 슬라이더를 전역 헤더에 추가하기 전에 먼저 모듈을 Divi 라이브러리에 등록해야 합니다. 

슬라이더 모듈 위로 마우스를 가져간 다음 " 라이브러리에 추가". 그런 다음 레이아웃에 이름을 지정하고 버튼을 클릭하십시오 " 라이브러리에 저장".

헤더 템플릿에 간결한 평가 모듈 레이아웃 추가

사용자 정의 헤더 편집

새로운 평가 슬라이더 모듈이 라이브러리에 저장되면 사용자 정의 헤더에 추가할 준비가 된 것입니다.

액세스 권한 Divi > 테마 빌더, 다음을 수정할 수 있는 아이콘을 클릭하십시오 " 맞춤 헤더".

라이브러리에서 저장된 평가 슬라이더 모듈 삽입

헤더 레이아웃 편집기에서 클릭하여 표시하려는 곳에 컴팩트 평가 슬라이더 모듈을 추가합니다.

모드에서 "삽입 모듈", 탭 선택 "라이브러리에서 추가". 라이브러리에서 이전에 저장한 압축된 평가 슬라이더를 찾아 선택합니다.

로드되면 변경 사항을 저장합니다.

또한보십시오: Divi: 전체 너비 헤더 모듈을 전체 화면으로 표시하는 방법

최종 결과

아래는 글로벌 헤더에 추가된 평가 슬라이더입니다.

여기에 저자 배경 이미지가 없는 평가 슬라이더가 있습니다.

그리고 모바일에서는 이렇게 생겼습니다.

지금 DIVI를 다운로드하세요!!!

결론

컴팩트한 추천 슬라이더는 무엇이든 헤더에 새로 추가될 수 있습니다. 사이트 웹 웹사이트에서 가장 눈에 띄는 위치에서 서비스의 신뢰성을 높이기 위해 노력하고 있습니다. 

리디렉션하는 데 사용할 수도 있습니다. 방문자 전환율을 높이기 위해 평가 페이지 또는 판매 페이지로. 이것이 다음 Divi 프로젝트에서 유용하기를 바랍니다.

우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.

상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.

주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.

그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.

...