6 تفاعلات دقيقة من شأنها أن تجعل موقع Divi الخاص بك أكثر متعة (برنامج تعليمي + تنزيل مجاني)

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

سأعرض لك اليوم بعض التفاعلات الدقيقة البسيطة التي يمكنك إضافتها إلى موقع Divi الخاص بك باستخدام Divi Builder و Custom CSS (بدون مسج). سأركز على تلك العناصر التي يتفاعل معها المستخدمون عادةً - الأزرار والرموز والصور.

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة سريعة على التفاعلات الدقيقة التي سنبنيها في هذا البرنامج التعليمي.

# 1 تحجيم الصور على التحويم

ابدأ في بناء تفاعل دقيق # 1

# 2 كذاب رمز التمرير لأسفل

ابدأ في بناء تفاعل دقيق # 2

# 3 تدوير أيقونات الدعاية والأزرار عند التحويم

ابدأ في بناء تفاعل دقيق # 3

# 4 انزلاق أيقونات الأزرار لإظهار وإخفاء نص الزر

ابدأ في بناء تفاعل دقيق # 4

# 5 دوران منظور الصورة ثلاثية الأبعاد

ابدأ في بناء تفاعل دقيق # 5

# 6 زر المنزلق تفاعل دقيق

ابدأ في بناء تفاعل دقيق # 6

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

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

للبدء ، كل ما تحتاجه حقًا هو Divi. سنكون أمثلة لدينا من البداية باستخدام Divi Builder في الواجهة الأمامية.

قم بتنزيل الملفات للوصول السهل

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

تحميل

# 1 تحجيم الصور على التحويم

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

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

تحجيم صورة عند التحويم باستخدام وحدة الصورة

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

ثم أضف صورة إلى الوحدة النمطية التي تختارها.

بعد ذلك ، أضف فئة CSS التالية ضمن علامة التبويب خيارات متقدمة في إعدادات الصورة:

فئة CSS: scale-image

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

/**This scales the image in the image module with the CSS class "scale-image" **/
.scale-image {
  overflow:hidden;
}
.scale-image img{
 transition: all 0.2s;
}
.scale-image:hover img {
  transform: scale(1.3)
}

الآن تحقق من النتيجة.

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

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

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

ثم أضف فئة CSS التالية إلى وحدة blurb.

فئة CSS: scale-blurb-image

مع وجود فئة CSS هذه في مكانها الصحيح ، يمكننا الآن إضافة CSS المخصص الذي يستهدف صورة الدعاية. افتح إعدادات الصفحة وأضف CSS المخصص التالي:

/**This scales the image in the bl module with the CSS class "scale-blurb-image" **/

.scale-blurb-image .et_pb_main_blurb_image {
  overflow:hidden;
}
.scale-blurb-image .et_pb_main_blurb_image img {
  transition: all 0.2s;
}
.scale-blurb-image .et_pb_main_blurb_image:hover img {
  transform: scale(1.3);
}

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

تحجيم صورة وحدة الشخص عند التحويم

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

ثم أضف فئة CSS التالية إلى وحدة الشخص.

فئة CSS: مقياس صورة شخص

افتح الآن إعدادات الصفحة وأضف CSS المخصص التالي.

/**This scales the image in the person module with the CSS class "scale-person-image" **/

.scale-person-image .et_pb_team_member_image {
  overflow:hidden;
}
.scale-person-image img {
  transition: all 0.2s;
}
.scale-person-image img:hover {
  transform: scale(1.3);
}

تحقق من نتيجة جميع الوحدات الثلاث مع قياس التفاعل الجزئي للصورة.

# 2 كذاب رمز التمرير لأسفل

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

هيريس كيفية القيام بذلك.

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

ثم قم بتحديث ما يلي:

توجيه النص والشعار: المركز
إظهار زر التمرير لأسفل: نعم
الرمز: [حدد رمز الاختيار]

ثم أضف فئة CSS التالية:

فئة CSS: رمز التمرير المرتد

ستسمح لنا هذه الفئة باستهداف رمز التمرير باستخدام css لتحريك الرمز افتراضيًا عند تحميل الصفحة.

ثم قم بتكرار وحدة الرأس fullwidth وقم بتحديث فئة CSS إلى ما يلي:

فئة CSS: bounce-scroll-icon-hover

ستسمح لنا هذه الفئة باستهداف رمز التمرير باستخدام css لتحريك الرمز عند التمرير.

ثم افتح إعدادات الصفحة وأضف CSS المخصص التالي لتنشيط الرسوم المتحركة المرتدة لمثالين لدينا.

.bounce-scroll-icon-hover .et-pb-icon {
  position: absolute;
  top:-10px;
  left:0;
  right:0;
}
.bounce-scroll-icon-hover .et-pb-icon:hover {
  animation-duration: 2s;
  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all .2s;
}

.bounce-scroll-icon .et-pb-icon {
  position: absolute;
  top:-10px;
  left:0;
  right:0;
  animation-duration: 2s;
  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all .2s;
}
.bounce-scroll-icon .et-pb-icon:hover {
  animation-name: none;
}

@keyframes bounce {
      0%   {top: -10px; opacity: 1;}
    50%  {top: 15px; opacity:0;}
    100% {top: -10px;opacity:1;}
}

تحقق من نتيجة المثالين. سيتم تحريك رمز تمرير الرأس العلوي افتراضيًا وسيتم تحريك رمز تمرير الرأس السفلي عند التمرير.

# 3 تدوير الأيقونات على التحويم

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

تدوير رمز الزر عند التمرير

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

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

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

استخدام الأنماط المخصصة للزر: نعم
فقط إظهار الأيقونة عند التحويم للزر: لا
رمز الزر: [اختر رمز الاختيار]

ثم أضف فئة CSS التالية:

فئة CSS: تدوير أيقونة الزر

مع وضع الرمز وفئة CSS لدينا ، كل ما نحتاج إلى القيام به هو إضافة CSS المخصص التالي إلى إعدادات الصفحة:

/** This rotates the button icon on hover for the button module with the CSS class "rotate-button-icon" **/
.rotate-button-icon:after {
transform: rotate(-90deg);
}

.rotate-button-icon:hover:after {
transform: rotate(0deg);
}

سيؤدي هذا إلى تدوير الرمز عكس اتجاه عقارب الساعة بمقدار 90 درجة في البداية ثم العودة إلى 0 درجة عند التمرير.

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

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

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

استخدام الأيقونة: نعم
الرمز: [إضافة رمز الاختيار]
اتجاه النص: الوسط
فئة CSS: rotate-blurb-icon

أضف الآن CSS المخصص التالية إلى إعدادات الصفحة:

/** This rotates a blurb icon with the css class "rotate-blurb-icon" **/

.rotate-blurb-icon .et-pb-icon {
  transition:  0.2s ease-out;
  transform: rotateZ(-90deg);
}

.rotate-blurb-icon .et_pb_blurb_content:hover .et-pb-icon {
  transform: rotateZ(0deg);
}

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

يعمل هذا أيضًا مع الرمز الموجود على يسار العنوان. كل ما عليك فعله هو تحديث إعدادات الدعاية الدعاية كالتالي:

وضع الصورة / الرمز: اليسار
ارتفاع خط العنوان: 1.7em

تحقق من النتيجة.

# 4 انزلاق أيقونات الأزرار لإظهار وإخفاء نص الزر

نص الزر إلى رمز عند التمرير

يعرض هذا التفاعل الجزئي نص الزر برمز افتراضيًا ثم يحرك الرمز لتغطية النص عند التمرير.

هيريس كيفية القيام بذلك.

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

استخدام الأنماط المخصصة للزر: نعم
لون خلفية الزر: # 0c71c3
عرض حد الزر: 0 بكسل
لون رمز الزر: #ffffff
فئة CSS: زر نص إلى أيقونة

أضف الآن CSS المخصص التالي إلى إعدادات الصفحة:

/** This styles button to cover button text with icon on hover when button has class "button-text-to-icon" **/

body #page-container .et_pb_button.button-text-to-icon:after {
  width: 1em;
  transition: all .3s !important;
  margin-left: 0;
  border-left: 1px solid #dddddd;
  left: calc(100% - 1em);
}

body #page-container .et_pb_button.button-text-to-icon:hover:after {
  border-left: 1px solid transparent;
  left: calc(50% - 0.5em);
  transform: scale(1.3);
}

body #page-container .et_pb_button:hover:after {
    color: #ffffff;
    margin-left: 0px;
    left: 0;
    width: 100%;
    text-align: center;
    transform: scale(1.5);
}

الآن تحقق من النتيجة.

رمز الزر للنص عند التمرير

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

لون نص الزر (افتراضي): # 0c71c3
لون نص الزر (تحوم): #ffffff

ثم استبدل فئة CSS بما يلي:

فئة CSS: زر رمز إلى نص

ثم أضف CSS المخصص التالي إلى إعدادات الصفحة:

/** This styles button to reveal button text from icon on hover when button has class "button-text-to-icon" **/

body #page-container .et_pb_button.button-icon-to-text:after {
    width: 1em;
    transition: all .3s !important;
    margin-left: 0;
  border-left: 1px solid transparent;
      left: calc(50% - 0.5em);
    transform: scale(1.3);
}

body #page-container .et_pb_button.button-icon-to-text:hover:after {
  border-left: 1px solid #dddddd;
    left: calc(100% - 1em);
  transform: scale(1);
}

الآن تحقق من النتيجة.

# 5 دوران منظور الصورة ثلاثية الأبعاد

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

هيريس كيفية القيام بذلك.

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

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

العنصر الرئيسي CSS (افتراضي):

transform: perspective(700px) rotateY(45deg);
transition: all .2s;

يقوم css بعمل شيئين لصورتنا باستخدام خاصية Transform CSS. أولاً ، يضيف منظورًا 700 بكسل وهو مقدار المسافة بين الصورة ومنظور المستخدم عند عرض الصفحة. يضيف CSS أيضًا تدويرًا للصورة. يقوم التدوير Y (45 درجة) بتدوير الصورة على المحور Y 45 درجة (في اتجاه عقارب الساعة). ومع وجود منظور في مكانه ، أصبح للصورة الآن مظهر ثلاثي الأبعاد.

العنصر الرئيسي CSS (تحوم):

transform: perspective(700px) rotateY(0deg);

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

الآن دعنا نتحقق من النتيجة.

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

العنصر الرئيسي CSS (افتراضي):

transform: perspective(700px) rotateX(45deg);
transition: all .2s;

العنصر الرئيسي CSS (تحوم):

transform: perspective(700px) rotateX(0deg);

لاحظ الاختلاف الوحيد هنا هو الحرف "X" بعد "تدوير". هذا يخبر الصورة بالدوران على المحور س بزاوية 45 درجة. ثم نأخذ قيمة الدرجة إلى 0 عند التحويم لإعادتها إلى وضعها الطبيعي.

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

في وحدة الصورة المكررة في العمود 3 ، حدِّث CSS المخصص على النحو التالي:

العنصر الرئيسي CSS (افتراضي):

transform: perspective(700px) rotateY(-45deg);
transition: all .2s;

العنصر الرئيسي CSS (تحوم):

transform: perspective(700px) rotateY(0deg);

لاحظ أن الاختلاف الوحيد بين CSS و CSS المستخدم في الصورة في العمود 1 هو القيمة "-45deg". يؤدي هذا إلى تدوير الصورة على المحور Y عكس اتجاه عقارب الساعة.

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

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

# 6 زر المنزلق تفاعل دقيق

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

إليك كيفية إنشائه.

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

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

نص الزر: "تنزيل"

محاذاة الزر: المركز
استخدام الأنماط المخصصة للزر: نعم
لون نص الزر: #ffffff
لون خلفية الزر: # 0c71c3
عرض حد الزر: 0 بكسل
نصف قطر حدود الزر: 0 بكسل
رمز الزر: انظر لقطة الشاشة
لون رمز الزر: #ffffff
وضع رمز الزر: يسار
فقط إظهار الأيقونة عند التحويم للزر: لا

الهامش المخصص: 0 بكسل للأسفل

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

نص الزر: MP3 (3.5 ميغابايت)

لون نص الزر: # 0c71c3
لون خلفية الزر: #ffffff
رمز الزر: انظر لقطة الشاشة
لون أيقونة الزر: # 0c71c3

قبل أن ننتقل إلى تصميم صفنا ، نحتاج إلى إضافة فئة CSS إلى الزر العلوي. افتح إعدادات الزر العلوي وأضف فئة CSS التالية:

فئة CSS: الزر العلوي

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

العرض المخصص: 200 بكسل
فئة العمود CSS: زر شريط التمرير

تأكد من إضافة فئة CSS إلى العمود وليس الصف.

نحن الآن جاهزون لإضافة CSS المخصص. افتح إعدادات الصفحة وأضف CSS التالية:

/** This styles the slider button **/

.slider-button {
  height: 50px;
  overflow:hidden;
  border:2px solid #0c71c3;
}

.slider-button .et_pb_button {
  display:block;
  margin: 0 !important;
}

.slider-button:hover .top-button {
  margin-top: -48px !important;
}

سيعمل CSS هذا فقط مع الزر بالحجم الافتراضي. هذا لأننا يجب أن نعطي العمود ارتفاعًا ثابتًا لإخفاء الزر الثاني حتى تحوم. يُعطى ارتفاع العمود الآن (مع الفئة "زر شريط التمرير") ارتفاعًا قدره 50 بكسل. هذا يمثل حد 2 بكسل المعطى للعمود أيضًا. عند التمرير ، يتم تحريك الزر العلوي (مع فئة "الزر العلوي" لأعلى خارج نطاق الرؤية بهامش علوي يبلغ -48 بكسل (ارتفاع الزر مطروحًا منه أحد حدود 2 بكسل). ولكن ، إذا قمت بتغيير الخط- حجم الأزرار أو حشوها ، ستحتاج إلى ضبط ارتفاع فئة الزر المنزلق مع هامش الزر العلوي وفقًا لذلك.

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

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

تنزيل مجاني: احصل على ملف Premade Layout و CSS لهذا البرنامج التعليمي

إذا كنت ترغب في الحصول على بداية سريعة لما ستبدو عليه هذه التفاعلات الدقيقة على موقع الويب الخاص بك ، فيمكنك تنزيل الملف المضغوط أدناه. بمجرد تنزيل الملف المضغوط ، حدد موقع الملف على محرك الأقراص الثابتة. وسوف يطلق عليه "microinteraction-examples.zip". عندما تقوم بفك ضغط الملف ، سترى ملفين. الملف المسمى "microinteraction -amples.json" هو تخطيط Divi. سوف تحتاج إلى تحميلها إلى مكتبة Divi الخاصة بك. يمكنك القيام بذلك من لوحة معلومات WordPress الخاصة بك عن طريق الانتقال إلى Divi> Divi Library ثم النقر فوق زر الاستيراد أعلى الصفحة. يحتوي الملف المسمى "microinteractions.css" على CSS المخصص المستخدم في البرنامج التعليمي. يجب نسخ CSS هذا في CSS المخصص لإعدادات الصفحة أو في مربع Theme Customizer الإضافي CSS. يمكنك أيضًا استخدام ميزة السحب والإفلات الخاصة بـ Divi لسحب ملف microinteractions.css مباشرةً إلى Divi Builder بمجرد تحميل التخطيط الخاص بك. سيؤدي هذا تلقائيًا إلى إضافة css إلى إعدادات صفحتك.

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

تنزيل مجاني

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

تحميل

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

افكار اخيرة

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

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

هتافات!