كيفية إنشاء تخطيط مخطط التدفق في Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على تصميم المخطط الانسيابي الذي سنقوم ببنائه في هذا البرنامج التعليمي.

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

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

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

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

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

كيفية إنشاء تخطيط مخطط التدفق في Divi

الخطوة 1: إنشاء صف باستخدام دعاية مركزية

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

حشوة القسم

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

الصف

داخل القسم ، أضف صفًا مكونًا من عمود واحد.

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

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

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

تصميم الوحدة النمطية Blurb

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

أضف وحدة دعاية مغالى فيها جديدة إلى الصف.

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

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

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

ثم امنح الدعاية الدعاية لون خلفية:

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

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

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

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

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

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

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

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

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

إنشاء صف جديد ونسخ / لصق أنماط الصف من الصف السابق

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

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

إنشاء مقسم خط عمودي

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

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

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

ضمن علامة التبويب خيارات متقدمة ، قم بإخفاء تجاوز السعة كما يلي:

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

إنشاء سهم باستخدام وحدة دعاية مغالى فيها

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

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

إعدادات دعاية السهم

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

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

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

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

ضمن علامة التبويب خيارات متقدمة ، أضف CSS التالي إلى Blurb Image:

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

سيؤدي هذا إلى إزالة الهامش الافتراضي للدعاية الدعائية وإضافة خلفية بيضاء لإنشاء مظهر المسافة بين الرمز والخط بمجرد وضع الرمز أعلى السطر.

لوضع السهم أعلى السطر ، قم بتحديث ما يلي:

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

الخطوة 3: إنشاء صف باستخدام Blurbs وأسهم مخطط التدفق المجاور

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

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

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

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

يُعد الحد الأقصى للعرض البالغ 50٪ مهمًا حتى يعمل التخطيط بشكل متجاوب. سيتأكد من أن الدعاية المغلوطة التي تفيض يمين ويسار الصف لن تتجاوز عرض المتصفح.

إنشاء دعاية مخطط انسيابي على خط الحد الأيسر

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

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

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

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

هذا هو المفتاح لجعل دعاية مغالى فيها تستقر أفقيًا في أعلى خط الحدود.

إنشاء مخطط انسيابي مجاور على خط الحد الأيمن

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

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

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

ثم قم بتحديث الهامش وقم بتحويل خيارات الترجمة كما يلي:

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

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

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

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

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

افتح دعاية السهم المكرر وقم بتغيير الرمز إلى سهم لليسار.

ثم قم بتحديث موقع إعلان السهم الدعاية:

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

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

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

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

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

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

أيضًا ، قم بتحديث رمز السهم بسهم لليمين.

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

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

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

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

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

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

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

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

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

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

أيضًا ، قم بتحديث رمز السهم بسهم لليسار.

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

الخطوة 4: إضافة صف موصل آخر

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

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

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

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

قسم مكرر

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

أضف عنصر دعاية أيسر آخر

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

احذف الأسهم والحدود السفلية

بعد ذلك ، قم بحذف السهم الأيسر السفلي والسهم الأيمن السفلي.

افتح إعدادات الصف للصف الذي يحتوي على دلالات متعددة وأخرج الحد السفلي:

• عرض الحد السفلي: 0 بكسل

قم بإنشاء صف باستخدام موصل خط الحد الأيمن

نريد الآن تخصيص تصميم مخطط التدفق بموصل خط حد أيمن يربط خط الحد الأيمن للصف بصف الموصل أدناه.

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

أضف صفًا جديدًا مكونًا من عمود واحد أسفل الصف الحالي باستخدام الدعاية الثلاثية.

قم بتحديث إعدادات تصميم الصف كما يلي:

• عرض الحضيض: 1
• العرض الأقصى: 50٪
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

بعد ذلك ، أضف الحد الأيمن إلى الصف.

• عرض الحد الأيمن: 2 بكسل

ثم أضف وحدة فاصل إلى الصف.

قم بتحديث إعدادات الحاجز كما يلي:

• لون الخط: # 333333
• موقف الخط: القاع
• وزن الحاجز: 2 بكسل
• العرض: 50٪
• الهامش: -2 بكسل للقاع

ضمن علامة التبويب خيارات متقدمة ، قم بتحديث موضع الحاجز:

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

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

افتح إعدادات دعاية السهم التي قمت بتكرارها ونقلها وقم بتحديث ما يلي:

• المركز: الافتراضي

• محاذاة الوحدة: صحيح

ايقاف تدفق خط الحد الايسر

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

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

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

• عرض الحد الأيسر: 2 بكسل
• عرض الحد الأيمن: 0

تحديث الحاجز داخل الصف بموقع جديد:

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

ثم قم بتحديث محاذاة دعاية السهم الدعاية:

• محاذاة الوحدة: يسار

وقم بتغيير الرمز إلى سهم لليمين.

النتيجة النهائية

تحقق من النتيجة النهائية. تقدمت ونسخت القسم الثاني وأضفت موصل خط الحد الأيسر إليه حتى تتمكن من رؤية كليهما.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!