Blurb 모듈을 넣는 방법을 알고 싶습니다. Divi 다른 사람을 흐리게 하면서 강조?
어떤 유형이든 사이트 웹 구축 중이라면 언젠가는 다양한 서비스, 단계 등의 목록을 보고 싶을 것입니다.
이러한 목록을 매력적인 방식으로 만드는 가장 쉬운 방법 중 하나는 다음에서 Blurb 모듈을 사용하는 것입니다. Divi. Blurb 모듈을 사용하면 광고를 아름답게 구성할 수 있습니다. 내용 무한한 디자인 가능성을 제공하면서 목록에서 선택하세요.
이 튜토리얼에서는 한 단계 더 나아가서 Blurb 모듈을 가리켜서 강조 표시하고 표시한 다른 모듈을 흐리게 하는 방법을 보여줍니다. 다른 Blurb 모듈이 독자의 주의를 산만하게 하지 않고 한 번에 하나의 Blurb 모듈을 강조하는 좋은 방법입니다.
가자.
측량
이 튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 간단히 살펴보겠습니다.
데스크탑 컴퓨터
모바일 버전
Divi로 디자인을 시작해 봅시다.
새 섹션 추가
배경색
새 페이지나 작업 중인 페이지에 일반 섹션을 추가하여 시작하세요.
다음과 같이 상담할 수도 있습니다. Divi: 팀원 섹션을 캐러셀로 만드는 방법
섹션 설정을 열고 배경색을 변경합니다.
- 배경: #eaeaea
간격
또한 간격 값을 추가합니다.
- 여백(상단, 하단, 왼쪽 및 오른쪽): 2vw
- 패딩(상단 및 하단): 0px
경계
경계 반경을 추가하여 단면 매개변수를 완성합니다.
- 둥근 모서리: 20px
새 행 추가
기둥의 구조
다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.
크기 조정
아직 모듈을 추가하지 않고 라인 설정을 열고 사이징 설정을 변경합니다.
- 열 높이 균등화: 예
- 폭: 90%
- 최대 너비: 1px
- 최소 높이: 500px(데스크톱), 자동(태블릿 및 휴대폰)
사용자 정의 CSS(주 요소)
정렬 내용 행의 기본 요소에 CSS 코드 한 줄을 추가하여 열을 만듭니다.
align-items: center;
1 열에 Blurb 모듈 추가
콘텐츠 추가
이 튜토리얼에서 사용하는 유일한 모듈은 Blurb 모듈입니다.
그러나 다음 단계에서 공유할 CSS 클래스를 추가하기만 하면 이 모듈을 원하는 모듈로 교체할 수 있습니다.
첫 번째 Blurb 모듈을 열 1에 추가하고 내용 드 votre choix.
아이콘 선택
그런 다음 아이콘을 선택합니다.
- 아이콘 사용 : 예
- 아이콘: 스크린샷 참조
배경 그라데이션(마우스 오버)
그런 다음 호버에서만 배경 그라디언트를 사용하십시오.
- 그라디언트 정지
- 20%: #ffffff
- 80%: #0f1bff
- 그라디언트 유형: 선형
아이콘 설정(데스크탑)
탭으로 전환 디자인 모듈의 아이콘 설정을 다음과 같이 변경합니다.
- 아이콘 색상: #ffffff
- 이미지/아이콘 둥근 모서리: 50px
- 이미지/아이콘 테두리 너비: 5px
- 테두리 색상: #ffffff
- 이미지/아이콘 배치: 상단
- 이미지/아이콘 정렬: 왼쪽
호버 아이콘 설정
호버에서 다른 아이콘 색상을 변경합니다.
- 아이콘 색상(호버): #0f1bff
- 이미지/아이콘 배경색(호버): #f7f7f7
제목 텍스트 설정
제목 텍스트 설정을 변경하여 계속하십시오.
- 제목 글꼴: Source Sans Pro
- 글꼴 두께: 굵게
- 제목 글꼴 스타일: TT(대문자)
호버 제목 텍스트 설정
마우스 오버 시 제목 텍스트 색상을 변경합니다.
- 제목 텍스트 색상: #ffffff
설명 텍스트 설정(데스크탑)
다음은 본문 설정입니다.
- 본문 글꼴: Open Sans
- 바디 라인 높이: 2em
호버 설명 텍스트 설정
호버에 텍스트 색상을 사용합니다.
- 본문 텍스트 색상(호버): #ffffff
간격
그런 다음 간격 설정으로 이동하여 사용자 지정 패딩 값을 추가합니다.
- 패딩(위, 아래, 왼쪽 및 오른쪽): 50px
박스 섀도우(데스크탑)
우리는 또한 상자 그림자를 사용합니다.
- 상자 그림자 흐림 강도: 80px
- 상자 그림자 확산 강도: -20px
- 그림자 색상: rgba(255,255,255,0.18)
상자 그림자(호버링)
호버 섀도우의 색상을 변경합니다.
- 그림자 색상: rgba(0,0,0,0.18)
CSS 클래스
블러 효과가 발생하려면 Blurb 모듈에 CSS 클래스를 할당해야 합니다. 이 기사의 뒷부분에서 JQuery 코드에서 이 CSS 클래스를 사용할 것입니다.
- CSS 클래스: 광고 항목
Blurb 모듈을 두 번 복제하고 나머지 열에 복제본을 배치합니다.
열 1에서 Blurb 모듈을 완료하면 두 번 복제하고 행의 나머지 열에 복제본을 배치할 수 있습니다.
전체 행 복제
페이지에 표시하려는 Blurb 모듈의 수에 따라 원하는 만큼 행을 복제할 수 있습니다.
Blurb 모듈을 개별적으로 사용자 정의
물론 각 Blurb 모듈의 개별 콘텐츠를 수정해야 합니다.
새 행 추가
기둥의 구조
다음 열 구조를 사용하여 섹션에 다른 행을 추가합니다.
간격
라인 설정을 열고 기본적으로 모든 상단 및 하단 패딩을 제거합니다. 이렇게 하면 이 행이 차지하는 공간을 줄이는 데 도움이 됩니다.
- 패딩(상단 및 하단): 0px
열에 코드 모듈 추가
JQuery 및 CSS 코드 삽입
행 열에 코드 모듈을 추가하고 일부 JQuery 및 CSS 코드를 삽입하여 효과가 발생하도록 합니다.
아래 인쇄 화면에서 볼 수 있듯이 스크립트 태그 사이에 JQuery 코드를 넣고 스타일 태그 사이에 CSS 코드를 넣는 것을 잊지 마십시오.
jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
});
});.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
측량
이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.
데스크탑 컴퓨터
모바일 버전
지금 DIVI를 다운로드하세요!!!
결론
이 기사에서는 공유하는 Blurb 모듈로 창의력을 발휘하는 방법을 보여 드렸습니다. 사이트 웹.
특히, 표시한 다른 모듈을 흐리게 처리하여 호버링 시 Blurb 모듈을 강조 표시하는 방법을 보여 주었습니다.
이 튜토리얼이 다음 프로젝트에 영감을 주기를 바랍니다. Divi. 우려 사항이나 제안 사항이 있으면 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
