배경 그라디언트를 사용하시겠습니까? Divi 호버링하면 바뀌나요?
웹사이트 구축은 모든 세부 사항이 정확한지 확인하는 것입니다. 디자인의 작은 세부 사항에주의를 기울이면 디자인의 품질이 빠르게 향상됩니다. 사이트 웹.
새로운 호버 옵션으로 Divi, 작은 상호 작용을 쉽게 추가할 수 있습니다. 사이트 웹. 호버 옵션은 거의 모든 설계 매개변수에 적용됩니다. 예를 들어 호버에서 그라디언트 배경을 간접적으로 변경하여 멋진 전환을 만들 수 있습니다.
이것이 바로 이 튜토리얼에서 보여드릴 내용입니다. 그라디언트 전환을 만드는 것 외에도 모든 유형의 작업에 자유롭게 사용할 수 있는 놀라운 디자인 예제를 처음부터 만들 것입니다. 사이트 웹 당신이 만드는.
가자!
측량
튜토리얼을 시작하기 전에 최종 결과를 살펴보겠습니다.
Divi로 디자인을 시작해 봅시다.
또한보십시오: Divi: 반응형 아코디언 슬라이더를 만드는 방법
섹션 1 추가
간격
가장 먼저 해야 할 일은 새 페이지를 만들거나 기존 페이지를 열고 새 일반 섹션을 추가하는 것입니다. 설정을 열고 사용자 정의 상단 및 하단 여백을 추가하십시오.
- 패딩(상단 및 하단): 100px
1행 추가
기둥의 구조
다음 열 구조를 사용하여 새 행을 계속 추가합니다.
1열의 기본 배경색(데스크톱)
아직 모듈을 추가하지 않고 행 설정을 열고 열 1에 다음 기본 배경색을 추가합니다.
- 배경(데스크톱): #e7ffa0
마우스 오버 시 열 1 배경색
마우스를 가져갈 때 이 배경색을 변경합니다.
- 배경: #00020c
열 1 배경 그라데이션
또한 열 1에 그라디언트 배경색을 추가합니다. 완전히 투명한 색상을 사용하고 있습니다. 이 색상을 사용하면 배경 색상이 표시되고 마우스를 가져가면 색상이 바뀝니다.
- 색상 1(20%): rgba(255,255,255,0)
- 색상 2(100%): rgba(16,0,201,0.8)
- 그라디언트 유형: 선형
- 기울기 방향: 50도
열 2 배경색
또한 2열에 배경색을 추가합니다.
- 배경: #ffffff
크기 조정
그런 다음 탭으로 이동하십시오. 디자인 옵션에서 크기 설정을 변경하십시오. 크기 조정.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 너비: 2000px
간격
간격 설정에서 사용자 정의 패딩 값을 추가하여 계속하십시오.
- 패딩(상단 및 하단): 0px
간격(2열)
- 패딩(상단 및 하단): 6vw(데스크탑), 120px(태블릿 및 휴대폰)
- 패딩(좌우): 5vw(데스크탑), 80px(태블릿), 50px(전화)
박스 섀도우
또한 행에 미묘한 상자 그림자를 제공합니다.
- 상자 그림자 흐림 강도: 100px
- 상자 그림자 확산 강도: -10px
전학
마지막으로 탭에서 전환 시간을 늘려 부드러운 그라데이션 배경 전환을 만듭니다. Advnaced.
- 전환 시간: 1100ms
열 1에 이미지 모듈 추가
이미지 업로드
이제 모듈을 추가할 시간입니다! 첫 번째 열에 이미지 모듈을 추가합니다.
그라데이션 배경
이 이미지 모듈의 배경 설정으로 이동하여 그라데이션 배경을 추가합니다. 우리는 다시 완전히 투명한 색상을 사용하여 다른 색상이 보일 수 있도록 합니다.
- 색상 1(57%): rgba(50,217,255,0.66)
- 색상 2(100%): rgba(255,255,255,0)
- 그라디언트 유형: 원형
- 그라데이션 위치: 상단
간격
그런 다음 모듈에 사용자 지정 상단 패딩을 추가합니다.
- 패딩(상단): 14vw
열 2에 텍스트 모듈 추가
콘텐츠 추가
두 번째 열로 넘어 갑시다! 우리에게 필요한 첫 번째 모듈은 제목을 위한 텍스트 모듈입니다. 계속해서 추가하세요. 내용 선택한 제목.
헤더 텍스트 설정
그런 다음 헤더 텍스트 설정으로 이동하여 일부 변경을 수행합니다.
- 글꼴: Abril Fatface
- 텍스트 색상: #000000
- 텍스트 크기: 4 vw(데스크톱), 60px(태블릿), 40px(휴대폰)
열 2에 두 번째 텍스트 모듈 추가
콘텐츠 추가
우리에게 필요한 두 번째 모듈은 또 다른 텍스트 모듈입니다. 일부 추가 내용 선택.
텍스트 설정
그런 다음 텍스트 설정으로 이동하여 텍스트 정렬을 변경합니다.
- 텍스트 정렬: 양쪽 맞춤
크기 조정
또한 크기 설정에서 너비를 조정합니다.
- 너비: 73%(데스크톱), 100%(태블릿 및 휴대폰)
간격
마지막으로 모듈에 사용자 지정 위쪽 및 아래쪽 여백을 추가하여 공간을 만듭니다.
- 여백(상단 및 하단): 2,5 vw(데스크톱), 50픽셀(태블릿 및 휴대폰)
2열에 버튼 모듈 추가
설명 추가
두 번째 열에 필요한 세 번째이자 마지막 모듈은 Button 모듈입니다. 원하는 사본을 추가하십시오.
버튼 설정
그런 다음 버튼 설정을 변경합니다.
- 버튼에 사용자 정의 스타일 사용: 예
- 버튼 텍스트 크기: 1,2 vw(데스크톱), 14픽셀(태블릿 및 휴대폰)
- 버튼 텍스트 색상: #ffffff
- 그라디언트 스톱 1(0%): #9ea6ff
- 그라디언트 정지점 2(100%): rgba(16,0,201,0.8)
- 조향: 78deg
- 버튼 테두리 너비: 0픽셀
- 테두리 반경: 30px
- 문자 간격: -1px
- 글꼴 두께: 매우 굵게
- 글꼴 스타일: TT -(대문자)
간격
또한 사용자 정의 채우기 값을 추가하십시오.
- 패딩(상단 및 하단): 10px
- 패딩(좌우): 40px
박스 섀도우
그리고 버튼에 미묘한 상자 그림자를 적용합니다.
- 상자 그림자 흐림 강도: 40px
섹션 2 추가
간격
이제 첫 번째 섹션을 완료했으므로 다음 섹션으로 넘어갑니다. 다음 사용자 지정 패딩 값을 사용하여 새 일반 섹션을 추가합니다.
- 패딩(상단 및 하단): 100px
두 개의 열에 행 추가
기둥의 구조
다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.
열 1 배경
아직 모듈을 추가하지 않고 행 설정을 열고 열 1에 다음 배경색을 추가하십시오.
- 배경: #ffffff
2열 배경(데스크톱)
열 2에 다음 배경색을 추가합니다.
- 배경(데스크톱): #ffffff
마우스 오버 시 열 2 배경색
그리고 마우스를 가져갈 때 이 배경색을 변경합니다.
- 배경(호버): #3d02ff
2열 그라데이션 배경
또한 열에 그라데이션 배경을 추가합니다.
- 그라디언트 정지점 1(20%): rgba(255,255,255,0)
- 그라디언트 스톱 2(100%): #ff7700
크기 조정
그런 다음 크기 설정으로 이동하여 몇 가지를 변경합니다.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 너비: 2000픽셀
간격(선)
간격 설정에서 사용자 정의 패딩 값을 추가하여 계속하십시오.
- 패딩(상단 및 하단): 0px
간격(1열)
열 1 간격 설정 변경
- 패딩(상단 및 하단): 6vw(데스크탑), 120px(태블릿 및 휴대폰)
- 패딩(좌우): 5vw(데스크탑), 80px(태블릿), 50px(전화)
박스 섀도우
또한 이 행에 미묘한 상자 그림자를 추가합니다.
- 상자 그림자 흐림 강도: 100px
- 상자 그림자 확산 강도: -10px
전학
마지막으로 탭에서 전환 시간을 늘려 부드러운 전환을 만듭니다. Advnaced.
- 전환 시간: 1100ms
라인 1 모듈 복제
이전 섹션에서 필요한 모든 모듈이 이미 있으므로 이를 복제하여 시간을 절약할 것입니다.
행 2 열에 중복 배치
다음과 같이 새 줄에 복제본을 배치합니다.
편집 내용
반드시 내용 귀하의 모듈 중.
버튼 그라데이션 배경 변경
또한 버튼 배경 그라디언트를 변경합니다.
- 그라디언트 정지 0%: #ff653f
- 그라디언트 스톱 100%: #0066ff
- 방향: 39deg
이미지 변경
이미지를 교체합니다.
배경 그라데이션 변경
마지막으로 Image 모듈의 배경 그라데이션을 수정합니다.
- 그라디언트 정지 0%: rgba(0,2,12,0.66)
- 그라디언트 정지 57%: rgba(255,255,255,0)
측량
이제 모든 단계를 거쳤으므로 최종 결과를 마지막으로 살펴보겠습니다.
지금 DIVI를 다운로드하세요!!!
결론
이 기사에서는 다음을 사용하여 마우스를 올리면 그라데이션 배경을 변경하는 방법을 보여주었습니다. Divi. 우리는 또한 이 접근 방식을 사용하는 훌륭한 예제를 처음부터 만들었습니다.
귀하가 만드는 모든 유형의 웹사이트에 디자인과 아트워크를 자유롭게 사용할 수 있습니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
