Divi: كيفية إنشاء مخطط هيكلي باستخدام وحدة Blurb

هل تريد إنشاء مخطط تنظيمي في Divi؟

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

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

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

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

دعونا نبدأ!

مسح

إليكم نبذة مختصرة عن تصميم المخطط التنظيمي الذي سنقوم بإنشائه في هذا الدرس التعليمي.

قم بإنشاء صفحة جديدة باستخدام Divi Builder

للبدء ، سوف تحتاج إلى القيام بما يلي:

من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.

أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder

ثم انقر فوق ابدأ البناء (البناء من الصفر)

بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.

كيفية إنشاء مخطط تنظيمي في Divi

الخطوة 1: أنشئ سطرًا بنص تمهيدي في المنتصف

للبدء في إنشاء تخطيط الهيكل التنظيمي في Divi، سنبدأ بإنشاء صف يحتوي على نص تمهيدي متمركز. سيكون هذا هو العنصر الأول في الهيكل التنظيمي.

قسم الحشو

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

الحشوة (أسفل): 0 بكسل

الخط

أضف صفًا إلى عمود داخل القسم.

افتح إعدادات الخط وقم بتحديث إعدادات التصميم التالية:

عرض الحضيض: 1
المساحة المتروكة (أعلى وأسفل): 0 بكسل

دعاية تصميم وزارة الدفاع

لإنشاء أول عنصر من عناصر المخطط التنظيمي لدينا، سنستخدم وحدة Blurb.

أدخل وحدة Blurb مضمنة.

معلمات الوحدة

افتح إعدادات وحدة Blurb. ضمن علامة التبويب وصف المنتج، يمكنك الاحتفاظ بالعنوان الافتراضي والنص الأساسي.

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

بعد ذلك، قم بتعيين لون خلفية للوحدة:

الخلفية: # f8f8f8

تحت علامة التبويب تصميم، قم بتحديث ما يلي:

محاذاة النص: توسيط
العرض الأقصى: 400 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 90٪ (الهاتف)
وحدة المحاذاة: المركز
الحشو: 6٪ (أعلى وأسفل) ، 3٪ (يسار ويمين)

بعد ذلك ، امنح الوحدة النمطية Blurb حدًا كما يلي:

عرض الحدود: 2 بكسل

الخطوة 2: إنشاء خط الاتصال بخط عمودي وسهم

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

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

أنشئ سطرًا جديدًا وانسخ / الصق الأنماط من السطر السابق

للقيام بذلك ، أضف صفًا جديدًا إلى عمود أسفل الصف السابق.

استخدام القائمة "إعدادات وحدة أخرى(أو خيارات النقر بزر الماوس الأيمن)، انسخ الأنماط من السطر السابق أعلاه والصقها في السطر الجديد.

إنشاء فاصل خطي عمودي

لإنشاء فاصل خط عمودي ، أضف وحدة Divider جديدة إلى الخط.

ضمن إعدادات الحاجز ، قم بتحديث إعدادات التصميم على النحو التالي:

لون الخط: # 333333
موقف الخط: القاع
وزن الحاجز: 150 بكسل
العرض: 2 بكسل
وحدة المحاذاة: المركز
الهامش: -1 بكسل (سفلي)

تحت علامة التبويب متقدم، قم بإخفاء الفائض كما يلي:

الفائض الأفقي: مخفي
الفائض العمودي: مخفي

قم بإنشاء سهم باستخدام الوحدة النمطية Blurb

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

لإنشاء السهم ، أضف وحدة Blurb النمطية الجديدة أسفل الحاجز.

إعدادات تعديل دعاية

ضمن إعدادات الوحدة النمطية ، قم بإزالة العنوان الافتراضي والنص الأساسي وانقر استخدم الرمز ، ثم حدد رمز السهم (انظر لقطة الشاشة).

تحت علامة التبويب تصميم، قم بتحديث ما يلي:

لون الأيقونة: #bbbbbb
محاذاة الصورة / الرمز: المركز
استخدام حجم خط الأيقونة: نعم
حجم خط الرمز: 50 بكسل (سطح المكتب) ، 40 بكسل (الجهاز اللوحي والهاتف)

العرض الأقصى: 50٪
وحدة المحاذاة: المركز
الارتفاع: 50 بكسل (سطح المكتب) ، 40 بكسل (الجهاز اللوحي والهاتف)

تحت علامة التبويب متقدم، أضف CSS التالية إلى صورة دعاية :

margin-bottom: 0px;
background: #ffffff;

لوضع السهم فوق الخط ، قم بتحديث ما يلي:

الموقف: مطلق
الموقع: المركز
الفهرس Z: 10

الخطوة 3: إنشاء خط للأجزاء المتجاورة من الهيكل التنظيمي

بمجرد اكتمال صف الموصلات، سنضيف صفًا آخر من عدة وحدات Blurb متجاورة لمواصلة تصميم مخطط التدفق.

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

افتح إعدادات الخط وقم بتحديث ما يلي:

العرض الأقصى: 50٪
عرض الحدود: 2 بكسل

الجانب الأيسر من الهيكل التنظيمي

الآن بعد إضافة حدودنا إلى السطر ، سنضع وحدة Blurb فوق خط الحد الأيسر.

للقيام بذلك ، قم بتحديث معلمات التصميم التالية:

وحدة المحاذاة: يسار
الهامش: 70 بكسل (أعلى وأسفل)

تحويل محور X للترجمة: -50٪

هذا هو المفتاح لضمان توسيط وحدة Blurb أفقيًا فوق خط الحدود.

الجانب الأيمن من الهيكل التنظيمي

لإضافة وحدة Blurb Module أخرى على خط الحد الأيمن ، قم بتكرار الدعاية القائمة.

لوضع النص التمهيدي على خط الحدود الأيمن، انتقل إلى علامة التبويب متقدم ومنحها موقعًا مطلقًا:

الموقف: مطلق
الموقع: يسار الوسط

بعد ذلك ، قم بتحديث الخيارات التالية:

الهوامش: لا يوجد
تحويل محور Y للترجمة: -50٪
تحويل محور X للترجمة: 50٪

تمت إضافة الأسهم إلى زوايا كل خط حد

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

أعلى اليسار السهم

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

افتح وحدة Blurb الخاصة بالسهم المكرر واستبدل الرمز بسهم يشير إلى اليسار.

بعد ذلك ، قم بتحديث موقع موضع الوحدة:

الموقع: أعلى اليسار

وأخيرًا، قم بتحديث خيار التحويل والترجمة كما يلي:

تحويل محور Y للترجمة: -50٪

السهم أعلى اليمين

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

الموقع: أعلى اليمين

قم أيضاً بتحديث أيقونة السهم بحيث يشير السهم إلى اليمين.

السهم لأسفل اليسار

لإنشاء سهم يقع على خط الحدود السفلي الأيسر، قم بتكرار السهم "أعلى اليمين"التي أنشأناها للتو".

ثم افتح الإعدادات وقم بتغيير موقع الموضع:

الموقع: أسفل اليسار

بعد ذلك، قم بتحديث خيار تحويل الترجمة:

تحويل محور Y للترجمة: 50٪

السهم لأسفل لليمين

لإنشاء سهم يقع على خط الحدود السفلي الأيمن، قم بتكرار السهم "أسفل اليسار"التي أنشأناها للتو".

ثم افتح الإعدادات وقم بتغيير موقع الموضع:

الموقع: أسفل اليمين

قم أيضاً بتحديث أيقونة السهم بحيث يشير السهم إلى اليسار.

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

الخطوة الرابعة: إضافة خط توصيل آخر

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

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

الخطوة 5: تخصيص التدفق باستخدام موصل خط الحافة المستقيمة

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

لتخصيص التدفق، سنقوم بتكرار القسم بحيث يمكننا تخصيص مخطط التدفق للتوقف عند عنصر (عناصر) العرض المجاور لليسار والاستمرار من عنصر العرض الموجود على اليمين.

قسم مكرر

للقيام بذلك، قم أولاً بتكرار القسم بأكمله الذي يحتوي على المخطط التنظيمي.

إضافة وحدة دعاية يسرى أخرى

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