클릭 시 Bio로 사람 모듈을 만드는 방법

게시 됨: 2017-08-16

이 게시물에서는 클릭 시 바이오로 사람 모듈을 만드는 방법을 보여줍니다. 같은 행에 있는 다른 사람 모듈을 클릭하는 즉시 약력 내의 텍스트가 변경됩니다. 언제든지 사람 모듈을 다시 클릭하여 약력을 닫을 수 있습니다.

예를 들어 이를 사용하여 회사 웹사이트에 직원에 대한 몇 가지 추가 정보를 표시할 수 있습니다. 이 개념은 방문자와 상호 작용하고 웹 사이트에서 장소를 절약하는 두 가지 작업을 수행하는 데 도움이 됩니다. 약력이 실제로 표시되는 유일한 시간은 방문자가 관심을 표시하고 사람 모듈 내의 요소를 클릭하기로 결정한 경우입니다.

클릭 시 바이오가 포함된 결과 개인 모듈

클릭 시 바이오가 포함된 개인 모듈을 달성하기 위해 따라야 하는 여러 단계를 살펴보기 전에 데스크탑에서 최종 결과를 살펴보겠습니다.

바이오가 있는 사람 모듈

모바일 및 태블릿에서의 최종 결과:

바이오가 있는 사람 모듈

모바일에서는 한 바이오가 열리면 나머지 두 바이오는 자동으로 닫힙니다. 각 약력에는 고유한 섹션이 있지만 항상 하나의 약력 섹션만 열려 있습니다.

데스크탑용 클릭 시 바이오가 있는 개인 모듈

YouTube 채널 구독

모든 것이 원활하게 작동하도록 하려면 데스크톱용과 태블릿 및 휴대폰용의 두 가지 버전을 만들어야 합니다. 이러한 각 버전에는 고유한 jQuery 코드가 필요합니다. 데스크톱 버전으로 시작하고 게시물의 다음 부분에서 태블릿 및 휴대폰용 버전을 만드는 방법을 보여드리겠습니다.

3열 행이 있는 개인 표준 섹션 추가

가장 먼저 해야 할 일은 Person 모듈이 포함된 섹션을 추가하는 것입니다.

새 페이지(또는 바이오가 있는 Person 모듈을 추가하려는 페이지)를 열고 새 표준 섹션을 추가하십시오. 해당 섹션 내에서 세 개의 열로 이루어진 행을 배치합니다. 물론 다른 수의 열도 사용할 수 있지만 우리가 사용할 코드는 3개의 개인 모듈을 고려합니다. 다른 유형의 행에 대해 동일한 것을 생성하려면 이 게시물의 뒷부분에서 제공할 jQuery 코드를 약간 수정해야 합니다.

행 설정

행 설정을 열고 콘텐츠 탭 내에서 각 열의 배경색으로 '#e5e5e5'를 추가합니다.

person module with bio

그런 다음 고급 탭으로 이동하여 세 행 중 각 행의 기본 요소에 다음 상자 그림자를 삽입합니다.

사람 모듈 추가

다음으로 해야 할 일은 행의 첫 번째 열에 Person 모듈을 추가하는 것입니다.

콘텐츠 탭

해당 모듈의 콘텐츠 탭에서 정보 및 소셜 미디어 링크를 입력하고 이미지를 업로드합니다.

고급 탭

우리는 이 모듈의 디자인 탭을 수정하지 않을 것입니다(나중에 모양을 자유롭게 변경할 수 있습니다). 대신 행 열에 추가한 것과 동일한 상자 그림자를 멤버 이미지에 추가하는 즉시 고급 탭으로 이동합니다.

사람 모듈 복제

다음으로 해야 할 일은 Person 모듈을 두 번 복제하고 다른 두 열에 배치하는 것입니다. 다른 CSS 클래스를 추가하려면 이 섹션으로 돌아와야 합니다. 하지만 그 전에 먼저 바이오 섹션을 추가할 것입니다.

전체 너비 행이 있는 Bio Standard 섹션 추가

이전에 생성한 섹션 바로 아래에 다른 표준 섹션을 추가합니다. 이 섹션에서는 다양한 사람 모듈에 연결된 다른 텍스트 모듈을 추가해야 합니다. 섹션의 설정을 열고 '#a0a0a0' 색상을 배경색으로 사용합니다.

두 개의 텍스트 모듈 추가

개인 모듈의 약력에 원하는 텍스트 모듈의 수에 따라 텍스트 모듈을 추가할 수 있습니다. 이 경우 사람 모듈당 두 개의 텍스트 모듈을 추가합니다.

첫 번째 텍스트 모듈

첫 번째 텍스트 모듈에 일부 텍스트를 입력하고 디자인 탭으로 이동합니다. 디자인 탭에서 텍스트 하위 범주를 다음과 같이 변경합니다.

텍스트 방향: 중앙
텍스트 글꼴 크기: 31
텍스트 색상: #FFFFFF
텍스트 줄 높이: 1.7em

두 번째 텍스트 모듈

다른 텍스트 모듈을 추가하고 디자인 탭의 텍스트 하위 범주를 다음과 같이 변경합니다.

텍스트 방향: 중앙
텍스트 글꼴 크기: 16
텍스트 색상: #FFFFFF
텍스트 줄 높이: 1.7em

각 모듈을 두 번 복제

이 두 텍스트 모듈은 바이오스 각각에 대해 동일할 것입니다. 그렇기 때문에 각 텍스트 모듈을 두 번 복제해야 합니다. 페이지의 백엔드에서 최종 구조는 다음과 같이 표시되어야 합니다.

다양한 CSS 클래스

Person 모듈에 CSS 클래스 할당

각 개인 모듈의 고급 탭으로 이동하여 다음 CSS 클래스를 할당합니다.

1인칭 모듈: person1
2인칭 모듈: person2
3인칭 모듈: person3

섹션에 CSS 클래스 할당

바이오스가 있는 섹션의 설정을 엽니다. 고급 탭으로 이동하여 CSS 클래스에 "section_1"을 적어둡니다.

텍스트 모듈에 CSS 클래스 할당

이제 다음과 같은 방법으로 생성한 텍스트 모듈에 CSS 클래스를 추가합니다.

첫 번째 사람 모듈에 연결됨 : div_text_1
두 번째 사람 모듈에 연결됨 : div_text_2
세 번째 사람 모듈에 연결됨 : div_text_3

섹션 및 모든 텍스트 모듈에 디스플레이 CSS 코드 추가

다음 단계는 섹션의 고급 탭과 모든 텍스트 모듈로 이동하는 것입니다. 그런 다음 섹션의 기본 요소에 다음 CSS 코드 줄을 추가합니다.

display: none;

휴대전화 및 태블릿에서 사용 중지

이제 모바일 및 태블릿용으로 만든 두 섹션을 모두 비활성화합니다.

태블릿 및 전화용 클릭 시 바이오가 있는 개인 모듈

데스크탑용 클릭 시 바이오로 사람 모듈을 만드는 방법을 보여 주었으므로 태블릿 및 휴대폰용으로도 만드는 방법을 보여 드리겠습니다. 이미 휴대전화 및 태블릿에 대한 이전 섹션을 비활성화했습니다. 백엔드에서 데스크탑 레이아웃은 다음과 같습니다.

그리고 이것은 태블릿 및 전화 버전에 필요한 구조입니다.

6개의 새로운 섹션 추가

따라서 페이지에 6개의 새 섹션을 추가합니다. 그런 다음 person 모듈을 복제하고 각 모듈을 섹션에 개별적으로 넣습니다. 중간에 섹션을 남겨 두십시오. 바이오가 결국 올 곳입니다.

다음으로, 텍스트 모듈을 추가하고 개인 모듈이 포함된 각 섹션 아래 섹션에 배치합니다. 약력은 기본적으로 모바일 및 태블릿의 사람 모듈 아래에 표시됩니다.

다양한 CSS 클래스 및 ID

모든 섹션과 모듈을 제자리에 배치했으면 CSS 클래스를 추가할 차례입니다.

Person 모듈에 CSS 클래스 할당

각 개인 모듈을 개별적으로 열고 고급 탭에서 CSS 클래스를 다음과 같이 변경하여 시작합니다.

1인칭 모듈: mobile_person1
2인칭 모듈: mobile_person2
3인칭 모듈: mobile_person3

섹션에 CSS 클래스 할당

다음으로, 모든 다른 바이오 섹션을 열고 각각에 다음을 할당하십시오:

첫 번째 약력 섹션: section_mobile_1
두 번째 약력 섹션: secton_mobile_2
세 번째 약력 섹션: section_mobile_3

텍스트 모듈에 CSS 클래스 할당

장소를 제공해야 하는 마지막 CSS 클래스는 다른 바이오 섹션의 텍스트 모듈에 연결된 클래스입니다. bio 섹션에 따라 해당 섹션 내의 텍스트 모듈에 다음 CSS 클래스를 할당합니다.

첫 번째 사람 모듈에 연결됨 : div_mobile_text_1
두 번째 사람 모듈에 연결됨 : div_mobile_text_2
세 번째 사람 모듈에 연결됨 : div_mobile_text_3

섹션에 디스플레이 CSS 코드 추가

계속해서 모든 바이오 섹션을 보이지 않게 해야 합니다. 각 섹션의 고급 탭으로 이동하여 다음 CSS 코드 줄을 복사하여 기본 요소에 붙여넣습니다.

display: none;

각 텍스트 모듈의 기본 요소에서 이 CSS 코드 행을 제거했는지 확인하십시오. 데스크톱 버전에서는 보이지 않게 해야 했지만 모바일과 태블릿에서는 그럴 필요가 없습니다.

데스크탑에서 비활성화

이제 모든 수정 작업을 수행한 후 코드를 추가하기 전에 한 가지 작업이 남았습니다. 데스크톱에서 세 가지 바이오 섹션을 비활성화하는 것입니다. 각 섹션을 열고 고급 탭으로 이동하십시오. 고급 탭의 가시성 하위 범주 내에서 바탕 화면의 섹션을 비활성화합니다.

jQuery 코드 추가

이제 Divi 빌더에 대한 모든 실질적인 변경 사항을 적용했으므로 마지막 단계로 넘어갈 차례입니다. jQuery 코드를 추가합니다.

새 코드 모듈 추가

페이지에 코드를 추가하는 가장 쉬운 방법은 코드 모듈을 사용하는 것입니다. 한 페이지만 클릭하면 이 사람 모듈을 약력과 함께 사용할 것입니다. 코드 모듈을 사용하면 누군가가 해당 페이지에 있을 때만 코드가 로드되도록 할 수 있습니다. 두 개의 jQuery 별도 코드를 복사하여 동일한 코드 모듈에 붙여넣습니다.

데스크톱 jQuery 코드를 코드 모듈에 배치

다음 CSS 코드 줄을 복사하여 코드 모듈에 붙여넣어 클릭 시 데스크톱 바이오가 작동하도록 합니다.

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_1");
var text_img_1 = $(".div_text_1");
var text_img_2 = $(".div_text_2");
var text_img_3 = $(".div_text_3");

$(".person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

태블릿 및 휴대폰 jQuery 코드를 코드 모듈에 배치

태블릿 및 휴대폰용 버전이 작동하도록 하는 다음 코드 줄:

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_mobile_1");
var section_2 = $(".section_mobile_2");
var section_3 = $(".section_mobile_3");

var text_img_1 = $(".div_mobile_text_1");
var text_img_2 = $(".div_mobile_text_2");
var text_img_3 = $(".div_mobile_text_3");

$(".mobile_person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_2.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

최종 결과

이 게시물 전체에 걸쳐 모든 단계를 수행한 후 결과를 마지막으로 살펴보겠습니다. 데스크탑에서는 다음과 같이 표시됩니다.

바이오가 있는 사람 모듈

모바일 및 태블릿:

바이오가 있는 사람 모듈

마무리

이 게시물에서는 클릭 시 숨기고 표시되는 바이오로 사람 모듈을 만드는 방법을 보여주었습니다. 이 방법을 적용하면 웹사이트의 일부 장소를 저장하고 방문자가 관심을 보일 때만 이를 보여줄 수 있습니다. 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 댓글을 남겨주세요!

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!