كيفية إنشاء انتقالات للصفحة المتحركة باستخدام Divi's Theme Builder

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

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

معاينة

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

انتقال الصفحة المتحركة # 1

سطح المكتب

متحرك

انتقال الصفحة المتحركة # 2

سطح المكتب

متحرك

انتقال الصفحة المتحركة # 3

سطح المكتب

متحرك

قم بتنزيل قوالب الصفحة مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. انتقل إلى Divi Theme Builder وأضف قالب صفحة جديد

انتقل إلى Divi Theme Builder وأضف قالبًا جديدًا

أول شيء عليك القيام به هو الذهاب إلى Divi Theme Builder الخاص بك والنقر فوق "إضافة قالب جديد".

استخدم القالب في كافة الصفحات

استخدم القالب الجديد في كل الصفحات (أو الصفحات التي تريد تطبيق الانتقال عليها).

• استخدم في: جميع الصفحات

ابدأ في بناء جسم النموذج

بعد ذلك ، ابدأ في إنشاء نص مخصص لقالب صفحتك.

2. إنشاء نص الصفحة باستخدام وحدة محتوى المشاركة

إعدادات القسم

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

الرؤية

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

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

أضف صفًا جديدًا

هيكل العمود

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

تحجيم

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

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

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف وحدة محتوى النشر إلى العمود

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

3. تطبيق انتقال الصفحة المتحركة من اختيارك

إعادة إنشاء انتقال الصفحة المتحركة # 1

إعدادات القسم

لون الخلفية

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

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

حيوية

نقوم أيضًا بتطبيق إعدادات الرسوم المتحركة التالية على القسم:

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: صحيح
• بدء تعتيم الرسوم المتحركة: 100٪
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج
• كرر الرسوم المتحركة: مرة واحدة

إعدادات الصف

لون الخلفية

افتح إعدادات الصف التالي وأضف لون الخلفية التالي:

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

حيوية

تابع عن طريق تطبيق الرسوم المتحركة التالية على الصف:

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: صحيح
• تأخير الرسوم المتحركة: 500 مللي ثانية
• بدء تعتيم الرسوم المتحركة: 100٪
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج
• كرر الرسوم المتحركة: مرة واحدة

إعدادات العمود

لون الخلفية

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

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

حيوية

أضف رسمًا متحركًا مخصصًا إلى العمود أيضًا.

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: يسار
• تأخير الرسوم المتحركة: 1200 مللي ثانية
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج
• كرر الرسوم المتحركة: مرة واحدة

نشر إعدادات وحدة المحتوى

حيوية

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

• نمط الرسوم المتحركة: تتلاشى
• تأخير الرسوم المتحركة: 2500 مللي ثانية
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج
• كرر الرسوم المتحركة: مرة واحدة

إعادة إنشاء انتقال الصفحة المتحركة # 2

إعدادات القسم

لون الخلفية

هل تريد إنشاء الرسوم المتحركة الثانية بدلاً من ذلك؟ افتح إعدادات القسم واستخدم لون الخلفية التالي:

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

حيوية

بعد ذلك ، قم بتطبيق رسم متحرك مخصص على القسم.

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: يسار
• بدء تعتيم الرسوم المتحركة: 100٪
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج
• كرر الرسوم المتحركة: مرة واحدة

إعدادات الصف

خلفية متدرجة

افتح إعدادات الصف بعد ذلك واستخدم خلفية التدرج التالية له:

• اللون 1: rgba (255،255،255،0)
• اللون 2: #ffffff
• نوع التدرج: خطي
• اتجاه التدرج: 90 درجة
• موقف البداية: 50٪
• موقف النهاية: 50٪

حيوية

أضف رسمًا متحركًا مخصصًا إلى صفك أيضًا.

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: لأعلى
• تأخير الرسوم المتحركة: 800 مللي ثانية
• بدء تعتيم الرسوم المتحركة: 100٪
• منحنى سرعة الرسوم المتحركة: سهولة الدخول
• كرر الرسوم المتحركة: مرة واحدة

إعدادات العمود

لون الخلفية

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

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

حيوية

تابع بإضافة رسم متحرك إلى العمود.

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: صحيح
• تأخير الرسوم المتحركة: 2000 مللي ثانية
• بدء تعتيم الرسوم المتحركة: 100٪
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج
• كرر الرسوم المتحركة: مرة واحدة

نشر إعدادات وحدة المحتوى

حيوية

أخيرًا وليس آخرًا ، افتح إعدادات وحدة محتوى النشر واستخدم إعدادات الرسوم المتحركة التالية:

• نمط الرسوم المتحركة: تتلاشى
• تأخير الرسوم المتحركة: 3000 مللي ثانية
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج
• كرر الرسوم المتحركة: مرة واحدة

إعادة إنشاء انتقال الصفحة المتحركة # 3

إعدادات القسم

خلفية متدرجة

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

• اللون 1: # d8cdbe
• اللون 2: #ffffff
• نوع التدرج: شعاعي
• اتجاه شعاعي: أعلى
• موقف البداية: 20٪
• موضع النهاية: 20٪

حيوية

انتقل إلى علامة تبويب تصميم القسم وقم بتغيير إعدادات الرسوم المتحركة وفقًا لذلك:

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: لأسفل
• كثافة الرسوم المتحركة: 10٪
• بدء تعتيم الرسوم المتحركة: 100٪
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج
• كرر الرسوم المتحركة: مرة واحدة

إعدادات الصف

خلفية متدرجة

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

• اللون 1: #ffffff
• اللون 2: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موقف البداية: 50٪
• موقف النهاية: 50٪

حيوية

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

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: لأسفل
• تأخير الرسوم المتحركة: 1000 مللي ثانية
• بدء تعتيم الرسوم المتحركة: 100٪
• منحنى سرعة الرسوم المتحركة: سهولة الدخول
• كرر الرسوم المتحركة: مرة واحدة

إعدادات العمود

لون الخلفية

تابع عن طريق فتح إعدادات العمود. تغيير لون الخلفية.

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

حيوية

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

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: لأسفل
• تأخير الرسوم المتحركة: 1500 مللي ثانية
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج
• كرر الرسوم المتحركة: مرة واحدة

نشر إعدادات وحدة المحتوى

حيوية

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

• نمط الرسوم المتحركة: تتلاشى
• تأخير الرسوم المتحركة: 3000 مللي ثانية
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج
• كرر الرسوم المتحركة: مرة واحدة

6. حفظ جميع تغييرات منشئ السمات ونتائج المعاينة

بمجرد إنشاء نص قالب الصفحة الخاص بك وإضافة انتقال الصفحة المتحركة الذي تختاره ، يمكنك حفظ جميع تغييرات Theme Builder وعرض النتيجة على موقع الويب الخاص بك!

معاينة

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

انتقال الصفحة المتحركة # 1

سطح المكتب

متحرك

انتقال الصفحة المتحركة # 2

سطح المكتب

متحرك

انتقال الصفحة المتحركة # 3

سطح المكتب

متحرك

افكار اخيرة

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

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