Divi의 변환 옵션으로 이미지 마커를 추가하는 방법

이미지 마커는 제품의 특별한 기능을 보여줄 수 있는 좋은 방법입니다. 이 게시물에서는 텍스트 모듈과 세로 구분선을 사용하여 이미지 마커를 만드는 방법을 보여줍니다. 열 내부의 변환 설정 덕분에 이미지 마커를 필요한 곳에 배치할 수 있습니다. 이 기술이 얼마나 다재다능한지 보여주기 위해 두 가지 다른 디자인 예를 보여 드리겠습니다. JSON 파일도 무료로 다운로드할 수 있습니다!

가자!

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 간단히 살펴보겠습니다.

예 #1

데스크탑

이동하는

예 #2

데스크탑

이동하는

이미지 마커 레이아웃을 무료로 다운로드하십시오

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

파일 다운로드

무료로 다운로드

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

다운로드

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

YouTube 채널 구독

예제 #1 다시 만들기

첫 번째 디자인 예제를 다시 만들어 봅시다!

새 섹션 추가

작업 중인 페이지에 새 섹션을 추가합니다. 행을 추가하기 전에 먼저 섹션 설정을 조정하세요.

배경

그라디언트를 추가한 다음 화면 혼합 모드로 이미지를 추가합니다.

• 배경: 그라데이션 + 이미지
• 그라데이션 색상 1: 흰색 #ffffff
• 그라디언트 색상 2: 미디엄 그레이 #666666
• 그라디언트 시작 위치: 22%
• 배경 이미지 혼합: 화면

간격

다음 섹션의 기본 상단 및 하단 패딩을 제거합니다.

• 상단 및 하단 패딩: 0vw

시계

섹션의 오버플로를 숨겨 섹션 설정을 완료합니다.

• 수직 및 수평 오버플로: 숨김

행 #1 추가

이제 세 개의 열이 있는 새 행을 추가합니다.

모듈을 추가하기 전에 행 설정을 조정하십시오.

사이징

먼저 행의 크기를 조정합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 폭: 100%
• 최대 너비: 100%

맞춤 CSS

다음으로 행의 기본 요소에 CSS 코드 한 줄을 추가합니다. 이렇게 하면 작은 화면 크기에서도 열이 나란히 표시됩니다.

• 주요 요소 CSS: 표시: flex;

display: flex;

열 1

변환 번역

첫 번째 열에 사용자 지정 변환 번역 효과를 적용하여 열의 위치를 ​​변경합니다. 이 단계는 나중에 게시물에 이미지 마커 모듈을 추가하면 의미가 있습니다. 다른 디자인에서 이 기술을 사용하는 경우 적절하게 이 값을 변경해야 합니다.

• 변환 번역: x축 2vw, y축 16vw

Z 인덱스

가시성 탭에 더 높은 z 인덱스 값을 추가합니다.

• Z 인덱스: 10

2열

변환 번역

두 번째 열에 변환 변환 효과를 적용합니다.

• 변환 번역: x축 -11vw, y축 6vw

Z 인덱스

z 인덱스 값을 늘립니다.

• Z 인덱스: 10

3열

변환 번역

세 번째 열의 변환 변환 값을 수정합니다.

• 변환 번역: x축 -11vw, y축 8vw

Z 인덱스

그리고 z 인덱스 값을 변경합니다.

• Z 인덱스: 10

행 #2 추가

첫 번째 행에 모듈을 추가하기 전에 새로운 1열 행을 추가하십시오. 디자인하는 동안 화면에서 어떤 일이 일어나는지 볼 수 있도록 이미지 마커를 추가하기 전에 이 작업을 수행하십시오.

사이징

행의 크기 설정을 변경합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 폭: 100%
• 최대 너비: 100%

이미지 모듈 추가

다음에 이미지 모듈을 추가하십시오.

사이징

디자인이 모든 화면 크기에서 반응하도록 유지하려면 이미지 모듈에 전체 너비를 적용합니다.

• 강제 전폭: 예

간격

그런 다음 왼쪽 및 오른쪽 패딩을 추가하여 이미지를 더 작게 만듭니다.

• 왼쪽 및 오른쪽 패딩: 10vw

3개의 텍스트 모듈 추가

이제 첫 번째 3열 행으로 돌아가서 3개의 텍스트 모듈을 추가합니다.

더 쉽게 액세스하려면 와이어프레임 보기를 사용하십시오.

첫 번째 열에 텍스트 모듈을 추가하고 두 번 복제한 다음 복제본을 다른 열로 드래그합니다.

1열에서 텍스트 모듈 수정을 시작합니다. 원하는 내용을 입력하고 다음과 같이 설정을 변경합니다.

배경

검정색 배경을 추가합니다.

• 배경색: 검정 #000000

텍스트

텍스트에 스타일을 지정합니다.

• 텍스트 글꼴: Aldrich
• 텍스트 색상: 흰색 #ffffff
• 텍스트 정렬: 가운데
• 텍스트 크기:
  • 데스크탑: 1.2vw
  • 태블릿: 2vw
  • 전화: 2.4vw
• 제목 글꼴 두께: 굵게

사이징

텍스트 모듈의 크기를 조정합니다.

• 너비:
  • 데스크탑: 17vw
  • 태블릿: 23vw
  • 전화: 30vw
• 모듈 정렬: 중앙

간격

상단 및 하단 패딩을 추가합니다.

• 상단 및 하단 패딩: 0.9vw

국경

테두리 설정을 변경합니다.

• 둥근 모서리: 모든 모서리에서 14px
• 하단 스타일: 하단 테두리
• 하단 테두리 너비: 4px
• 하단 테두리 색상: 빨간색 #E02B20

박스 섀도우

상자 그림자를 적용합니다.

• 상자 그림자: 세 번째 옵션

텍스트 스타일 확장

시간을 절약하려면 스타일 확장 옵션을 사용하여 섹션의 다른 텍스트 모듈에 스타일을 지정하십시오.

• 먼저 텍스트 모듈의 오른쪽 가장자리에 있는 세 개의 점을 클릭하고 "텍스트 스타일 확장"을 선택합니다.
• 그런 다음 팝업 상자에서 "전체"를 클릭하고 메뉴가 드롭다운되면 "이 섹션"을 선택합니다.
• 각 텍스트 모듈의 내용을 변경합니다.

3개의 디바이더 모듈 추가

열 1의 텍스트 모듈 아래에 구분선을 추가합니다. 그런 다음 두 번 복제하고 복제본을 다른 열로 드래그합니다.

열 1의 구분선 모듈을 열고 일부 변경합니다.

선

디바이더를 검은색으로 만듭니다.

• 선 색상: 검정 #000000

사이징

디바이더의 두께를 조정합니다.

• 디바이더 무게: 3px
• 폭: 20vw
• 모듈 정렬: 중앙

간격

상단 여백을 조정합니다.

• 최고 마진: 7vw

변환

디바이더를 수직으로 만들기 위해 변형 회전 효과를 추가합니다.

• 변환 회전: 90deg에서 첫 번째 옵션

디바이더 설정 확장

시간을 절약하고 스타일 확장 옵션을 사용하십시오.

• 먼저 분할기 모듈의 오른쪽에 있는 세 개의 점을 클릭하고 "분할기 스타일 확장"을 선택합니다.
• 그런 다음 팝업 상자에서 "전체"를 클릭하고 드롭다운 메뉴에서 "이 섹션"을 선택합니다.

이제 디자인은 다음과 같아야 합니다.

행 #3 추가

다음 열 구조를 사용하여 섹션에 세 번째 행을 추가합니다.

이제 모듈을 추가하기 전에 그에 따라 행 설정을 조정하십시오.

사이징

크기 설정을 변경합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 폭: 100%
• 최대 너비: 100%

열 1

변환

첫 번째 열에 변환 변환 효과를 적용합니다.

• 변환 번역: y축 -8vw

Z 인덱스

z 인덱스 값도 조정하십시오.

• Z 인덱스: 10

2열

변환

일부 사용자 정의 변환 번역 설정을 사용하여 두 번째 열의 위치를 ​​변경합니다.

• 변환 번역: x축 -17vw, y축 -14vw

Z 인덱스

z 인덱스 값을 조정합니다.

• Z 인덱스: 10

2개의 디바이더 추가

각 열에 하나씩 두 개의 구분선을 추가합니다.

구분선 스타일 확장

구분선을 추가한 후 이전 구분선을 사용하여 스타일을 새 구분선으로 확장합니다.

• 먼저 위의 첫 번째 행에 있는 구분선 모듈에서 세 개의 점을 클릭하고 "분할선 스타일 확장"을 선택합니다.
• 그런 다음 팝업에서 "이 페이지 전체"를 선택합니다.

이제 세 번째 행의 첫 번째 열에 있는 구분선을 약간 변경하겠습니다.

사이징

여백을 제거합니다.

• 상단 여백: 기본값

Z 인덱스

z 인덱스도 변경하십시오.

• Z 인덱스: -2

2개의 텍스트 모듈 추가

각 열에 텍스트 모듈을 추가합니다.

텍스트 스타일 확장

새 텍스트 모듈을 추가한 후 첫 번째 행의 텍스트 모듈에서 텍스트 스타일을 확장합니다.

• 먼저 맨 위 행의 첫 번째 텍스트 모듈에서 세 개의 점을 클릭하고 "텍스트 스타일 확장"을 선택합니다.
• 그런 다음 팝업에서 "이 페이지 전체"를 선택합니다.

이제 디자인에 맞게 텍스트를 변경합니다. 또한 세 번째 행의 두 텍스트 모듈에 상단 여백을 추가합니다.

간격

• 최고 마진: 7vw

예제 #2 다시 만들기

다음 예제로 넘어갑니다!

새 섹션 추가

작업 중인 페이지에 새 섹션을 추가합니다. 행을 추가하기 전에 섹션 설정을 조정하세요.

시계

가시성 설정에서 섹션의 오버플로를 숨깁니다.

• 수평 및 수직 오버플로: 숨김

행 #1 추가

이제 5개의 열이 있는 행을 추가합니다. 모듈을 추가하기 전에 다음과 같이 행 설정을 조정하십시오.

사이징

먼저 크기 설정을 수정합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 폭: 100%
• 최대 너비: 100%

간격

그런 다음 간격을 조정합니다.

• 왼쪽 및 오른쪽 패딩: 19.5vw

맞춤 CSS

행의 기본 요소에 CSS 코드 한 줄을 추가하여 열이 나란히 표시되도록 합니다.

• 주요 요소 CSS: 표시: flex;

display: flex;

모든 열 설정

그런 다음 각 열을 약간 변경합니다.

맞춤 CSS

• 주요 요소: 너비: 20% !중요;

width: 20% !important;

Z 인덱스

z 인덱스 값도 조정하십시오.

• Z 인덱스: 10

5개의 텍스트 모듈 추가

각 열에 텍스트 모듈을 추가합니다.

콘텐츠 상자에 관련 콘텐츠를 추가하고 1열에 있는 텍스트 모듈의 텍스트 모듈 설정을 수정하여 계속 진행합니다.

배경

배경색을 추가합니다.

• 배경색: 녹색 #2f7713

텍스트

다음과 같이 콘텐츠의 스타일을 지정합니다.

• 텍스트 글꼴: 알레르타
• 텍스트 정렬: 가운데
• 텍스트 색상: 흰색 #ffffff
• 텍스트 크기:
  • 데스크탑: 1.3vw
  • 태블릿: 2vw
  • 전화: 2.4vw
• 텍스트 줄 높이: 2.9em

사이징

크기를 조정합니다.

• 너비:
  • 데스크탑: 6vw
  • 태블릿: 8vw
  • 전화: 9vw
• 모듈 정렬: 중앙

간격

간격을 조정하여 모듈을 정사각형으로 만듭니다.

• 하단 여백: -2vw
• 상단 및 하단 패딩: 1vw
• 왼쪽 및 오른쪽 패딩: 1vw

국경

테두리 설정에서 텍스트 모듈을 원으로 바꿉니다.

• 둥근 모서리: 4면 모두 50vw

박스 섀도우

상자 그림자도 선택하십시오.

• 상자 그림자: 세 번째 옵션

텍스트 스타일 확장

스타일 확장 옵션을 사용하여 행에 있는 모든 텍스트 모듈의 설정을 조정합니다.

• 먼저 텍스트 모듈의 오른쪽에 있는 점을 클릭하고 "텍스트 스타일 확장"을 선택합니다.
• 그런 다음 팝업에서 "전체"를 클릭하고 "이 페이지"를 선택합니다.
• 마지막으로 각 모듈의 콘텐츠 상자에 있는 텍스트를 변경합니다.

이제 디자인이 다음과 같아야 합니다.

텍스트 모듈 2

두 번째 원을 노란색으로 만듭니다.

• 배경색: 노란색 #f2e200

텍스트 모듈 3

세 번째 원을 주황색으로 만듭니다.

• 배경색: 주황색 #f2b100

텍스트 모듈 4

네 번째 원을 주황색-빨간색으로 만듭니다.

• 배경색: 오렌지 레드

텍스트 모듈 5

다섯 번째 모듈을 보라색으로 만듭니다.

• 배경색: 보라색 #8e008c

5개의 디바이더 모듈 추가

이제 각 텍스트 모듈 아래에 구분선 모듈을 추가합니다.

그에 따라 설정을 첫 번째 구분선으로 조정합니다.

선

구분선에 색상을 지정합니다.

• 선 색상: 녹색 #2f7713

사이징

너비를 조정합니다.

• 디바이더 너비: 4px
• 폭: 13vw

간격

상단 여백 값을 추가합니다.

• 최고 여백:
  • 데스크탑: 7vw
  • 태블릿 + 전화: 5vw

변환

디바이더를 회전하여 수직이 되도록 합니다.

• 변환 회전: 첫 번째 옵션에서 90도

디바이더 설정 확장

스타일 확장 옵션을 사용하여 다른 구분선의 스타일을 지정합니다.

• 먼저 디바이더 모듈의 오른쪽에 있는 점을 클릭하고 "디바이더 스타일 확장"을 선택합니다.
• 그런 다음 팝업에서 "전체"를 클릭하고 "이 섹션"을 선택합니다.

색상 일치

디바이더 2

두 번째 구분선을 노란색으로 만듭니다.

• 선 색상: 노란색 #f2e200

디바이더 3

세 번째 구분선을 주황색으로 만듭니다.

• 선 색상: 주황색 #f2b100

디바이더 4

네 번째 구분선을 주황색으로 만듭니다.

• 라인 색상: 오렌지 레드 #ef4a21

디바이더 5

다섯 번째 구분선을 보라색으로 만듭니다.

• 선 색상: 보라색 #8e008c

행 #2 추가

새 1열 행을 추가합니다.

이미지 모듈을 추가하기 전에 행 설정을 조정하십시오.

사이징

먼저 크기를 조정합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 폭: 100%
• 최대 너비: 100%

시계

그런 다음 가시성.

• 수평 및 수직 오버플로: 표시

이미지 모듈 추가

이미지 모듈을 추가하고 주스 이미지를 업로드합니다.

사이징

이미지에 전체 너비를 적용합니다.

• 강제 전폭: 예

행 간격

마지막 터치를 할 시간입니다. 행 #1 설정을 다시 열고 위쪽 및 아래쪽 여백을 추가합니다.

• 최고 마진: 7vw
• 하단 여백:
  • 데스크탑: -24vw
  • 태블릿: -31vw
  • 전화: -35vw

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

예 #1

데스크탑

이동하는

예 #2

데스크탑

이동하는

랩입니다!

이 게시물에서는 두 가지 다른 이미지 마커 디자인을 만드는 방법을 보여 주었습니다. 열 옵션을 사용하여 텍스트 열과 구분선을 함께 유지했습니다. 이 디자인이 자신만의 이미지 마커 디자인을 만드는 데 영감을 주기를 바랍니다. 각 이미지 마커를 더 잘 제어하려면 열 내부에 변환 변환 옵션을 사용하는 것을 잊지 마십시오. 질문이 있으시면 아래의 댓글 섹션에 댓글을 남겨주세요!