هل تريد إنشاء مخطط تنظيمي في 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 النمطية المجاورة.
افتح وحدة Duplicate Arrow Blurb وقم بتغيير الرمز إلى سهم يشير إلى اليسار.
بعد ذلك ، قم بتحديث موقع موضع الوحدة:
- الموقع: أعلى اليسار
أخيرًا ، قم بتحديث خيار ترجمة التحويل كما يلي:
- تحويل محور Y للترجمة: -50٪
السهم أعلى اليمين
لإنشاء سهم على خط الحد الأيمن العلوي ، قم بتكرار السهم " أعلى اليسار التي أنشأناها للتو. ثم افتح الإعدادات وقم بتغيير موقع الموضع:
- الموقع: أعلى اليمين
قم أيضًا بتحديث رمز السهم بسهم يشير إلى اليمين.
السهم لأسفل اليسار
لإنشاء سهم في أسفل خط الحد الأيسر ، قم بتكرار السهم " أعلى اليمين التي أنشأناها للتو.
ثم افتح الإعدادات وقم بتغيير موقع الموضع:
- الموقع: أسفل اليسار
بعد ذلك ، قم بتحديث خيار Transform Translate:
- تحويل محور Y للترجمة: 50٪
السهم لأسفل لليمين
لإنشاء سهم على خط الحد السفلي الأيمن ، قم بتكرار السهم " أسفل اليسار التي أنشأناها للتو.
ثم افتح الإعدادات وقم بتغيير موقع الموضع:
- الموقع: أسفل اليمين
قم أيضًا بتحديث رمز السهم بسهم يشير إلى اليسار.
بمجرد وضع جميع الأسهم ، يمكنك تحديث الملصقات لكل منها باستخدام ملف عرض الطبقة .
الخطوة 4: إضافة خط موصل آخر
بمجرد أن نكمل الخط مع الجزأين المتجاورين من المخطط الانسيابي وجميع الأسهم ، يمكننا متابعة المخطط الانسيابي عن طريق إضافة خط رابط آخر.
للقيام بذلك ، قم بتكرار خط الموصل الذي أنشأناه أعلاه والصقه أسفل السطر الذي يحتوي على وحدات Blurb النمطية من الجزء المجاور للمخطط الانسيابي.
الخطوة 5: تخصيص التدفق باستخدام موصل خط الحافة المستقيمة
في تصميم المخطط الانسيابي الحالي ، يبدأ التدفق بالعنصر العلوي ، ثم يتفرع إلى العناصر المتجاورة اليمنى واليسرى ، ثم يعود إلى المنتصف وينتقل إلى العنصر الأوسط التالي.
لتخصيص التدفق ، سنقوم بتكرار القسم حتى نتمكن من تخصيص المخطط الانسيابي للتوقف عند عنصر (عناصر) العرض التقديمي المجاور على اليسار والاستمرار من عنصر العرض التقديمي على اليمين.
قسم مكرر
للقيام بذلك ، قم أولاً بتكرار المقطع بأكمله الذي يحتوي على المخطط الانسيابي.
إضافة وحدة دعاية يسرى أخرى
في القسم المكرر (أسفل) ، حدد وحدة Blurb النمطية اليسرى في الصف الذي يحتوي على الوحدتين المتجاورتين. بعد ذلك ، قم بتكرار الدعاية المغطاة على اليسار لإنشاء واحدة جديدة أدناه مباشرة.
إزالة الأسهم والحدود السفلية
بعد ذلك ، احذف السهم السفلي الأيسر والسهم الأيمن السفلي.
افتح إعدادات الخط للخط الذي يحتوي على دلالات متعددة وأزل الحد السفلي:
- عرض الحد السفلي: 0 بكسل
قم بإنشاء خط بموصل خط حد مستقيم
نريد الآن تخصيص تصميم المخطط الانسيابي باستخدام موصل خط حد صحيح يربط خط الحد الأيمن للخط بخط الموصل أدناه.
للقيام بذلك ، سنقوم بإنشاء سطر آخر وإضافة خط فاصل مخصص وسهم مخطط على الجانب الأيمن.
أضف صفًا جديدًا عمودًا واحدًا أسفل الصف الحالي بالتخطيطات الثلاثة.
قم بتحديث إعدادات الصف كما يلي ، ضمن علامة التبويب تصميم :
- عرض الحضيض: 1
- العرض الأقصى: 50٪
- المساحة المتروكة: 0 بكسل (أعلى وأسفل)
بعد ذلك ، أضف حدًا مستقيمًا إلى الخط.
- عرض الحد الأيمن: 2 بكسل
ثم أضف وحدة Divider إلى الخط.
قم بتحديث إعدادات الحاجز كما يلي:
- لون الخط: # 333333
- موقف الخط: القاع
- وزن الحاجز: 2 بكسل
- العرض: 50٪
- الهامش: -2 بكسل (سفلي)
ضمن علامة التبويب "خيارات متقدمة" ، قم بتحديث موضع الفاصل:
- الموقف: مطلق
- الموقع: أسفل اليمين
مع وجود الحاجز في مكانه ، انسخ وحدة Blurb من السهم السفلي الأيمن للصف الثالث من القسم الأول والصقها في الصف بخط الفاصل الأيمن.
افتح إعدادات الوحدة النمطية Blurb للسهم الذي نسخته وحركته للتو وقم بتحديث ما يلي:
- الوظيفة: الافتراضي
- وحدة المحاذاة: صحيح
توقف تدفق خط الحد الأيسر
حاليًا ، جزء من الحد الأيسر مكشوف أسفل الإعلان الدعاية في أسفل اليسار. لإخفائه ، ما عليك سوى إزالة الهامش السفلي لهذا الدعاية السفلية.
الخطوة 6: تحديث الخط بموصل خط الحافة اليسرى
قد يحتاج المخطط الانسيابي أيضًا إلى موصل خط حد أيسر. لإنشائه ، يمكننا تحديث الخط بموصل خط الحدود الأيمن على النحو التالي:
- عرض Boprder الأيسر: 2 بكسل
- عرض الحد الأيمن: 0
قم بتحديث الفاصل داخل السطر بموقع جديد:
- الموقع: أسفل اليسار
بعد ذلك ، قم بتحديث محاذاة السهم:
- وحدة المحاذاة: يسار
وقم بتغيير الرمز إلى سهم لليمين.
نتيجة نهائية
تحقق من النتيجة النهائية.
تحميل DIVI الآن !!!
وفي الختام
في هذا البرنامج التعليمي ، قمنا بإنشاء مخطط انسيابي مفيد يمكن لأي شخص استخدامه لتوصيل العملية والأفكار إليه آخر بتصميم سريع الاستجابة مذهل.
استخدمه لعرض الخدمات أو عملية التصميم، أو إنشاء مخطط معلوماتي، أو توجيه العملاء خلال محتويات بطريقة جديدة.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
