كيفية إنشاء شجرة عائلة مع إعدادات تحويل Divi

هل سبق وحاولت إنشاء شجرة عائلة لموقعك على الويب ، لكنك لم تعرف بالضبط كيف تتعامل معها؟ حسنًا ، في برنامج Divi التعليمي اليوم ، سنعرض لك بالضبط كيفية القيام بذلك. علاوة على إنشاء شجرة العائلة ، نتأكد أيضًا من استمرار استجابتها عبر جميع أحجام الشاشات. بمجرد الانتهاء من إنشاء شجرة العائلة ، ستتمكن دائمًا من تعديل الصور والنص والتصميم وفقًا لتفضيلاتك وجعلها جاهزة للبث المباشر! هل تريد البدء في تصميم شجرة العائلة على الفور؟ ستتمكن من تنزيل ملف JSON مجانًا وإضافته إلى أي موقع ويب تقوم بإنشائه!

دعنا نذهب اليها.

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل Family Tree Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

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

تحديد مكانة أفراد الأسرة

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

تباعد

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

• الحشو العلوي: 8vw
• الحشو السفلي: 8vw

أضف الصف رقم 1

هيكل العمود

تابع بإضافة الصف الأول إلى القسم الخاص بك باستخدام بنية العمود التالية:

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• الحشو الأيسر: 15vw (سطح المكتب) ، 0vw (الكمبيوتر اللوحي والهاتف)
• الحشو الأيمن: 15vw (سطح المكتب) ، 0vw (الكمبيوتر اللوحي والهاتف)

أضف وحدة الصورة النمطية إلى العمود

تحميل الصور

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

انتقام

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير محاذاة الصورة.

• محاذاة الصورة: المركز

تحجيم

قم بتعديل إعدادات التحجيم بعد ذلك.

• العرض: 49٪
• محاذاة الوحدة: المركز

الحدود

وقم بتحويل الصورة إلى دائرة عن طريق إضافة قيمة عالية لكل زاوية من الزوايا في إعدادات الحدود. نحن نستخدم "20vw" ولكن يمكنك استخدام أي رقم كبير تريده.

أضف وحدة نصية إلى العمود

إضافة محتوى

إلى الوحدة التالية ، وهي وحدة نصية. أضف اسم فرد العائلة هنا.

لون الخلفية

بعد ذلك ، انتقل إلى إعدادات الخلفية وقم بتغيير لون الخلفية إلى الأبيض.

• لون الخلفية: #ffffff

إعدادات النص

عدّل إعدادات النص بعد ذلك. إذا كنت ترغب في إنشاء شكل ومظهر آخر لشجرة العائلة ، فلا تتردد في اللعب بهذه الإعدادات.

• خط النص: Open Sans
• لون النص: # 000000
• حجم النص: 0.8vw (سطح المكتب) ، 1.2vw (جهاز لوحي) ، 1.9vw (هاتف)
• ارتفاع خط النص: 0.4em
• اتجاه النص: الوسط

تباعد

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

• الهامش العلوي: -0.5vw
• الهامش الأيسر: 1vw
• الهامش الأيمن: 1vw
• الحشوة العلوية: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 5vw (هاتف)
• الحشوة السفلية: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 5vw (هاتف)

الحدود

انتقل إلى إعدادات الحدود وأضف حدًا علويًا أيضًا.

• عرض الحد العلوي: 5 بكسل
• لون الحد العلوي: # 000000

مربع الظل

جنبًا إلى جنب مع Box Shadow لإنشاء عمق على الصفحة.

• مربع الظل الرأسي: 10 بكسل
• مربع قوة طمس الظل: 50 بكسل
• لون الظل: rgba (0،0،0،0.17)

فهرس Z.

للتأكد من بقاء وحدة النص في أعلى وحدة الصورة ، سنزيد فهرس Z في إعدادات الرؤية لوحدة النص.

• فهرس Z: 2

صف استنساخ ثلاث مرات

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

تخصيص الصف رقم 1

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

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

العمود العنصر الرئيسي CSS

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

display: grid;
grid-template-columns: repeat(8, 12.5%);

تخصيص الصف رقم 2

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

إلى الصف الثاني! هنا ، سنقوم باستنساخ كلتا الوحدتين 3 مرات.

عنصر العمود الرئيسي

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

display: grid;
grid-template-columns: repeat(4, 25%);

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

تخصيص الصف رقم 3

استنساخ كلتا الوحدتين

إلى الصف الثالث! استنساخ كل وحدة مرة واحدة.

عنصر العمود الرئيسي

ثم أضف الأسطر التالية من كود CSS إلى العنصر الرئيسي للعمود:

display: grid;
grid-template-columns: repeat(2, 50%);

تخصيص الصف رقم 4

المسافة بين السطور

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• الحشو الأيسر: 31vw
• الحشوة اليمنى: 31vw

ربط أفراد الأسرة باستخدام وحدات الصورة

أضف الصف رقم 1

هيكل العمود

الآن بعد أن اصطفنا جميع أفراد العائلة ، يمكننا البدء في الاتصال بهم! للقيام بذلك ، أضف صفًا جديدًا بين الصف الأول والصف الثاني.

تحجيم

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

• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• الحشو الأيسر: 15vw (سطح المكتب) ، 0vw (الكمبيوتر اللوحي والهاتف)
• الحشو الأيمن: 15vw (سطح المكتب) ، 0vw (الكمبيوتر اللوحي والهاتف)

أضف وحدة الصورة النمطية إلى العمود

تحميل الرسم التوضيحي

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

تحجيم

انتقل إلى إعدادات تغيير الحجم في وحدة الصورة وقم بتمكين خيار "فرض العرض الكامل".

• فرض عرض كامل: نعم

تباعد

تأكد من تعطيل خيار "إظهار المساحة أسفل الصورة" في إعدادات التباعد.

• إظهار المساحة أسفل الصورة:

استنساخ صف مرتين وتغيير موقعهم

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

تخصيص الصف رقم 1

وحدة استنساخ الصورة ثلاث مرات

عد إلى الصف الأول واستنساخ الوحدة 3 مرات.

عنصر العمود الرئيسي

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

display: grid;
grid-template-columns: repeat(4, 25%);

تخصيص الصف رقم 2

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

انتقل إلى الصف الثاني واستنساخ وحدة الصورة مرة واحدة.

عنصر العمود الرئيسي

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

display: grid;
grid-template-columns: repeat(2, 50%);

تخصيص الصف رقم 3

تغيير التباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• الحشوة اليسرى: 27vw
• الحشوة اليمنى: 27vw

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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