사람들은 인터랙티브한 디자인 웹사이트를 선호합니다. Divi 는 사용자 상호 작용을 통해 변경될 수 있는 모든 것을 디자인할 수 있는 기회를 제공하며 이러한 디자인은 현재 매우 인기가 있습니다. 오늘 우리는 시작 부분에 간단한 제목이 있는 그리드 레이아웃이 있고 그리드 블록 위로 마우스를 가져가면 스타일이 변경되고 배경 이미지가 떠 있는 Divi 로 매끄러운 호버 그리드를 디자인하는 방법을 단계별로 볼 것입니다.
그러니 지체 없이 시작합시다.
디자인 미리보기
오늘의 튜토리얼을 시작하기 전에 디자인 결과가 어떻게 보이는지 봅시다.
1부: 구조 만들기
섹션 설정
배경색
새로운 디자인을 하기 위해 Divi Builder로 이동하면 처음에 섹션이 자동으로 생성됩니다. 해당 섹션의 설정을 다음과 같이 변경해 보겠습니다.
놀라운 웹사이트 만들기
최고의 무료 페이지 빌더 Elementor와 함께
지금 시작- 배경색: #ffffff
추가: 섹션에 행 1
열 구조
이제 섹션에 4열 행을 추가합니다.
사이징
별도의 모듈을 추가하지 않고 설정에서 이 행의 크기를 변경합니다.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 폭: 100%
- 최대 너비: 100%
간격
이제 필요한 간격 값을 추가합니다.
- 상단 패딩: 0px
- 하단 패딩: 0px
국경
이 행에 테두리와 색상을 추가하여 행의 디자인 섹션의 외부 작업을 완료합니다.
- 상단 및 하단 테두리 너비: 1px
- 상단 및 하단 테두리 색상: #d3d3d3
열 1 설정
호버에 대한 그라데이션 배경
이제 열 1의 설정에 대해 작업하겠습니다. 먼저 그라디언트 배경을 추가하겠습니다.
- 색상 1: rgba(255,255,255,0)
- 색상 2: #000000
- 그라디언트 유형: 선형
- 시작 위치: 30%
호버 배경 이미지
이제 호버링 시 노출될 배경에 이미지를 추가합니다.
- 배경 이미지 크기: 표지
- 배경 이미지 위치: 중앙
CSS 클래스
지금은 고급 탭에 CSS 클래스를 추가하여 열 설정을 완료하겠습니다.
- CSS 클래스: hover-column
열 1: 텍스트 모듈 1 추가
H3 콘텐츠
이제 열 1에 텍스트 모듈을 추가합니다. 여기에서 원하는 텍스트를 입력할 수 있습니다.
H3 콘텐츠 설정
디자인 탭의 제목 텍스트 섹션에서 다음 설정을 지정합니다. 제목 3 글꼴: Oswald
제목 3 글꼴 두께 : 초경량
제목 3 글꼴 스타일 : 대문자
제목 3 텍스트 색상 : #0a0a0a
제목 3 텍스트 크기 :
- 데스크탑: 3vw
- 정제: 7vw
- 전화: 14vw
제목 3 글자 간격 : -2px
사이징
크기 조정 섹션의 값을 변경하여 다양한 화면 크기에 맞게 너비를 조정해 보겠습니다.
너비:
- 데스크탑: 44%
- 태블릿: 48%
- 전화: 50%
간격
간격을 약간 조정해 보겠습니다. 이 값은 이 자습서에서 사용하는 제목에 적합합니다. 제목을 변경해야 할 수도 있습니다.
- 하단 여백: 25vh
- 탑 패딩: 5%
- 하단 패딩: 5%
- 왼쪽 패딩: 3%
- 오른쪽 패딩: 0%
국경
이 텍스트 모듈에 테두리를 추가하십시오.
- 오른쪽 및 아래쪽 테두리 너비: 1px
- 오른쪽 및 아래쪽 테두리 색상: #d3d3d3
CSS 클래스
CSS 클래스를 추가하여 이 텍스트 모듈의 설정을 완료합니다.
- CSS 클래스: hover-title
열 2: 텍스트 모듈 2 추가
콘텐츠 추가
이전 텍스트 모듈 바로 아래에 텍스트 모듈을 추가하고 이 섹션이나 선택한 항목에 대해 작성하십시오.
텍스트 설정
텍스트 모듈의 디자인 탭으로 이동하여 지시에 따라 값을 변경합니다. 텍스트 글꼴: Karla
텍스트 색상 : #ffffff
텍스트 크기 :
- 데스크탑: 0.8vw
- 정제: 2vw
- 전화: 3.6vw
텍스트 줄 높이 : 2.2em
간격
이제 텍스트에 약간의 간격을 추가하십시오.
- 하단 패딩: 10%
- 왼쪽 패딩: 9%
- 오른쪽 패딩: 9%
CSS 클래스
마지막으로 CSS 클래스를 추가하여 모듈 설정을 닫습니다.
- CSS 클래스: 호버 텍스트
열 2: 버튼 모듈 추가
텍스트 추가
다음으로, 이전 텍스트 모듈 아래에 버튼 모듈을 추가하고 선택에 따라 일부 사본을 추가하십시오.
버튼 설정
아래에 언급된 값으로 버튼 설정을 변경하십시오.
- 버튼에 사용자 정의 스타일 사용: 예
- 버튼 텍스트 크기: 데스크탑: 1vw, 태블릿: 2.5vw 및 전화: 4vw
- 버튼 테두리 너비: 0px
- 버튼 테두리 반경: 0px
- 버튼 글꼴: Karla
- 버튼 아이콘 표시: 예
- 버튼 아이콘 배치: 왼쪽
- 버튼에 대한 호버 시 아이콘만 표시: 아니오
간격
이제 이 버튼 모듈에 간격 설정을 추가합니다.
- 하단 마진: 8%
- 왼쪽 여백: 9%
- 오른쪽 여백: 9%
- 하단 패딩: 5%
- 오른쪽 패딩: 20%
박스 섀도우
상자 그림자에서 버튼에 그림자를 추가합니다.
- 상자 그림자 수평 위치: 0px
- 상자 그림자 수직 위치: 2px
- 그림자 색상: #000000
CSS 클래스
마지막으로 버튼 모듈 설정을 닫기 전에 이 CSS 클래스를 추가합니다.
- CSS 클래스: 호버 버튼
열 1 다시 사용
열 번호 -2,3 및 4 삭제
우리는 첫 번째 열을 만들었고 이것이 우리가 계속해서 사용할 수 있는 것입니다. 따라서 나머지 열을 삭제합니다.
열 1: 복제
다시 사용하기 위해 열 1을 세 번 복제합니다.
복제된 열의 배경 이미지 변경
이제 복제를 통해 얻은 열의 배경 이미지를 변경합니다.
복제된 열의 콘텐츠 변경
이제 복제된 열의 내용을 수정합니다.
고유한 열 테두리
열 1
이제 각 열에 고유한 테두리를 적용합니다. 1열부터 시작하겠습니다.
- 오른쪽 테두리 너비: 데스크탑: 1px, 태블릿: 1px 및 전화: 0px
- 오른쪽 테두리 색상: #d3d3d3
- 하단 테두리 너비: 데스크탑: 0px, 태블릿: 1px 및 전화: 1px
- 하단 테두리 색상: #d3d3d3
2열
그런 다음 테두리 조정을 위해 2열로 이동합니다.
- 오른쪽 테두리 너비: 데스크톱: 1px, 태블릿: 0px 및 전화: 0px
- 오른쪽 테두리 색상: #d3d3d3
- 하단 테두리 너비: 데스크탑: 0px, 태블릿: 1px 및 전화: 1px
- 하단 테두리 색상: #d3d3d3
3열
마지막으로 열 3이 있습니다.
- 오른쪽 테두리 너비: 데스크탑: 1px, 태블릿: 1px 및 전화: 0px
- 오른쪽 테두리 색상: #d3d3d3
- 하단 테두리 너비: 데스크탑: 0px, 태블릿: 0px 및 전화: 1px
- 하단 테두리 색상: #d3d3d3
2부: 사용자 정의 CSS 코드 추가
페이지 설정 옵션
전체 디자인 구조 생성을 완료했으므로 이제 페이지 설정 옵션에서 사용자 정의 CSS 코드를 디자인에 추가합니다. 이 CSS 코드는 우리가 기대하는 호버 효과를 트리거하는 데 도움이 됩니다.
추가: CSS 코드
이제 다음 CSS 코드를 복사하여 고급 탭 아래의 "사용자 정의 CSS"에 붙여넣습니다.
.hover-column:hover .hover-title {
background-color: #000000;
}
.hover-column:hover .hover-title h3 {
color: white !important;
}
.hover-button {
color: black;
}
.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
.hover-column:hover::before {
opacity: 0;
}
최종 출력
우리는 모든 작업을 성공적으로 완료했습니다. 우리의 디자인은 그렇게 보일 것입니다.
맺음말
오늘 우리는 Divi 의 내장 기능을 사용하여 얼마나 많은 아름다운 디자인을 만들 수 있는지에 대한 샘플을 보았습니다. 오늘 우리는 호버링의 흥미로운 효과를 보여주는 간단한 그리드를 만들었습니다. 이것이 향후 WordPress 디자인에서 중요한 역할을 하기를 바랍니다. 의견이나 질문이 있으면 의견에 알려주십시오. 또한 이 튜토리얼이 마음에 들면 공유가 미결됩니다.
