Divi에서 팀을 보여주기 위해 클릭 시 플립 애니메이션으로 명함을 디자인하는 방법

클릭 시 뒤집히는 명함을 디자인하면 웹사이트의 팀 구성원 섹션이나 페이지에 창의적으로 추가할 수 있습니다. 명함은 이미 회사에서 일하는 사람에 대한 간결한 정보를 제공하는 친숙하고 직관적인 방법입니다. 따라서 웹에서 동일한 디자인을 제공하는 것이 합리적입니다. 또한 각 카드에 제공된 정보는 더욱 역동적이고 상호작용할 수 있어 사용자가 정보를 복사하거나 명함 내의 링크를 클릭할 수 있습니다.

이 튜토리얼에서는 실제 명함처럼 클릭 시 뒤집어 사람에 대한 정보를 표시하는 기능도 있는 Divi에서 고유한 명함을 디자인하는 방법을 보여 드리겠습니다.

뛰어들고 시작합시다!

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.

무료로 레이아웃 다운로드

이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.

가져오기 버튼을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "처음부터 빌드" 옵션을 선택합니다.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

Divi에서 클릭 시 뒤집히는 명함 디자인하기

행 및 열 설정

시작하려면 일반 섹션에 대한 1열 행을 만듭니다.

행 설정을 열고 다음을 업데이트합니다.

• 열 높이 균등화: 예
• 폭: 90%
• 최대 너비: 1200px

열에 대한 설정을 열고 다음과 같이 패딩을 지정합니다.

• 패딩(데스크탑 및 태블릿): 상단 30픽셀, 하단 30픽셀, 왼쪽 50픽셀, 오른쪽 50픽셀
• 패딩(전화): 상단 15px, 하단 15px, 왼쪽 15px, 오른쪽 15px

고급 탭에서 열에 다음 CSS 클래스를 추가합니다.

• CSS 클래스: 카드 열

이 클래스는 나중에 플립 애니메이션을 유발하는 클릭 이벤트를 트리거하는 코드의 대상 역할을 합니다.

중복 열

이제 하나의 열 설정이 있으므로 열을 복제하여 각 열이 동일한 패딩과 CSS 클래스를 갖는 2열 레이아웃을 갖도록 합니다.

뒷면 카드 만들기

명함 디자인의 첫 번째 요소는 카드 정보와 함께 명함 배경 역할을 할 뒷면 카드라고 부를 것입니다. 앞면 카드를 만들려면 1열에 구분선을 추가하세요.

디바이더 설정을 열고 을 클릭하여 디바이더가 표시되지 않도록 합니다. 우리는 명함의 배경 이미지로 구분선만 사용하고 있습니다.

그런 다음 다음 옵션을 업데이트합니다.

배경색

• 배경색: #322b3f

배경 그라데이션

• 배경 그라데이션 왼쪽 색상: rgba(50,43,63,0.72)
• 배경 그라데이션 오른쪽 색상: #322b3f
• 그라디언트 유형: 방사형
• 최종 위치: 34%
• 배경 이미지 위에 그라디언트 배치: 예

배경 이미지

• 배경 이미지: [팀 구성원의 이미지 또는 초상화 업로드]
• 배경 이미지 크기: 적합
• 배경 이미지 위치: 중앙

사이징

• 폭: 100%
• 최소 높이: 300px
• 높이: 100%

박스 섀도우

• 박스 섀도우: 스크린샷 참조
• 상자 그림자 수직 위치: 0px
• 상자 그림자 흐림 강도: 50px

CSS 클래스 및 절대 위치

다음으로 구분선에 다음 CSS 클래스를 추가합니다.

• CSS 클래스: 백 카드

위치를 절대로 업데이트합니다.

• 위치: 절대

뒷면 카드 로고 만들기

뒷면 카드(디바이더)가 있으면 카드 정보 요소를 추가할 수 있습니다. 시작하려면 왼쪽 상단 모서리에 로고를 추가합니다.

디바이더/백 카드 모듈 아래에 이미지 모듈을 추가합니다.

그런 다음 약 60x60px 크기의 로고 이미지를 업로드합니다.

그런 다음 다음과 같이 CSS 클래스와 절대 위치로 이미지를 업데이트합니다.

CSS 클래스

• CSS 클래스: 카드 콘텐츠

위치

• 위치: 절대
• 수직 오프셋: 30px(데스크톱 및 태블릿), 15px(휴대폰)
• 수평 오프셋: 50px(데스크톱 및 태블릿), 10px(휴대폰)

이름

명함의 이름을 만들려면 로고 이미지 아래에 새 텍스트 모듈을 추가합니다.

명함에 등장할 사람의 이름으로 본문 내용을 업데이트합니다.

디자인 탭에서 다음과 같이 단락 텍스트 스타일 옵션을 업데이트합니다.

• 텍스트 글꼴: Poppins
• 텍스트 텍스트 색상: #ffffff
• 텍스트 텍스트 크기: 28px(데스크톱 및 태블릿), 22px(휴대전화)
• 문자 간격: 1px
• 텍스트 정렬: 오른쪽

직위(또는 역할)

카드에 사람의 위치(또는 역할)를 추가하려면 이름과 함께 이전 텍스트 모듈을 복제합니다.

그런 다음 사람의 위치(또는 역할)로 본문 내용을 업데이트합니다.

그런 다음 위치 텍스트 모듈의 디자인 설정을 다음과 같이 업데이트합니다.

• 텍스트 글꼴 스타일: TT
• 텍스트 텍스트 크기: 16px(데스크톱 및 태블릿), 14px(휴대전화)
• 여백: 15px 하단

그 회사

명함에 회사명을 추가하려면 이전(직위) 텍스트 모듈을 복제합니다.

그런 다음 본문 내용을 회사 이름으로 업데이트합니다.

그런 다음 회사 텍스트 설정을 다음과 같이 업데이트합니다.

• 텍스트 글꼴 두께: 가벼움
• 텍스트 글꼴 스타일: 기본값
• 텍스트 텍스트 크기: 22px(데스크톱 및 태블릿), 18px(휴대전화)
• 텍스트 정렬: 왼쪽

전화번호

명함의 전화번호를 생성하려면 (회사) 텍스트 모듈 아래에 블러브 모듈을 추가하세요.

(전화) 광고문안의 본문 내용을 카드에 표시할 전화번호로 업데이트합니다.

광고 문구에 전화 아이콘을 사용하려면 클릭하세요.

디자인 설정에서 다음을 업데이트합니다.

• 아이콘 색상: rgba(162,71,232,0.6)
• 이미지/아이콘 배치: 왼쪽
• 아이콘 글꼴 크기 사용: 예
• 아이콘 글꼴 크기: 20px
• 본문 글꼴: Poppins
• 본문 색상: #ffffff
• 본문 텍스트 크기: 16px
• 여백: 10px 하단

이메일 주소

카드에 이메일 주소를 표시하려면 (전화) 광고문안 모듈을 복제하고 이메일 주소로 본문 내용을 업데이트하십시오.

그런 다음 아이콘을 봉투 아이콘으로 업데이트합니다.

웹 사이트

카드에 웹사이트를 표시하려면 (전화) 광고문안 모듈을 복제하고 웹사이트로 본문 콘텐츠를 업데이트합니다.

그런 다음 더 적절한 아이콘으로 아이콘을 업데이트합니다.

소셜 미디어 팔로우 아이콘

카드 콘텐츠의 마지막 부분에서는 소셜 미디어 팔로우 아이콘을 카드에 추가할 것입니다. 이렇게 하려면 (웹사이트) 광고 문구 아래에 소셜 미디어 팔로우 모듈을 추가하세요.

소셜 미디어 팔로우 설정 모달에서 각 소셜 네트워크를 투명한 배경으로 업데이트합니다.

(나중에 필요에 따라 링크 URL을 추가할 수도 있습니다.)

그런 다음 모듈에 올바른 정렬을 제공합니다.

모든 카드 콘텐츠 모듈에 동일한 CSS 클래스 추가

명함에 대한 모든 카드 콘텐츠 모듈 생성이 완료되면 모든 모듈에 동일한 CSS 클래스를 제공해야 합니다. 이렇게 하려면 다중 선택 기능을 사용하여 모든 카드 콘텐츠 모듈(로고, 이름, 위치, 전화, 이메일, 웹사이트 및 소셜 미디어 아이콘)을 선택한 다음 요소 설정을 열고 다음 클래스를 추가합니다.

• CSS 클래스: 카드 콘텐츠

앞면 카드 뒤집기 애니메이션 전후에 콘텐츠를 숨기고 표시하기 위해 이 클래스를 사용자 정의 CSS 코드로 대상으로 할 것입니다.

전면 카드

이제 모든 카드 콘텐츠가 제자리에 있는 후면 카드가 완성되었으므로 후면 카드와 후면 카드 콘텐츠 위에 놓일 전면 카드를 만들 준비가 되었습니다. 이를 위해 2열에 있는 이미지 모듈을 사용하여 전면 카드를 디자인할 것입니다. 그런 다음 1열에 있는 후면 카드 위에 앉도록 카드를 이동합니다.

먼저 2열에 이미지 모듈을 추가합니다.

이미지로 사용할 뒷면 카드 로고에 사용한 것과 동일한 로고 이미지(60px x 60px)를 업로드하세요.

그런 다음 후면 카드(디바이더) 모듈의 설정을 열고 배경 디자인을 복사합니다.

그런 다음 디자인 중인 전면 카드의 이미지 설정을 열고 배경 디자인을 이미지 모듈 배경 옵션에 붙여넣습니다.

디자인 탭에서 다음과 같이 이미지의 간격을 업데이트합니다.

• 패딩(데스크톱 및 태블릿): 상단 30픽셀, 왼쪽 50픽셀
• 패딩(전화): 상단 15px, 왼쪽 10px

고급 설정

고급 탭에서 이미지에 다음 CSS 클래스를 지정합니다.

• CSS 클래스: 전면 카드

기본 요소에 다음 사용자 지정 CSS를 추가합니다.

[/css]
높이: 100%;
너비: 100%;
[/css]

위치 옵션 업데이트:

• 절대 위치
• Z 인덱스: 13

사용자 정의 높이와 너비(절대 위치와 결합)는 이미지(또는 로고)가 포함된 모듈이 상위 열의 전체 높이와 너비에 걸쳐 있도록 합니다. 따라서 하나의 이미지 모듈이지만 명함 디자인을 위한 멋진 전면 카드로 두 개의 레이어 이미지(로고와 배경 이미지)를 표시하는 데 사용하고 있습니다.

새 배경 이미지로 변경하는 것을 잊지 마십시오. 이 경우 동일한 사람의 다른 초상화를 사용하고 있습니다.

완료되면 전면 카드 이미지 모듈을 열 1로 끌어다 놓습니다. 후면 카드를 완전히 덮어야 합니다.

사용자 정의 코드

마지막 단계는 클릭 시 명함 뒤집기 애니메이션을 실제로 만드는 기능을 완료하기 위해 몇 가지 사용자 정의 CSS와 JQuery를 추가하는 것입니다.

코드를 추가하려면 1열 내 소셜 미디어 팔로우 모듈 아래에 코드 모듈을 추가하세요.

맞춤 CSS

스타일 태그 사이에 다음 CSS 코드를 붙여넣습니다.

.card-column {
  perspective: 1400px;
}
.front-card:hover {
  cursor: pointer;
}

.front-card,
.back-card {
  transition: all 500ms ease-in-out;
  transform-style: preserve-3d;
}

.back-card {
  transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .back-card {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .front-card {
  transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
  transform-origin: 50% 50%;
}

.card-content {
  transition: all 300ms ease-out 0ms;
}

.divi-transform-active .card-content {
  transition: all 300ms ease-out 500ms;
  opacity: 1 !important;
}

.divi-transform-active .front-card {
  opacity: 0;
  visibility: hidden;
}

제이쿼리

CSS 아래에서 스크립트 태그 사이에 다음 JQuery를 붙여넣습니다.

(function ($) {
  $(document).ready(function () {
    $cardColumn = $(".card-column");
    $cardContent = $(".card-content");

    $cardContent.css("opacity", "0");

    $cardColumn.on("click", function (e) {
      $(this).addClass("divi-transform-active");
      e.stopPropagation();
    });
    $(document).on("click", function (e) {
      if ($(e.target).is($cardColumn) === false) {
        $cardColumn.removeClass("divi-transform-active");
      }
    });
  });
})(jQuery);

추가 명함 만들기

명함을 추가로 만들려면 명함을 만드는 데 사용한 모든 모듈이 포함된 열을 복제하기만 하면 됩니다. 열을 복제한 후에는 추가 코드 모듈을 삭제해야 합니다. 중복 코드가 있는 두 개의 코드 모듈은 작동하지 않습니다.

열/카드가 복제되면 새 명함에 필요한 대로 모듈을 사용하여 배경 이미지와 카드 내용을 업데이트하기만 하면 됩니다.

최종 결과

다음은 클릭 시 플립 애니메이션을 사용한 명함 디자인의 최종 결과입니다. 앞면 카드 이미지를 클릭하면 뒤집힌 후 사라지고 뒷면 카드 칸막이도 뒤집히지만 보이는 상태로 유지됩니다. 뒤집기 애니메이션이 완료된 후 카드 정보가 사라집니다. 카드를 다시 뒤집으려면 카드가 포함된 열 외부를 클릭하기만 하면 됩니다. 사용자가 카드 내의 요소를 클릭할 수 있도록 카드를 클릭할 때(토글과 같은) 카드를 다시 뒤집고 싶지 않았습니다.

마지막 생각들

이 대화형 명함 디자인이 웹사이트에서 팀원 섹션이나 페이지를 표시하는 방식을 보다 창의적으로 만드는 데 도움이 되기를 바랍니다. 사실, 이 기술은 명함에만 국한되지 않습니다. 표시하려는 거의 모든 정보에 사용할 수 있습니다. 사용해 보고 다음 프로젝트에 적합한지 확인하십시오.

댓글로 여러분의 의견을 기다리겠습니다.

건배!