استخدام الرسوم المتحركة لديفي لفتح المحتوى بالصور المنزلقة

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

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

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

هيا بنا نبدأ.

فيما يلي نظرة خاطفة سريعة على ما سنبنيه في منشور اليوم

قسم 3

القسم 4

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

احصل على صورك جاهزة

بالنسبة للقسم الثالث ، ستحتاج إلى صورتين. يجب أن تكون الأولى حوالي 880 × 600 والثانية حوالي 790 × 880. لا يجب أن تكون أحجام الصور هذه دقيقة. أنا فقط أدرج هذه الأبعاد لأعطيك فكرة.

عند بناء القسم الرابع ، ستحصل أيضًا على صورتين بحجم 600 × 400.

استخدم Visual Builder

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

استخدام الرسوم المتحركة لديفي لفتح المحتوى بالصور المنزلقة

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

قسم المبنى 3 من العرض التوضيحي

القسم 3 هو مثال رائع لكيفية تصميم وتحريك وحدة الحث على اتخاذ إجراء مع صورة مصاحبة.

دعنا نتعمق.

باستخدام Visual Builder ، أضف قسمًا عاديًا بصف من عمودين. في العمود الأيسر أضف وحدة صورة.

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

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

عنوان URL للصورة: [أدخل صورتك مقاس 880 × 600]

ضمن علامة التبويب "تصميم" ...
فرض عرض كامل: نعم
نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: يسار
كثافة الرسوم المتحركة: 20٪
بدء تعتيم الرسوم المتحركة: 100٪

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

إضافة وحدة المقسم

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

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

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

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

إظهار الحاجز: نعم

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

اللون: # e4ca77
وزن الحاجز: 4 بكسل
العرض: 80 بكسل (عليك كتابة هذه القيمة لأن القيمة الافتراضية هي النسبة المئوية)
محاذاة الوحدة: افتراضي (يسار)
الهامش المخصص: 60 بكسل للأعلى و 0 بكسل للأسفل

نمط الرسوم المتحركة: أضعاف
اتجاه الرسوم المتحركة: صحيح
مدة الرسوم المتحركة: 1200 مللي ثانية
تأخير الرسوم المتحركة: 50 مللي ثانية
كثافة الرسوم المتحركة: 70٪
بدء التعتيم في الرسوم المتحركة: 0٪

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

أضف وحدة دعوة إلى العمل

ضمن وحدة Divider ، أضف وحدة Call to Action بالإعدادات التالية:

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

العنوان: "The Perfect View"
نص الزر: "معرفة المزيد"
المحتوى: "Lorem ipsum dolor sit amet، consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus، sagittis mi id، efficitur nisl. Lorem ipsum dolor sit amet، consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus ، sagittis mi id ، efficitur nisi. "
وصلة: #
استخدام لون الخلفية: NO

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

لون النص: غامق
اتجاه النص: يسار
خط الرأس: لاتو ، أحرف كبيرة (TT)
حجم خط الرأس: 38 بكسل
لون نص الرأس: # 0c0c0c
تباعد حروف الرأس: 0.2em
ارتفاع خط الرأس: 1.4em

خط الجسم: لاتو
حجم خط الجسم: 18 بكسل
لون نص الجسم: # 9e9e9e
ارتفاع خط الجسم: 1.8em

استخدام الأنماط المخصصة للزر: نعم
حجم نص الزر: 15 بكسل
لون نص الزر: # 000000
لون خلفية الزر: rgba (225،225،225،0)
عرض حد الزر: 0 بكسل
تباعد حرف الزر: 2 بكسل
خط الزر: لاتو ، غامق (B) ، أحرف كبيرة (TT)
رمز الزر: السهم الأيمن
إظهار الأيقونة عند التمرير للزر فقط: لا
تباعد الأحرف التي تحوم على الزر: 0 بكسل

نمط الرسوم المتحركة: أضعاف
اتجاه الرسوم المتحركة: صحيح
مدة الرسوم المتحركة: 1200 مللي ثانية
تأخير الرسوم المتحركة: 50 مللي ثانية
كثافة الرسوم المتحركة: 70٪
بدء التعتيم في الرسوم المتحركة: 0٪

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

انقر الآن لتحرير إعدادات الصف وتحديث ما يلي:

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

استخدام العرض المخصص: نعم
العرض المخصص: 1366 بكسل

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

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

z-index: 999;

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

كرر صفك وقم بتحديثه

هذا كل شيء في الصف الأول. لتوفير الوقت في إنشاء الصف الثاني ، قم بتكرار الصف الذي أنشأته للتو.

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

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

قم بإخراج CSS المخصص في العمود 1 العنصر الرئيسي وأضفه إلى مربع العنصر الرئيسي في العمود 2:

z-index: 999;

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

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

تحديث وحدة الصورة و Call to Action Module في الصف الثاني

بعد ذلك ، اسحب وحدة الصورة إلى العمود الأيمن واسحب وحدة التقسيم ووحدة استدعاء الإجراء إلى العمود الأيسر.

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

الآن كل ما نحتاج إلى القيام به هو إعادة النظر في كل وحدة من الوحدات داخل الصف وإجراء بعض التغييرات.

أولاً ، قم بتحديث إعدادات Divider Module كما يلي:

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

محاذاة الوحدة: صحيح
اتجاه الرسوم المتحركة: يسار

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

بعد ذلك ، قم بتحديث إعدادات وحدة Call to Action كما يلي:

العنوان: "تتحدث عن نفسها"
اتجاه النص: صحيح
محاذاة نص الرأس: صحيح
العرض: 700 بكسل (اكتب هذا)
اتجاه الرسوم المتحركة: يسار

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

قم بعد ذلك بتحديث وحدة الصورة في العمود الأيمن بصورتك الجديدة 790 × 880.

هذا كل شيء في القسم 3!

تحقق من النتيجة الخاصة بك.

قسم المبنى 4 من العرض التوضيحي

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

باستخدام Visual Builder ، أضف قسمًا عاديًا به صف من عمودين (نصف ونصف). قبل أن نضيف الوحدة الأولى ، دعنا نضيف لون خلفية إلى القسم الخاص بنا. انقر لتحرير إعدادات القسم.

ضمن علامة تبويب المحتوى ، حدد علامة تبويب لون الخلفية وأدخل اللون # 262938.

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

أضف الوحدة النمطية الأولى للنص

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

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

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

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>

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

لون النص: فاتح
خط الرأس: عرض Playfair ، غامق (B)
حجم خط الرأس: 38 بكسل
ارتفاع خط الرأس: 1.3em
الهامش المخصص: 20 بكسل للأسفل
الرسوم المتحركة: أضعاف
اتجاه الرسوم المتحركة: لأعلى

أضف وحدة النص الثانية

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

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

المحتوى: "Lorem ipsum dolor sit amet، consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus، sagittis mi id، efficitur nisl. Sed nec purus tempus ، sagittis mi id ، efficitur nisl. "

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

لون النص: فاتح
حجم خط النص: 18 بكسل
لون نص النص: rgba (255،255،255،0.66)
ارتفاع خط النص: 1.9em
الهامش المخصص: 40 بكسل للأسفل
نمط الرسوم المتحركة: أضعاف
اتجاه الرسوم المتحركة: لأسفل
تأخير الرسوم المتحركة: 150 مللي ثانية

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

أضف وحدة الزر

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

نص الزر: معرفة المزيد
URL الزر: #

استخدام الأنماط المخصصة للزر: نعم

حجم نص الزر: 15 بكسل
لون نص الزر: # 01254c
لون خلفية الزر: #ffffff
نصف قطر حدود الزر: 0 بكسل
خط الزر: غامق (B) ، وأحرف كبيرة (TT)

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

نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: لأسفل
مدة الرسوم المتحركة: 1600 مللي ثانية
تأخير الرسوم المتحركة: 150 مللي ثانية
كثافة الرسوم المتحركة: 20٪

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

أضف وحدة الصورة إلى العمود الأيمن

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

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

عنوان URL للصورة: [أدخل صورتك مقاس 600 × 400]

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

فرض عرض كامل: نعم

نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: صحيح
تأخير الرسوم المتحركة: 800 مللي ثانية
كثافة الرسوم المتحركة: 20٪

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

تحديث إعدادات الصف

انقر الآن لتحرير إعدادات الصف وتحديث ما يلي:

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

استخدام العرض المخصص: نعم
العرض المخصص: 1366 بكسل

الحشو المخصص: 27 بكسل أعلى ، 0 بكسل يمين ، 170 بكسل أسفل ، 0 بكسل يسار
مساحة العمود 1 المخصصة: 6٪ للأعلى

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

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

z-index: 999;

تعمل إضافة css على التأكد من بقاء النص أعلى الصورة أثناء الرسوم المتحركة.

ثم أضف CSS المخصص التالي إلى مربع Column 2 Main Element:

transform: scale(1.3);
transform-origin: top right;

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

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

كرر صفك وقم بتحديثه

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

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

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

الحشو المخصص: 40 بكسل أعلى ، 0 بكسل يمين ، 40 بكسل أسفل ، 0 بكسل يسار
حشوة مخصصة للعمود 1: [استعادة الوضع الافتراضي ؛ محو 6٪ أعلى]
مساحة العمود 2 المخصصة: 6٪ للأعلى

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

امسح CSS المخصص من Column 1 Main Element Box و Column 2 Main Element Box. تم ترحيل هذا من التكرار ولم نعد بحاجة إليه بعد الآن.

تحديث وحدة الصورة

بعد ذلك ، قم بتحديث وحدة الصورة (الآن في العمود الأيسر) بما يلي:

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

عنوان URL للصورة: [أدخل صورتك الجديدة مقاس 600 × 400]

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

اتجاه الرسوم المتحركة: يسار

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

إذا كنت تعتقد أن هذه الصورة قد تم تعتيمها بالفعل. فكر مرة اخرى! كل ما عليك فعله لإضافة تأثير التمويه هذا هو إضافة السطر التالي من CSS المخصص إلى مربع العنصر الرئيسي:

filter: blur(5px) opacity(.6);

بالإضافة إلى تأثير التمويه ، فإن هذا css يجعل الصورة شبه شفافة مع عتامة 60٪.

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

تحديث وحدة النص في العمود الأيمن

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

<h1>Consectetur adipiscing elit</h1>

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

وفويلا! لقد انتهينا جميعًا من القسم 4. دعنا نتحقق من النتيجة النهائية.

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

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

يتمتع!

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

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

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

تغليف

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

قادم

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

نتطلع إلى ذلك.

لا تنس التواصل في التعليقات أدناه!