Как создать персональный модуль с биографией по клику

В этом посте мы покажем вам, как создать модуль человека с биографией при нажатии. Как только вы щелкнете по модулю другого человека в той же строке, текст в биографии изменится. В любой момент вы можете закрыть биографию, снова щелкнув модуль человека.

Вы можете использовать это, например, чтобы показать дополнительную информацию о ваших сотрудниках на веб-сайте вашей компании. Эта концепция помогает вам делать две вещи: взаимодействовать с посетителями и экономить место на вашем сайте. Единственный раз, когда на самом деле будет показана биография, - это когда посетитель проявит интерес и решит щелкнуть элементы в модуле Person.

Модуль Result Person с биографией при нажатии

Прежде чем мы погрузимся в различные шаги, которые необходимо выполнить для создания модуля Person с биографией при нажатии, давайте посмотрим на окончательный результат на рабочем столе:

и конечный результат на мобильных устройствах и планшетах:

На мобильном устройстве, если открывается одна биография, две другие биографии автоматически закрываются. У вас всегда будет открыта только одна биография, хотя каждая биография имеет свой собственный раздел.

Персональный модуль с биографией на клике для рабочего стола

Подпишитесь на наш канал Youtube

Чтобы все работало бесперебойно, нам нужно сделать две версии: одну для настольных компьютеров и одну для планшетов и телефонов. Для каждой из этих версий потребуется собственный код jQuery. Мы начнем с настольной версии, а в следующей части публикации мы покажем вам, как сделать версию для планшетов и телефонов.

Добавьте стандартную секцию Person с трехколоночной строкой

Первое, что нам нужно сделать, это добавить раздел, содержащий модули Person.

Откройте новую страницу (или страницу, на которую вы хотите добавить модуль Person с биографией) и добавьте новый стандартный раздел. Внутри этого раздела разместите ряд из трех столбцов. Конечно, вы можете использовать и другое количество столбцов, но код, который мы будем использовать, принимает во внимание модули для 3 человек. Если вы хотите создать то же самое для других типов строк, вам придется внести некоторые изменения в код jQuery, который мы предоставим позже в этом посте.

Настройки строки

Откройте настройки строки и на вкладке содержимого добавьте «# e5e5e5» в качестве цвета фона каждого столбца.

Затем перейдите на вкладку «Дополнительно» и вставьте следующую тень блока в основной элемент каждой из трех строк:

Добавить модуль "Человек"

Следующее, что вам нужно сделать, это добавить модуль Person в первый столбец строки.

Вкладка Content

На вкладке Content этого модуля введите информацию и ссылки на социальные сети и загрузите изображение.

Продвинутая вкладка

Мы не собираемся вносить какие-либо изменения во вкладку «Дизайн» этого модуля (не стесняйтесь вносить какие-либо изменения во внешний вид впоследствии). Вместо этого мы сразу перейдем на вкладку «Дополнительно», где добавим ту же тень блока, которую мы добавили к столбцам строки, к изображению элемента.

Клонировать модуль "Человек"

Следующее, что вам нужно сделать, это дважды клонировать модуль Person и поместить его в два других столбца. Нам нужно будет вернуться в этот раздел, чтобы добавить различные классы CSS. Но прежде чем мы это сделаем, мы сначала добавим раздел с биографией.

Добавьте секцию стандарта био с строкой на всю ширину

Добавьте еще один стандартный раздел прямо под предыдущим созданным разделом. В этом разделе нам нужно будет добавить различные текстовые модули, которые связаны с различными модулями Person. Откройте настройки раздела и используйте цвет # a0a0a0 в качестве цвета фона.

Добавить два текстовых модуля

В зависимости от того, сколько текстовых модулей вы хотите иметь в биографии модуля человека, вы можете добавить текстовые модули. В этом случае мы добавим два текстовых модуля на каждый модуль.

Первый текстовый модуль

Введите текст в первый текстовый модуль и перейдите на вкладку «Дизайн». На вкладке «Дизайн» внесите следующие изменения в подкатегорию «Текст»:

• Ориентация текста: по центру
• Размер шрифта текста: 31
• Цвет текста: #FFFFFF
• Высота текстовой строки: 1,7 мкм

Второй текстовый модуль

Добавьте еще один текстовый модуль и внесите следующие изменения в подкатегорию «Текст» на вкладке «Дизайн»:

• Ориентация текста: по центру
• Размер шрифта текста: 16
• Цвет текста: #FFFFFF
• Высота текстовой строки: 1,7 мкм

Клонировать каждый модуль дважды

Эти два текстовых модуля будут одинаковыми для каждой биографии. Вот почему вам следует дважды клонировать каждый из текстовых модулей. Вот как должна выглядеть окончательная структура в задней части страницы:

Различные классы CSS

Назначьте классы CSS для модулей Person

Перейдите на вкладку Advanced каждого из модулей Person и назначьте следующие классы CSS:

• Модуль от первого лица: person1
• Модуль от второго лица: person2
• Модуль от третьего лица: person3

Назначьте класс CSS для раздела

Откройте настройки раздела, в котором размещен ваш биос. Перейдите на вкладку «Дополнительно» и запишите «section_1» в класс CSS.

Назначьте классы CSS текстовым модулям

Теперь добавьте классы CSS в текстовые модули, которые вы создали, следующим образом:

• Связан с первым модулем Person: div_text_1
• Связан со вторым модулем Person: div_text_2
• Связан с модулем от третьего лица: div_text_3

Добавить отображаемый CSS-код в раздел и все текстовые модули

Следующий шаг, который вам нужно сделать, - это перейти на вкладку «Дополнительно» раздела и всех текстовых модулей. Затем добавьте следующую строку кода CSS в основной элемент раздела:

display: none;

Отключить на телефоне и планшете

Теперь отключите оба раздела, которые вы создали для мобильных устройств и планшетов.

Персональный модуль с биографией на клике для планшета и телефона

Теперь, когда мы показали вам, как создать модуль человека с биографией при нажатии для рабочего стола, мы покажем вам, как сделать его также для планшета и телефона. Мы уже отключили предыдущие разделы для телефона и планшета. Вот как выглядит компоновка рабочего стола на бэкенде:

И это структура, которая нам нужна для версии для планшета и телефона.

Добавить шесть новых разделов

Итак, добавляем на страницу шесть новых разделов. Затем клонируйте модули людей и поместите каждый в отдельную секцию. Убедитесь, что вы оставили промежуточный раздел, вот где в конечном итоге появится биография.

Затем добавьте клонирование текстовых модулей и поместите их в раздел под каждым разделом, который содержит модуль Person. По умолчанию биография будет отображаться под модулем «Персонал» на мобильных устройствах и планшетах.

.

Различные классы и идентификаторы CSS

После того, как вы разместили все разделы и модули, пора начинать добавлять классы CSS.

Назначьте классы CSS для модулей Person

Начните с открытия каждого индивидуального модуля индивидуально и измените классы CSS на вкладке «Дополнительно» на:

• Модуль от первого лица: mobile_person1
• Модуль от второго лица: mobile_person2
• Модуль от третьего лица: mobile_person3

Назначьте классы CSS разделам

Затем откройте все различные разделы биографии и назначьте каждому из них следующее:

• Первый раздел биографии: section_mobile_1
• Второй раздел биографии: secton_mobile_2
• Третий раздел биографии: section_mobile_3

Назначьте классы CSS текстовым модулям

Последние классы CSS, которые вам нужно будет выделить, связаны с текстовыми модулями в различных разделах биографии. Согласно разделу биографии, назначьте следующие классы CSS текстовым модулям в этом разделе:

• Связан с модулем первого человека: div_mobile_text_1
• Связан со вторым модулем Person: div_mobile_text_2
• Связан с модулем от третьего лица: div_mobile_text_3

Добавить отображаемый CSS-код в разделы

Двигаясь дальше, вам нужно сделать все разделы биографии невидимыми. Перейдите на вкладку Advanced каждого из разделов, скопируйте и вставьте следующую строку кода CSS в основной элемент:

display: none;

Убедитесь, что вы удалили эту строку кода CSS в основном элементе каждого текстового модуля. В версии для ПК нам нужно было сделать их невидимыми, но это не обязательно для мобильных устройств и планшетов.

Отключить на рабочем столе

Теперь, после того, как вы внесли все изменения, осталось сделать одно перед добавлением кода: отключить три раздела биографии на рабочем столе. Идите вперед и откройте каждый из разделов и перейдите на вкладку Advanced. В подкатегории «Видимость» на вкладке «Дополнительно» отключите разделы на рабочем столе.

Добавить код 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>

Конечный результат

Давайте в последний раз посмотрим на результат, когда вы выполните все шаги в этом посте. Вот как это будет выглядеть на рабочем столе:

И на мобильном телефоне, и на планшете:

Подведение итогов

В этом посте мы показали вам, как создать модуль человека с биографией, который скрывается и отображается при нажатии. Применяя этот метод, вы сможете сэкономить место на своем веб-сайте и показывать его своим посетителям только после того, как они проявят интерес. Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже!

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!