그림자 및 호버 효과를 사용하시겠습니까? Divi 만들다 내용 대화형으로 눈에 띄는 사이트 웹 ?
당신의 사이트 웹 유사한 웹사이트에서 눈에 띄는 것은 어려울 수 있습니다. 그러나 일단 거기에 도달하면 거의 항상 노력과 생각의 가치가 있습니다.
만드는 방법을 알려드리겠습니다. 내용 웹사이트를 만들 때 대화형 Divi.
가자!
측량
이 튜토리얼을 살펴보기 전에 예상할 수 있는 결과를 간단히 살펴보겠습니다.
데스크탑 컴퓨터
모바일
디비와 함께 실현을 시작해 봅시다!
또한보십시오: Divi: 호버에서 회전하는 휠 메뉴를 만드는 방법l
새 섹션 추가
배경색
새 페이지를 만들거나 기존 페이지를 열고 일반 섹션을 추가하십시오. 섹션 설정을 열고 배경색을 변경합니다.
- 배경: #03006d
간격
그런 다음 섹션 간격 설정으로 이동하여 다음과 같이 변경합니다.
- 패딩(상단 및 하단): 50px
새 행 추가
기둥의 구조
다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.
크기 조정
그런 다음 크기 설정으로 이동하여 선이 화면의 전체 너비를 채우도록 합니다.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 폭: 100%
간격
다음 간격 설정도 변경해 보겠습니다.
- 패딩(오른쪽): 9vw(데스크톱), 5vw(태블릿 및 전화)
- 패딩(오른쪽): 5vw(태블릿 및 휴대폰)
열 1에 텍스트 모듈 추가
콘텐츠 추가
행 설정 편집이 끝나면 첫 번째 텍스트 모듈을 열 1에 추가합니다.
첫 번째 문자를 단락 텍스트로 추가합니다. 그런 다음, 내용 목록 텍스트로 표시하려는 항목입니다.
텍스트 설정(데스크탑)
그런 다음 탭으로 이동 디자인기본 단락 텍스트 설정을 변경합니다. 섹션 텍스트와 배경에 동일한 색상을 사용해야 합니다.
- 글꼴 두께: 매우 굵게
- 텍스트 색상: #03006d
- 텍스트 크기: 27vw(데스크톱), 0vw(태블릿 및 휴대폰)
- 줄 높이: 1,1em
- 텍스트 그림자: 캡처 참조
- 그림자 흐림 강도: 0,01em
- 그림자 색상: #ffffff
- 텍스트 정렬: 왼쪽
마우스 오버 텍스트 설정
멋진 호버 효과를 만들려면 이러한 호버 단락 텍스트 설정을 변경해야 합니다.
- 텍스트 색상(호버): #ffffff
- 그림자 색상(호버) : rgba(255,255,255,0)
목록 설정(데스크톱)
목록 설정으로 이동하여 계속하십시오.
- 글꼴 두께: 가벼움
- 목록 텍스트 색상: #ffffff
- 목록 텍스트 크기: 0px(데스크톱), 18px(태블릿 및 휴대폰)
- 스타일 위치: 원
- 정렬되지 않은 목록 스타일 위치: 외부
- 순서 없는 목록 항목 들여쓰기: 0px
호버(호버) 시 텍스트 설정 나열
우리는 목록 텍스트가 호버에 나타나길 원합니다. 이것이 우리가 호버에서 텍스트의 크기를 변경하는 이유입니다.
- 정렬되지 않은 목록 텍스트 크기(호버): 18px
간격
모듈 간격 설정으로 이동하여 계속해서 일부 변경 사항을 적용합니다.
- 여백(하단): 50px(태블릿 및 휴대폰)
- 여백(오른쪽): -4vw(데스크톱), 0vw(태블릿 및 전화)
텍스트 모듈을 4번 복제하고 나머지 열에 중복 배치
열 1의 첫 번째 모듈 수정을 완료했으므로 모듈을 네 번 복제합니다. 그런 다음 나머지 열에 각 복제본을 배치합니다. 우리는 우리가 원하는 것과 일치하도록 각각의 복제본을 수정할 것입니다.
2열의 텍스트 모듈 변경
편집 내용
2열에서 복제본을 열고 내용을 편집합니다.
간격 변경
그런 다음 간격 설정으로 이동하여 사용자 지정 여백 값을 변경합니다.
- 여백(하단): 50px(태블릿 및 휴대폰)
- 여백(왼쪽 및 오른쪽): -2vw(데스크톱), 0vw(태블릿 및 전화)
- 오른쪽 여백: -2vw(데스크톱), 0vw(태블릿 및 휴대폰)
3열의 텍스트 모듈 변경
편집 내용
또한 3열의 중복 내용을 변경합니다.
간격 변경
디자인 탭에서 간격 설정을 사용합니다.
- 여백(왼쪽): 2,5 vw
- 여백(오른쪽): 1,5 vw
4열의 텍스트 모듈 수정
편집 내용
계속해서 4열에서 텍스트 모듈 설정을 열고 콘텐츠도 편집합니다.
간격 변경
그런 다음 디자인 탭으로 이동하여 간격 설정에서 사용자 지정 여백 값을 변경합니다.
- 여백(왼쪽): -6vw
- 여백(오른쪽): 2vw
5열의 텍스트 모듈 수정
내용
마지막 복제를 위해 길을 비우십시오. 콘텐츠 영역에서 콘텐츠를 편집합니다.
간격 변경
사용자 정의 간격 설정.
- 여백(왼쪽): -7vw
- 여백(오른쪽): 3vw
측량
이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.
읽기 : Divi : "전폭 메뉴" 모듈의 장바구니 및 검색 아이콘을 사용자 정의하는 방법
국
모바일
지금 DIVI를 다운로드하세요!!!
결론
우리는 귀하의 사이트 웹 다른 웹사이트보다 눈에 띕니다. Divi에 내장된 옵션을 사용하면 원하는 만큼 창의력을 발휘할 수 있습니다.
이 문서는 대화형 호버 콘텐츠를 만드는 방법의 예입니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
