6 طرق يمكنك من خلالها استخدام ميزة السحب والإفلات لتحميل الملفات في Divi لزيادة الإنتاجية

نشرت: 2018-08-22

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

هيا بنا نبدأ!

نظرة عامة موجزة عن ميزة Drag & Drop File Upload

تعد ميزة Drag & Drop File Upload طريقة سهلة لإضافة محتوى إلى صفحتك عند استخدام Divi Builder. كما يوحي الاسم ، يمكنك سحب الملفات وإفلاتها على صفحتك لإضافة محتوى بدون العملية العادية لإعداد القسم والصف والوحدة الخاصة بك مسبقًا. وسيقوم Divi بوضع المحتوى بشكل مختلف حسب نوع الملف. على سبيل المثال ، ستتم إضافة ملفات txt إلى الوحدات النمطية النصية ، وستتم إضافة ملفات html إلى وحدات التعليمات البرمجية ، وستتم إضافة ملفات css باعتبارها CSS مخصصة إلى صفحتك.

أنواع الملفات المدعومة وسلوكها في السحب والإفلات

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

ملفات الصور

  • gif
  • jpeg
  • jpg
  • بي إن جي

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

عند إسقاط ملفات صور متعددة في وقت واحد ، ستنشئ Divi نفس الهيكل (قسم وصف جديد) ولكنها ستضيف صورك إلى وحدة المعرض.

ملفات نصية

  • رسالة قصيرة

سيؤدي وضع ملف txt إلى إضافة النص إلى وحدة نصية جديدة داخل قسم وصف جديد.

ملفات الخطوط

  • otf
  • ttf

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

ملفات الفيديو

  • m4v
  • موف
  • ويب
  • wmv
  • mp4

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

ملفات صوتية

  • mp3
  • wav

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

ملفات الويب

  • json
  • لغة البرمجة
  • المغلق

ملف json مخصص لأي تخطيطات صفحة قمت بتصديرها. سيؤدي السحب في ملف json إلى تحميل تخطيط الصفحة تلقائيًا إلى الصفحة.

سيؤدي السحب في ملف html إلى إضافة html إلى وحدة تعليمات برمجية جديدة داخل قسم وصف جديد.

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

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

# 1 اسحب قصاصات CSS المخصصة إلى صفحتك حسب الحاجة

يحب معظم مستخدمي Divi هناك Divi على وجه التحديد لأنك لست مضطرًا لاستخدام CSS المخصص. هذا ما يجعل Divi رائعة جدًا. ومع ذلك ، عندما يتعلق الأمر بتخصيص WordPress Theme ، فإن CSS المخصص (حتى داخل Divi) لا يزال أحد الأصول القيمة.

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

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

تنظم Divi قصاصاتك تلقائيًا مع كل قطرة

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

ستلاحظ أيضًا أن Divi سينظم بذكاء مقتطف css الخاص بك عن طريق تغليفه بالتعليقات. إذا كنت لا تعرف ، يتم استخدام التعليقات داخل التعليمات البرمجية لتحديد و / أو وصف كتل معينة من التعليمات البرمجية بسهولة. قبل مقتطف CSS الخاص بك ، تُدرج Divi تعليقًا بالنص "Begin" متبوعًا بعنوان ملف CSS الخاص بك ، "Hide Bottom Footer". بعد المقتطف ، تُدرج Divi تعليقًا آخر مع النص "End" متبوعًا بعنوان الملف.

فيما يلي مثال لما سيبدو عليه المقتطف في إعدادات الصفحة بعد السحب في ملف CSS "إخفاء التذييل السفلي". 

/* BEGIN: Hide Bottom Footer */
#main-footer {
    display: none;
}
/* END: Hide Bottom Footer */

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

مثالان على مقتطفات CSS يمكنك استخدامهما في رسم التحويم

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

احفظ مقتطف css التالي كملف ".css" (أطلق عليه اسمًا مثل "Scale Icons on Hover"). 

.et-pb-icon {
  -webkit-transition: all .2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.et-pb-icon:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

ثم احفظ هذا المقتطف التالي كملف ".css" آخر باسم "Blurb Shadow on Hover".

.et_pb_blurb:hover {
    -moz-box-shadow: 0px 0px 20px #ccc;
    -webkit-box-shadow: 0px 0px 20px #ccc;
    box-shadow: 0px 0px 20px #ccc;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

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

أشياء رائعة جدا.

ويمكنك أن تتخيل مدى فائدة ذلك بمجرد أن يكون لديك ترسانة من ملفات css هذه تحت تصرفك.

# 2 اسحب الخطوط المخصصة وأفلتها في صفحتك واستبدل الخطوط الحالية بسرعة

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

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

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

السحب والإفلات باستخدام البحث والاستبدال هو مزيج قوي

لاتخاذ خطوة أخرى إلى الأمام ، يمكنك استخدام ميزة Divi Find & Replace لاستبدال الخط المستخدم في عناوين التخطيط المعدة مسبقًا بالخط الجديد الذي أسقطته للتو.

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

في القائمة المنبثقة Find & Replace ، حدد الخط الجديد الخاص بك ضمن خيار "Replace With" وانقر فوق الزر "استبدال" الأزرق.

الآن كل رؤوسك لديها الخط الجديد في مكانه!

# 3 قم بسحب وإفلات صور متعددة لإنشاء معارض صور فورية بالعناوين

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

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

عندما تسحب صورة واحدة إلى المنشئ المرئي ، فسيقوم تلقائيًا بما يلي:
1. أنشئ قسمًا عاديًا جديدًا بصف عمود واحد
2. أضف وحدة صورة إلى الصف
3. أدخل الصورة في وحدة الصورة تلك
4. افتح إعدادات الصورة لتسهيل بدء عملية التحرير.

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

عند سحب صور متعددة إلى صفحة المنشئ المرئي ، ستقوم Divi تلقائيًا بما يلي:

1. أنشئ قسمًا عاديًا جديدًا بصف عمود واحد
2. أضف وحدة معرض إلى الصف
3. أدخل الصور الجديدة في وحدة المعرض
4. افتح إعدادات وحدة المعرض للمساعدة في بدء عملية التحرير.

جهز صورك قبل سحبها إلى صفحتك

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

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

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

# 4 اسحب ملفات MP3 إلى صفحتك باستخدام ملف CSS لبدء التصميم

بالنسبة لمصممي البودكاست الموجودين هناك ، يمكن أن يؤدي ذلك بالتأكيد إلى زيادة الإنتاجية. نظرًا لأن ميزة Drag & Drop في Divi تدعم تنسيقات ملفات mp3 و wav ، يمكنك بسهولة إسقاطها في المنشئ لبدء عملية البناء.

عندما تقوم بسحب ملف mp3 أو wav إلى الصفحة ، سيقوم Divi تلقائيًا بما يلي:

1. أنشئ قسمًا عاديًا جديدًا بصف عمود واحد
2. أضف وحدة صوتية جديدة مع إرفاق ملف الصوت الخاص بك
3. افتح صيغة إعدادات autio لبدء عملية التحرير.

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

اسحب ملف CSS لتصميم جميع وحدات الصوت على الفور مرة واحدة

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

يعد CSS الذي استخدمته في الرسم التوضيحي أعلاه مثالاً سريعًا ، ولكن إذا كنت ترغب في تجربته ، فقم بنسخ CSS المخصص التالي: 

.et_pb_audio_module_content h2 {position: absolute;
    top: -40px;
    background: #c5310d;
    padding: 0.6em;
    left: 50px;}
.et_audio_module_meta {
    position: absolute;
    bottom: -45px;
    right: 30px;
    background: #c5310d;
    padding: 1em !important;
}
.et_pb_audio_module {
background: #888 !important;
}

.et_audio_container .mejs-playpause-button button:before, .et_audio_container .mejs-volume-button button:before {
    color: #c5310d;
}

.mejs-time-handle-content {
    border: 4px solid #c5310d;
    height: 14px;
    left: -7px;
    top: -6px;
    width: 14px;
    background: #c5310d;
}
.et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total
{
background: #222;
}

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

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

تدعم ميزة Drag & Drop الخاصة بـ Divi ملفات CSS و HTML (آسف لعدم السماح بملفات جافا سكريبت). على الرغم من أنه بالنسبة لأولئك الذين يعرفون ما يفعلونه ، فقد تتمكن من إضافة برامج نصية إلى ملف HTML الذي سيضيف وظيفة جافا سكريبت هذه لك. لكن هذا يترك فرصة لدمج هذه الملفات لإنشاء كتل مفيدة من التعليمات البرمجية التي يمكنك سحبها إلى الصفحة للحصول على نتائج فورية.

مثال 1: قم بسحب ملفات Code Pen المصدرة وإفلاتها إلى صفحتك

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

إليك كيفية عمل هذه العملية من أجلك.

انتقل إلى الصفحة التي تحتوي على برنامج Codepen الذي تريد تصديره وانقر على زر التصدير في أسفل يمين الصفحة.

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

في الواقع ، بالنسبة لملف HTML ، قد يكون من الأفضل لك نسخ HTML مباشرة من القلم وإنشاء ملف html الخاص بك.

الآن ابحث عن ملف CSS (يجب أن يكون موجودًا داخل مجلد CSS). تأكد من استخدام ملف CSS وليس ملف SCSS (نوع الملف هذا غير مدعوم بواسطة ميزة السحب والإفلات).

الآن اسحب كلا الملفين إلى الصفحة مع تنشيط المنشئ المرئي.

هذا ما يحدث تلقائيًا:

1. ينشئ Divi قسمًا جديدًا به صف من عمود واحد.
2. إضافة Divi وحدة رمز إلى الصف مع html الخاص بك كمحتوى.
3. يضيف Divi css المخصص إلى كتلة CSS المخصصة لإعدادات صفحتك.

إذا تلقيت خطأ ، فهذا يعني أنه ليس لديك نوع الملف الصحيح أو أن محتوى الملف يحتوي على رمز غير مدعوم. على سبيل المثال ، إذا كان ملف html يحتوي على DOCTYPE وعلامات html ، فلن يعمل الملف. أيضًا ، إذا كان ملف css الخاص بك يحتوي على رمز SCSS ، فقد يؤدي أيضًا إلى حدوث خطأ.

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

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

مثال 2: قم بسحب وإفلات المثيلات المعزولة من Font Awesome إلى صفحتك

إذا كنت معتادًا على استخدام Font Awesome على موقع Divi الخاص بك ، فقد تستفيد من عدد قليل من الملفات "الجاهزة للسحب" والتي ستتيح لك إدراج مثيلات Font Awesome في صفحتك. يمكن فعل ذلك في الواقع باستخدام ملف HTML واحد.

إليك كيفية عمل هذه العملية من أجلك.

احصل على البرنامج النصي Font Awesome من موقعه على الويب. تأكد من أنه إصدار SVG + JS. ثم انسخ البرنامج النصي إلى الحافظة الخاصة بك.

ثم أنشئ ملفًا نصيًا جديدًا والصقه في الكود. ضمن البرنامج النصي ، أضف كود html ورمز الخط الذي تريد نشره في صفحتك.

فيما يلي مثال على رمز HTML "جاهز للسحب" مع قائمة باستخدام رموز رائعة للخط: 

<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>

<h2>Header</h2>
<ul class="fa-ul" style="list-style:none; font-size: 18px">
<li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
</ul>

تأكد من حفظ الملف كملف html. ثم اسحبه إلى صفحتك باستخدام المنشئ المرئي.

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

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

# 6 قم بإنشاء مكتبة تخطيطات صفحة Divi (ملفات json) على محرك الأقراص الثابتة لديك لسحبها إلى صفحاتك من أجل تطوير أسرع

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

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

إليك كيف يمكن أن تعمل هذه العملية من أجلك.

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

لتصدير تخطيط صفحة باستخدام المنشئ المرئي ، افتح قائمة الإعدادات وانقر فوق أيقونة قابلية النقل. ثم في نافذة قابلية النقل المنبثقة ، أدخل اسمًا ("تصميم عنوان وكالة التصميم") ، وانقر فوق الزر تصدير Divi Builder Layout.

سيؤدي هذا إلى حفظ التخطيط على جهاز الكمبيوتر الخاص بك كملف json.

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

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

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

افكار اخيرة

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

أحب أن أسمع أفكارك الخاصة في التعليقات أدناه.

هتافات!