Hover Text Shadows를 사용하여 Divi로 대화형 콘텐츠 만들기
게시 됨: 2019-02-18유사한 웹사이트에서 귀하의 웹사이트를 돋보이게 하는 것은 어려울 수 있지만 일단 관리하고 나면 거의 항상 노력과 생각을 기울일 만한 가치가 있습니다. 영감을 얻을 수 있도록 Divi로 웹 사이트를 구축할 때 대화형 콘텐츠를 만드는 방법을 보여 드리겠습니다.
이 자습서에서 다시 만들 예제는 작업 중인 모든 정보 페이지에서 특히 잘 작동합니다. Divi에 내장된 텍스트 섀도우 옵션을 사용하여 마우스 오버 시 사실이나 회사 정보를 공유할 수 있습니다. 또한 정보와 모바일 경험이 손실되지 않도록 이러한 호버 효과가 더 작은 화면 크기에 적용되지 않도록 하고 있습니다.
가자!
시사
튜토리얼을 시작하기 전에 예상할 수 있는 결과를 간단히 살펴보겠습니다.
데스크탑
이동하는
이러한 모든 호버 상호 작용이 더 작은 화면 크기에 적용되지 않도록 하고 있습니다. 동일한 섹션과 모듈을 사용하는 동안 대신 다음과 같은 간단한 결과를 얻을 수 있습니다.
접근하다
- 우리가 다시 만들 예제는 페이지에 대해 훌륭하지만 5자 또는 6자 단어로 작동하도록 만들 수 있습니다(열 구조와 일치).
- 각 캐릭터는 개별 텍스트 모듈에 전용됩니다.
- 단어의 다른 문자를 연결하고 동일한 모듈에서 생성된 것처럼 보이게 하기 위해 충분한 수의 열이 있는 행을 사용하고 있습니다.
- 기본적으로 텍스트 모듈의 텍스트 색상이 섹션 배경 색상과 일치하도록 합니다.
- 문자를 읽을 수 있도록 하기 위해 문자에도 흰색 텍스트 그림자를 적용합니다.
- 캐릭터를 마우스로 가리키면 텍스트 그림자가 사라지고 텍스트 색상이 변경되어 텍스트가 채워지는 느낌을 줍니다.
- 캐릭터를 호버링하는 동안 일부 추가 정보도 표시됩니다.
- 작은 화면 크기에서는 회사 사실 및/또는 정보가 처음부터 표시됩니다.
재창조를 시작합시다!
YouTube 채널 구독
새 섹션 추가
배경색
새 페이지나 기존 페이지를 열고 일반 섹션을 추가합니다. 섹션 설정을 열고 배경색을 변경합니다.
- 배경색: #03006d
간격
그런 다음 섹션의 간격 설정으로 이동하여 사용자 지정 위쪽 및 아래쪽 패딩을 추가합니다.
- 상단 패딩: 50px
- 하단 패딩: 50px
새 행 추가
열 구조
다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.
사이징
그런 다음 크기 조정 설정으로 이동하여 행이 화면의 전체 너비를 차지하도록 합니다. 이것은 뷰포트 단위를 사용하여 거리를 수동으로 결정할 수 있게 해주기 때문에 중요한 단계입니다.
- 이 행을 전체 너비로 만들기: 예
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
간격
이전 단계에서 새 행과 함께 제공되는 모든 기본 크기 조정 설정을 제거했습니다. 그러나 일부 패딩을 수동으로 추가해야 합니다. 여기에서는 결과가 모든 데스크톱 화면 크기에서 동일하게 유지되도록 뷰포트 단위를 사용하고 있습니다.
- 왼쪽 패딩: 9vw(데스크톱), 5vw(태블릿 및 전화)
- 오른쪽 패딩: 5vw(태블릿 및 휴대전화)
열 1에 텍스트 모듈 추가
콘텐츠 추가
행 설정 수정이 완료되면 첫 번째 텍스트 모듈을 열 1에 추가할 수 있습니다. 첫 번째 문자를 단락 텍스트로 추가하고 호버에 표시할 내용을 목록 텍스트로 추가합니다.
기본 텍스트 설정
그런 다음 디자인 탭으로 이동하여 기본 단락 텍스트 설정을 수정합니다. 텍스트와 섹션 배경 모두에 동일한 색상을 사용해야 합니다.
- 텍스트 글꼴 두께: 매우 굵게
- 텍스트 색상: #03006d
- 텍스트 크기: 27vw(데스크톱), 0vw(태블릿 및 전화)
- 텍스트 줄 높이: 1.1em
- 텍스트 그림자 흐림 강도: 0.01em
- 텍스트 그림자 색상: #ffffff
- 텍스트 방향: 왼쪽
호버 텍스트 설정
멋진 호버 효과를 만들려면 호버에서 이러한 단락 텍스트 설정을 수정해야 합니다. 이제 완전히 투명한 텍스트 그림자 색상을 사용하여 사라지게 하는 방법에 주목하십시오.
- 텍스트 색상: #ffffff
- 텍스트 그림자 색상: rgba(255,255,255,0)
기본 목록 텍스트 설정
목록 텍스트 설정으로 이동하여 계속하십시오. 이러한 설정의 중요한 부분은 바탕 화면의 텍스트 크기가 '0px'인지 확인하지만 더 작은 화면 크기의 경우 텍스트 크기로 '18px'를 추가하는 것입니다. 이렇게 하면 목록 텍스트가 더 작은 화면 크기에 표시되지만 마우스를 가져가지 않으면 바탕 화면에는 표시되지 않습니다.
- 무순 목록 글꼴 두께: Light
- 정렬되지 않은 목록 텍스트 색상: #ffffff
- 정렬되지 않은 목록 텍스트 크기: 0px(데스크톱), 18px(태블릿 및 휴대폰)
- 정렬되지 않은 목록 텍스트 그림자 색상: rgba(255,255,255,0)
- 정렬되지 않은 목록 스타일 유형: Circle
- 정렬되지 않은 목록 스타일 위치: 외부
- 순서 없는 목록 항목 들여쓰기: 0px
호버 목록 텍스트 설정
우리는 목록 텍스트가 호버에 나타나길 원합니다. 그래서 마우스를 가져갈 때 텍스트 크기를 변경합니다. 마우스 오버 시 사용하는 텍스트 크기가 더 작은 화면 크기에서 사용하는 텍스트 크기와 동일한지 확인하십시오. 이렇게 하면 더 작은 화면 크기에서 호버 효과가 발생하지 않도록 할 수 있습니다.
- 정렬되지 않은 목록 텍스트 크기: 18px
간격
모듈의 간격 설정으로 이동하여 계속해서 일부 변경도 수행합니다.
- 하단 여백: 50px(태블릿 및 휴대전화)
- 오른쪽 여백: -4vw(데스크톱), 0vw(태블릿 및 전화)
텍스트 모듈을 4번 복제하고 나머지 열에 중복 배치
이제 열 1의 첫 번째 모듈 수정을 완료했으므로 계속 진행하여 모듈을 네 번 복제하고 나머지 열에 복제본을 각각 배치할 수 있습니다. 다음 단계에서는 새 캐릭터와 일치하도록 복제본을 각각 수정합니다.
2열의 텍스트 모듈 변경
콘텐츠 변경
2열에서 복제본을 열고 내용을 변경합니다.
간격 변경
그런 다음 간격 설정으로 이동하여 사용자 지정 여백 값을 변경합니다.
- 하단 여백: 50px(태블릿 및 휴대전화)
- 왼쪽 여백: -2vw(데스크톱), 0vw(태블릿 및 전화)
- 오른쪽 여백: -2vw(데스크톱), 0vw(태블릿 및 전화)
3열의 텍스트 모듈 변경
콘텐츠 변경
3열의 중복 내용도 변경합니다.
간격 변경
디자인 탭의 간격 설정과 함께.
- 하단 여백: 50px(태블릿 및 휴대폰)
- 왼쪽 여백: -5.5vw(데스크톱), 0vw(태블릿 및 전화)
- 오른쪽 여백: 1.5vw(데스크톱), 0vw(태블릿 및 전화)
4열의 텍스트 모듈 변경
콘텐츠 변경
계속해서 4열에서 텍스트 모듈을 열고 여기에서도 내용을 변경합니다.
간격 변경
그런 다음 디자인 탭으로 이동하여 간격 설정에서 사용자 지정 여백 값을 변경합니다.
- 하단 여백: 50px
- 왼쪽 여백: -6vw(데스크톱), 0vw(태블릿 및 전화)
- 오른쪽 여백: 2vw(데스크톱), 0vw(태블릿 및 전화)
5열의 텍스트 모듈 변경
콘텐츠 변경
마지막 복제본으로 이동합니다. 내용 상자의 내용을 변경합니다.
간격 변경
사용자 정의 간격 설정과 함께.
- 하단 여백: 50px
- 왼쪽 여백: -7vw(데스크톱), 0vw(태블릿 및 전화)
- 오른쪽 여백: 3vw(데스크톱), 0vw(태블릿 및 전화)
시사
이제 모든 단계를 거쳤으므로 다양한 화면 크기에서 결과를 최종적으로 살펴보겠습니다.
데스크탑
이동하는
마지막 생각들
우리는 귀하의 웹사이트를 다른 웹사이트와 차별화하는 것이 얼마나 중요한지 알고 있습니다. Divi의 내장 옵션을 사용하면 원하는 만큼 창의력을 발휘할 수 있습니다. 이 게시물은 작은 화면 크기에서 모든 것이 간단하게 유지되도록 하는 동안 호버에서 대화형 콘텐츠를 만드는 방법의 예입니다. 현재 작업 중인 모든 정보 페이지에 대해 다시 만든 예제를 사용할 수 있습니다. 방문자와 상호 작용하면서 회사에 대한 몇 가지 사실과 추가 정보를 공유할 수 있는 좋은 방법입니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!