كيفية إنشاء وحدة شخص باستخدام السيرة الذاتية انقر فوق

في هذا المنشور ، سنوضح لك كيفية إنشاء وحدة شخص باستخدام السيرة الذاتية عند النقر. بمجرد النقر فوق وحدة شخص أخرى في نفس الصف ، سيتغير النص الموجود في السيرة الذاتية. في أي وقت ، يمكنك إغلاق السيرة الذاتية بالنقر فوق وحدة الأشخاص مرة أخرى.

يمكنك استخدام هذا ، على سبيل المثال ، لعرض بعض المعلومات الإضافية حول موظفيك على موقع شركتك على الويب. يساعدك المفهوم على القيام بأمرين: التفاعل مع زوارك وحفظ المكان على موقع الويب الخاص بك. المرة الوحيدة التي يتم فيها عرض السيرة الذاتية فعليًا هي بمجرد أن يبدي الزائر اهتمامًا ويقرر النقر فوق العناصر الموجودة في وحدة الشخص.

وحدة الشخص الناتج مع السيرة الذاتية عند النقر

قبل أن نتعمق في الخطوات المختلفة التي يتعين عليك اتباعها لتحقيق وحدة شخصية بنقرة حيوية ، دعنا نلقي نظرة على النتيجة النهائية على سطح المكتب:

والنتيجة النهائية على الهاتف والجهاز اللوحي:

مع الهاتف المحمول ، إذا تم فتح سيرة ذاتية واحدة ، فسيتم إغلاق السير الآخرين تلقائيًا. سيكون لديك دائمًا قسم سيرة ذاتية واحد مفتوح ، على الرغم من أن كل سيرة ذاتية لها قسم خاص بها.

وحدة الشخص مع السيرة الذاتية عند النقر لسطح المكتب

اشترك في قناتنا على اليوتيوب

لجعل كل شيء يعمل بسلاسة ، سنحتاج إلى إصدار نسختين: أحدهما لسطح المكتب والآخر للأجهزة اللوحية والهواتف. سيحتاج كل إصدار من هذه الإصدارات إلى كود jQuery الخاص به. سنبدأ بإصدار سطح المكتب وفي الجزء التالي من المنشور سنوضح لك كيفية إنشاء الإصدار للأجهزة اللوحية والهواتف.

أضف المقطع القياسي للشخص بصف من ثلاثة أعمدة

أول شيء علينا القيام به هو إضافة قسم يحتوي على وحدات الشخص.

افتح صفحة جديدة (أو الصفحة التي ترغب في إضافة وحدة الشخص إليها مع السيرة الذاتية) وأضف قسمًا قياسيًا جديدًا. ضمن هذا القسم ، ضع صفًا من ثلاثة أعمدة. بالطبع ، يمكنك استخدام عدد آخر من الأعمدة أيضًا ، لكن الكود الذي سنستخدمه يأخذ 3 وحدات شخص في الاعتبار. إذا كنت تريد إنشاء نفس الشيء لأنواع أخرى من الصفوف ، فسيتعين عليك إجراء بعض التعديلات على كود jQuery الذي سنوفره لاحقًا في هذا المنشور.

إعدادات الصف

افتح إعدادات الصف وضمن علامة تبويب المحتوى ، أضف "# e5e5e5" كلون خلفية لكل عمود.

بعد ذلك ، انتقل إلى علامة التبويب خيارات متقدمة وأدخل ظل المربع التالي إلى العنصر الرئيسي لكل صف من الصفوف الثلاثة:

قم بإضافة "وحدة نمطية للشخص"

الشيء التالي الذي ستحتاج إلى القيام به هو إضافة وحدة شخصية إلى العمود الأول من الصف.

علامة تبويب المحتوى

ضمن علامة التبويب "المحتوى" في تلك الوحدة ، اكتب المعلومات وروابط الوسائط الاجتماعية وحمّل الصورة.

علامة تبويب متقدمة

لن نجري أي تعديلات على علامة تبويب التصميم الخاصة بهذه الوحدة (لا تتردد في إجراء أي تغييرات على المظهر بعد ذلك). بدلاً من ذلك ، سننتقل إلى علامة التبويب خيارات متقدمة على الفور حيث سنضيف ظل المربع نفسه الذي أضفناه إلى أعمدة الصف ، إلى صورة العضو.

استنساخ وحدة الشخص

الشيء التالي الذي عليك القيام به هو استنساخ وحدة الشخص مرتين ووضعها في العمودين الآخرين. سنحتاج إلى العودة إلى هذا القسم لإضافة فئات CSS المختلفة. لكن قبل أن نفعل ذلك ، سنضيف قسم السيرة الذاتية أولاً.

أضف قسم Bio Standard بصف كامل العرض

أضف قسمًا قياسيًا آخر أسفل القسم السابق الذي قمت بإنشائه مباشرةً. في هذا القسم ، سنحتاج إلى إضافة وحدات نصية مختلفة مرتبطة بوحدات الأشخاص المختلفة. افتح إعدادات القسم واستخدم اللون "# a0a0a0" كلون للخلفية.

أضف وحدتين نصيتين

بناءً على عدد الوحدات النصية التي تريد أن تحتوي عليها السيرة الذاتية لوحدة الشخص ، يمكنك إضافة وحدات نصية. في هذه الحالة ، سنقوم بإضافة وحدتين نصيتين لكل شخص.

أول وحدة نصية

اكتب بعض النص في الوحدة النمطية الأولى للنص وانتقل إلى علامة التبويب التصميم. ضمن علامة التبويب تصميم ، قم بإجراء التغييرات التالية على فئة النص الفرعية:

• اتجاه النص: الوسط
• حجم خط النص: 31
• لون النص: #FFFFFF
• ارتفاع خط النص: 1.7em

وحدة النص الثانية

أضف وحدة نصية أخرى وقم بإجراء التغييرات التالية على الفئة الفرعية للنص في علامة التبويب تصميم:

• اتجاه النص: الوسط
• حجم خط النص: 16
• لون النص: #FFFFFF
• ارتفاع خط النص: 1.7em

استنساخ كل وحدة مرتين

ستكون هاتان الوحدتان النصيتان متماثلتان لكل واحدة من السير. لهذا السبب يجب عليك استنساخ كل وحدة من الوحدات النصية مرتين. هذا هو الشكل الذي يجب أن تبدو عليه البنية النهائية في نهاية الصفحة الخلفية:

فئات CSS المختلفة

قم بتعيين فئات CSS إلى وحدات الشخص

انتقل إلى علامة التبويب خيارات متقدمة في كل واحدة من وحدات الأشخاص وقم بتعيين فئات CSS التالية:

• وحدة الشخص الأول: شخص 1
• وحدة الشخص الثاني: شخص 2
• وحدة الشخص الثالث: شخص 3

قم بتعيين فئة CSS إلى القسم

افتح إعدادات القسم حيث يتم وضع السير الخاص بك. انتقل إلى علامة التبويب خيارات متقدمة واكتب "section_1" في فئة CSS.

قم بتعيين فئات CSS إلى وحدات النص

الآن ، أضف CSS Classes إلى Text Modules التي قمت بإنشائها بالطريقة التالية:

• مرتبط بوحدة الشخص الأول: div_text_1
• مرتبط بوحدة الشخص الثاني: div_text_2
• مرتبط بوحدة الشخص الثالث: div_text_3

إضافة كود عرض CSS إلى قسم & كافة الوحدات النمطية للنص

الخطوة التالية التي ستحتاج إلى القيام بها هي الانتقال إلى علامة التبويب خيارات متقدمة في القسم وجميع الوحدات النمطية النصية. بعد ذلك ، أضف السطر التالي من كود CSS إلى العنصر الرئيسي في القسم:

display: none;

تعطيل على الهاتف والكمبيوتر اللوحي

الآن ، قم بتعطيل كلا القسمين اللذين قمت بإنشائهما للجوال والكمبيوتر اللوحي.

وحدة الشخص مع السيرة الذاتية عند النقر على الجهاز اللوحي والهاتف

الآن بعد أن أوضحنا لك كيفية إنشاء وحدة الشخص باستخدام السيرة الذاتية عند النقر لسطح المكتب ، سنوضح لك كيفية صنعها للجهاز اللوحي والهاتف أيضًا. لقد قمنا بالفعل بتعطيل الأقسام السابقة للهاتف والجهاز اللوحي. هذا ما يبدو عليه تخطيط سطح المكتب على الواجهة الخلفية:

وهذا هو الهيكل الذي نحتاجه لإصدار الجهاز اللوحي والهاتف.

إضافة ستة أقسام جديدة

لذا ، امض قدمًا وأضف ستة أقسام جديدة إلى الصفحة. ثم قم باستنساخ وحدات الشخص ووضع كل منها في قسم على حدة. تأكد من ترك قسم بينهما ، حيث ستأتي السيرة الذاتية في النهاية.

بعد ذلك ، أضف نسخ وحدات النص ووضعها في القسم الموجود أسفل كل قسم يحتوي على وحدة نمط الشخص. سيتم عرض السيرة الذاتية ، بشكل افتراضي ، أسفل وحدة الشخص على الهاتف المحمول والكمبيوتر اللوحي.

.

معرفات وفئات CSS المختلفة

بمجرد وضع جميع الأقسام والوحدات في مكانها الصحيح ، حان الوقت لبدء إضافة فئات CSS.

قم بتعيين فئات CSS إلى وحدات الشخص

ابدأ بفتح كل وحدة شخص على حدة وتغيير فئات CSS في علامة التبويب Advanced إلى:

• وحدة الشخص الأول: mobile_person1
• وحدة الشخص الثاني: mobile_person2
• وحدة الشخص الثالث: mobile_person3

قم بتعيين فئات CSS إلى الأقسام

بعد ذلك ، افتح جميع أقسام السيرة الذاتية المختلفة وقم بتعيين ما يلي لكل قسم منها:

• قسم السيرة الذاتية الأول: section_mobile_1
• قسم السيرة الذاتية الثاني: Secton_mobile_2
• قسم السيرة الذاتية الثالث: section_mobile_3

قم بتعيين فئات CSS إلى وحدات النص

فئات CSS الأخيرة التي ستحتاج إلى منحها مكانًا هي تلك المرتبطة بالوحدات النمطية النصية في أقسام السيرة الذاتية المختلفة. وفقًا لقسم السيرة الذاتية ، قم بتعيين فئات CSS التالية إلى الوحدات النمطية النصية داخل هذا القسم:

• مرتبط بوحدة الشخص الأول: div_mobile_text_1
• مرتبط بوحدة الشخص الثاني: div_mobile_text_2
• مرتبط بوحدة الشخص الثالث: div_mobile_text_3

أضف كود Display CSS إلى الأقسام

للمضي قدمًا ، سيتعين عليك جعل جميع أقسام السيرة الذاتية غير مرئية. انتقل إلى علامة التبويب خيارات متقدمة في كل قسم وانسخ والصق السطر التالي من كود CSS في العنصر الرئيسي:

display: none;

تأكد من إزالة هذا السطر من كود CSS في العنصر الرئيسي لكل وحدة نصية. في إصدار سطح المكتب ، احتجنا إلى جعلها غير مرئية ، لكن هذا ليس ضروريًا للجوال والكمبيوتر اللوحي.

تعطيل على سطح المكتب

الآن ، بعد إجراء جميع التعديلات ، هناك شيء واحد يجب القيام به قبل إضافة الكود: تعطيل الأقسام الحيوية الثلاثة على سطح المكتب. انطلق وافتح كل قسم من الأقسام وانتقل إلى علامة التبويب خيارات متقدمة. ضمن فئة الرؤية الفرعية لعلامة التبويب خيارات متقدمة ، قم بتعطيل الأقسام الموجودة على سطح المكتب.

أضف كود jQuery

الآن بعد أن أجرينا جميع التغييرات العملية على Divi builder ، حان الوقت للانتقال إلى الخطوة الأخيرة ؛ إضافة كود jQuery.

أضف وحدة رمز جديدة

أسهل طريقة لإضافة الرمز إلى صفحتك هي من خلال Code Module. من المحتمل أن تستخدم وحدة الشخص هذه مع السيرة الذاتية عند النقر على صفحة واحدة فقط. باستخدام وحدة التعليمات البرمجية ، ستتأكد من تحميل الشفرة فقط عندما يكون شخص ما على تلك الصفحة. انسخ والصق الرمزين المنفصلين في jQuery في وحدة التعليمات البرمجية نفسها.

ضع Desktop jQuery Code في وحدة التعليمات البرمجية الخاصة بك

انسخ والصق الأسطر التالية من كود 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 freebie!