كيفية استخدام تأثيرات الرسوم المتحركة الجديدة لديفي

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

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

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

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

هيا بنا نبدأ.

إليك نظرة سريعة على ما سنبنيه في هذه السلسلة

الجزء الأول من السلسلة

القسم 1

القسم 2

الجزء 2 من السلسلة

قسم 3

القسم 4

الجزء 3 من السلسلة

القسم 5

الجزء 4 من السلسلة

القسم 6

الجزء 5 من السلسلة

القسم السابع

الجزء 6 من السلسلة

القسم 8

القسم 9

تحضير عناصر التصميم

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

الصورة الثانية هي نسخة محررة من نفس الصورة التي تم قلبها عموديًا وبهتًا نحو الأسفل. ستكون هذه الصورة الثانية بمثابة خلفية لعنوانك الرئيسي ويجب أن تكون حوالي 800 × 400.

لإنشاء الصورة المقلوبة ، افتح الصورة في المعاينة وحدد Tools> Flip Vertical أو افتح الصورة في Photoshop ، حدد Image> Image Rotation> Flip Canvas Vertical. لإضافة تأثير التلاشي إلى أسفل الصورة ، استخدمت أداة الممحاة في وضع الفرشاة بحجم 800 بكسل وصلابة 0٪. ثم ضغطت على التحول وسحبت الفرشاة على طول الحافة السفلية.

تأكد من تصديره كملف png.

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

للقسم الثاني ، ستحتاج إلى صورتين. يجب أن يكون الأول حوالي 730 × 490 مثل هذا.

ويجب أن تكون الثانية حوالي 525 × 660 مثل الموجودة أدناه.

فهم مصطلحات الرسوم المتحركة

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

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

كيفية استخدام تأثيرات الرسوم المتحركة الجديدة لديفي

اشترك في قناتنا على اليوتيوب

أضف إعدادات صفحتك الجديدة

من لوحة معلومات WordPress ، انتقل إلى الصفحات> إضافة جديد. ثم أضف عنوانًا لصفحتك. بعد ذلك ، ابحث عن إعدادات Divi Page في المربع أعلى يمين الصفحة وحدد Dot Navigation “ON”. في مربع "سمات الصفحة" ، حدد "صفحة فارغة" لقالب الصفحة. أخيرًا ، انقر فوق الزر "استخدام Divi Builder" وقم بنشر Visual Builder لبدء إنشاء التخطيط الخاص بك.

قسم المبنى 1: تصميم الرأس بملء الشاشة والرسوم المتحركة

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

باستخدام Visual Builder ، انقر لتحرير إعدادات القسم الخاصة بالقسم القياسي المعروضة بالفعل افتراضيًا عند تشغيل المنشئ. قم بتحديث ما يلي:

ضمن علامة التبويب "المحتوى" ...

صورة الخلفية: [أدخل صورة الخلفية 1280 × 800]
استخدام تأثير المنظر: نعم
طريقة المنظر: المنظر الحقيقي

ضمن علامة التبويب "تصميم" ...

الحشو المخصص: 5٪ أعلى ، 0 بكسل يمين ، 5٪ أسفل ، 0 بكسل يسار

ضمن علامة التبويب خيارات متقدمة ...

أضف CSS المخصص التالي في المربع Main Element:

min-height: 100vh

هذا سطر واحد من css يخبر القسم بعرض 100٪ من ارتفاع منفذ العرض.

احفظ التغييرات

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

تحت علامة التبويب "المحتوى" ...

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

ضمن علامة التبويب "تصميم" ...

خط النص: أوزوالد ، أحرف كبيرة (TT)
حجم خط النص: 14 بكسل
لون نص النص: # 08408e
تباعد الأحرف النصية: 1.5em (ستحتاج إلى كتابة هذا)
اتجاه النص: الوسط
الهامش المخصص: 2٪
نمط الرسوم المتحركة: قلب
كرر الرسوم المتحركة: مرة واحدة
اتجاه الرسوم المتحركة: صحيح
مدة الرسوم المتحركة: 2000 مللي ثانية
تأخير الرسوم المتحركة: 1100 مللي ثانية
كثافة الرسوم المتحركة: 100٪
بدء التعتيم في الرسوم المتحركة: 0٪
منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج

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

هنا هو html مع التصميم المضمن المطلوب للرسوم المتحركة:

<div class="et_animated flipLeft" style="position: absolute; animation-duration: 2000ms; animation-delay: 1100ms; opacity: 0; animation-timing-function: ease-in-out; transform: perspective(2000px) rotateY(-90deg);">
<div style="position:relative;">Divi</div>
</div>

وإليك CSS اللازمة للرسوم المتحركة:

@keyframes et_pb_flipLeft {
    from {
        transform-origin: center
    }

    to {
        opacity: 1;
        transform: rotateY(0)
    }
}

.et_animated.flipLeft {
    animation-name: et_pb_flipLeft
}

.et_animated {
    animation-fill-mode: both!important;
}

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

الآن دعنا نواصل تحديث إعدادات وحدة النص الخاصة بنا:

ضمن علامة التبويب خيارات متقدمة ...

أضف السطر التالي من CSS المخصص إلى مربع العنصر الرئيسي:

text-indent: 1.5em

احفظ التغييرات

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

ضمن علامة التبويب "المحتوى" ...

أضف html التالي في علامة تبويب النص في مربع المحتوى:

<p><span>Believing</span><br />is  Seeing</p>

ضمن علامة التبويب "تصميم" ...

لون النص: فاتح
خط النص: أوزوالد ، أحرف كبيرة (TT)
حجم خط النص: 8vw (يجب كتابة هذا ؛ هذا يجعل حجم الخط 8٪ من عرض منفذ العرض)
لون نص النص: rgba (255،255،255،0.79)
ارتفاع خط النص: 1.4em
اتجاه النص: الوسط
نمط الرسوم المتحركة: أضعاف
اتجاه الرسوم المتحركة: لأعلى
مدة الرسوم المتحركة: 1800 مللي ثانية
تأخير الرسوم المتحركة: 0 مللي ثانية
كثافة الرسوم المتحركة: 60٪

احفظ التغييرات

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

انتقل الآن إلى إعدادات الصف للصف الذي يحتوي على الوحدتين النصيتين اللتين أنشأتهما للتو وقم بتحديث الإعدادات على النحو التالي:

ضمن علامة التبويب "المحتوى" ...

صورة الخلفية: [أدخل صورتك 800 × 440]
حجم صورة الخلفية: صالح
موضع صورة الخلفية: المركز العلوي
تكرار صورة الخلفية: لا يوجد تكرار

ضمن علامة التبويب "تصميم" ...

استخدام العرض المخصص: نعم
وحدة: ٪
العرض المخصص: 50٪
حشوة مخصصة: 12٪ أعلى ، 0٪ يمين ، 5٪ أسفل ، 0٪ يسار
نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: لأعلى
تأخير الرسوم المتحركة: 300 مللي ثانية
كثافة الرسوم المتحركة: 20٪

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

هذا كل شيء في القسم الأول. دعنا نتحقق من التصميم النهائي والرسوم المتحركة.

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

قسم البناء 2

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

لإنشاء القسم الثاني ، أضف قسمًا عاديًا أسفل القسم السابق. في القسم ، أضف صفًا مكونًا من عمودين (نصف ونصف).

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

ضمن علامة التبويب "المحتوى" ...

أدخل html التالي في علامة تبويب النص في مربع المحتوى:

<h1>Time is money</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit pretium felis, sit amet sollicitudin eros dignissim at. Cras molestie nisl enim.</span></p>

ضمن علامة التبويب "تصميم" ...

لون النص: فاتح
خط النص: مونتسيرات
حجم خط النص: 18 بكسل
ارتفاع خط النص: 1.8em
خط العنوان: مونتسيرات ، بولد (B) ، أحرف كبيرة (TT)
حجم خط الرأس: 39 بكسل (سطح المكتب)
ارتفاع خط الرأس: 2.2em
الهامش السفلي: 50 بكسل
نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: لأعلى
كثافة الرسوم المتحركة: 10٪

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

احفظ التغييرات

بعد ذلك ، أضف وحدة زر ضمن وحدة النص التي أنشأتها للتو. قم بتحديث إعدادات وحدة الزر كما يلي:

ضمن علامة التبويب "المحتوى" ...

نص الزر: معرفة المزيد
عنوان URL للزر: # (أو أيًا كان ما تريده)

ضمن علامة التبويب "تصميم" ...

محاذاة الزر: يسار
لون النص: فاتح
استخدام الأنماط المخصصة للزر: نعم
حجم نص الزر: 15 بكسل
نصف قطر حد الزر: 0
تباعد حرف الزر: 3 بكسل
خط الزر: مونتسيرات ، غامق (B) ، أحرف كبيرة (TT)
إظهار رمز الزر: نعم
الحشو المخصص: 10 بكسل أعلى ، 30 بكسل يمين ، 10 بكسل أسفل ، 30 بكسل يسار
نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: لأسفل
تأخير الرسوم المتحركة: 100 مللي ثانية
كثافة الرسوم المتحركة: 10٪

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

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

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

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

ضمن علامة التبويب "تصميم" ...

الارتفاع: 260 بكسل

ضمن علامة التبويب خيارات متقدمة ...

تعطيل الرؤية على سطح المكتب

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

احفظ التغييرات

الآن دعنا نضيف خلفياتنا إلى كل عمود من أعمدةنا. انتقل إلى إعدادات الصف وقم بتحديث ما يلي:

ضمن علامة التبويب "المحتوى" ...

ألوان تدرج الخلفية للعمود 1: # fe8840 ، rgba (238،78،78،0.9)
العمود 1 اتجاه التدرج: 135 درجة
العمود 2 صورة الخلفية: [أدخل صورتك 730 × 490]
العمود 2 موضع صورة الخلفية: أعلى اليسار
تكرار صورة الخلفية للعمود 2: لا يوجد تكرار

ضمن علامة التبويب "تصميم" ...

استخدام العرض المخصص: نعم
العرض المخصص: 1366 بكسل
استخدام عرض مزراب مخصص: نعم
عرض الحضيض: 1
معادلة ارتفاعات العمود: نعم
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل يمين ، 0 بكسل أسفل ، 0 بكسل يسار
مساحة العمود 1 المخصصة: 5٪ أعلى ، 7٪ يمين ، 5٪ أسفل ، 7٪ يسار
نمط الرسوم المتحركة: أضعاف
اتجاه الرسوم المتحركة: لأعلى
مدة الرسوم المتحركة: 800 مللي ثانية

سيكشف تأثير الرسوم المتحركة هذا الصف بأكمله عن طريق طيه (أو وقوفه) لأعلى للعرض.

ضمن علامة التبويب خيارات متقدمة ...

أضف CSS المخصص التالي إلى مربع العنصر الرئيسي:

box-shadow: -20px 0px 60px -20px rgba(255, 130, 65, 0.88);

احفظ التغييرات

بعد ذلك ، أضف صفًا مكونًا من عمودين (ثلث وثلثان) أسفل الصف الذي انتهيت للتو من إنشائه.

في العمود الأيسر ، أضف وحدة Divider Module وحدّث الإعدادات على النحو التالي:

ضمن علامة التبويب "تصميم" ...

الارتفاع: 400 بكسل

ضمن علامة التبويب خيارات متقدمة ...

تعطيل الرؤية على سطح المكتب

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

احفظ التغييرات

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

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

ضمن علامة التبويب "المحتوى" ...

قم بتغيير نص الرأس h1 إلى "Commute Like a Pro" في مربع المحتوى.

ضمن علامة التبويب "تصميم" ...

لون نص النص: # a8a8a8
لون نص الرأس: # 414159
نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: لأسفل
كثافة الرسوم المتحركة: 10٪

يكشف تأثير الحركة هذا عن كتلة النص عن طريق تحريكه لأسفل للعرض.

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

قم بتحديث إعدادات وحدة الزر على النحو التالي:

لون نص الزر: # ff4823
لون حدود الزر: # ff4823
لون نص تحوم الزر: # ff2323

احفظ التغييرات

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

ضمن علامة التبويب "المحتوى" ...

لون الخلفية: #ffffff
العمود 1 صورة الخلفية: [أدخل صورتك 525 × 660]
العمود 1 موضع صورة الخلفية: أعلى اليسار
تكرار صورة الخلفية للعمود 1: لا يوجد تكرار
ألوان تدرج الخلفية للعمود 2: rgba (255،255،255،0.91) ، #ffffff
العمود 2 اتجاه التدرج: 135 درجة

ضمن علامة التبويب "تصميم" ...

استخدام العرض المخصص: نعم
العرض المخصص: 1040 بكسل
استخدام عرض مزراب مخصص: نعم
عرض الحضيض: 1
معادلة ارتفاعات العمود: نعم
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل يمين ، 0 بكسل أسفل ، 0 بكسل يسار
مساحة العمود 2 المخصصة: 5٪ أعلى ، 7٪ يمين ، 5٪ أسفل ، 7٪ يسار
نمط الرسوم المتحركة: أضعاف
اتجاه الرسوم المتحركة: لأسفل
مدة الرسوم المتحركة: 800 مللي ثانية

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

ضمن علامة التبويب خيارات متقدمة ...

أضف CSS المخصص التالي ضمن مربع العنصر الرئيسي:

box-shadow: 0 40px 90px -35px rgba(0,0,0,.3);

هذا كل شيء في هذا القسم. تحقق من نتائجك.

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

المكافأة: قم بتنزيل هذه الأقسام للاستيراد السهل

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

يتمتع!

قم بتنزيل حزمة التخطيط

تنزيل مجاني

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

تحميل

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

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

تأثيرات الرسوم المتحركة الجزء 1 (القسم 1). json

تأثيرات الرسوم المتحركة الجزء 1 (القسم 2). json

انتقل في مسؤول WordPress الخاص بك إلى Divi> مكتبة Divi> استيراد وتصدير. عندما ينبثق شكل قابلية النقل ، انقر فوق علامة التبويب استيراد والزر المسمى اختر ملفًا.

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

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

تغليف

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

قادم

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

إليك ما يمكن أن تتوقع بناءه.

قسم 3:

القسم 4:

الرجاء ترك أي تعليقات لديك أدناه.

هتافات!