كيفية إضافة بطاقة عائمة إلى موقع Divi الخاص بك

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

معاينة

سطح المكتب

متحرك

1. قم بإنشاء قالب صفحة

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

استخدم مُنشئ القوالب لإنشاء القالب

للبدء ، انتقل إلى Divi - Theme Builder في لوحة معلومات WordPress الخاصة بك. اختر قسم Custom Body للصفحات التي تريد تطبيق البطاقة العائمة عليها أو Global Body لتطبيقها في كل مكان.

بمجرد تحميل Divi Visual Builder ، اختر Start من Scratch عند تحديد الخيار.

أضف صفًا بعمود واحد ووحدة محتوى المشاركة

ثم اختر صفًا أحادي العمود عند مطالبتك بذلك.

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

ضبط تباعد المقطع والصف

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

احفظ التغييرات وأدخل إعدادات الصف . مرة أخرى، تعيين أعلى وأسفل الحشو ل0px.

بعد ذلك ، ابحث عن عنوان Sizing وقم بالتبديل باستخدام Custom Gutter Width وقم بتعيين قيمته على 1. بعد ذلك ، قم بتعيين Width و Max Width على 100٪.

بعد الانتهاء من الإعداد ، دعنا نبدأ في صنع البطاقة العائمة!

2. إضافة بطاقة عائمة

أضف قسمًا جديدًا وصفًا

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

أضف وحدة دعاية مغالى فيها

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

اضبط إعدادات القسم والصف

مع وجود ذلك في مكانه ، نحتاج إلى ضبط المساحة المتروكة وموضع هذا الصف والقسم. لذلك أولا، انتقل إلى إعدادات القسم وتعيين الأعلى والحشو أسفل إلى 0px تحت العرض - التباعد.

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

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

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

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

اضبط لون الخلفية

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

اختر صورة بطاقة

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

شكل زوايا البطاقة

بعد ذلك ، انتقل إلى علامة التبويب " تصميم" وإلى عنوان " الحدود" . ابحث عن خيارات Rounded Corners واضبط كل زاوية على 25 بكسل . سيؤدي ذلك إلى تنعيم الحواف الحادة والمربعة دون تغيير شكل البطاقة ككل.

محاذاة النص

تحت عنوان النص ، قم بتعيين محاذاة النص إلى المركز.

نمط نص عنوان البطاقة العائمة

نص العنوان الذي قمت بتعيينه مسبقًا هو الافتراضي H4 . لتصميمه ، انتقل إلى عنوان نص العنوان ، واختر علامة التبويب H4 ، وقم بتغيير خيارات العنوان التالية:

• الخط: بوبينز
• وزن الخط: عريض
• لون النص: # 22303f
• حجم النص: 20 بكسل
• ارتفاع الخط: 1.3em

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

صمم نص البطاقة

بعد ذلك ، انتقل إلى Body Text وقم بتغيير Body Font إلى Poppins لمطابقة خط العنوان.

ثم انقر فوق علامة التبويب Link (رمز السلسلة) وقم بتبديل Link Text Color بلون مجاني لموقعك. اخترنا # 97c357 .

تحجيم بطاقة "حول"

ضمن عنوان تغيير الحجم ، أضف القيم التالية إلى هذه الإعدادات:

• عرض الصورة: 75٪
• عرض المحتوى: 25vw
• العرض: 25vw
• العرض الأقصى: 30vw

ضمن إعدادات الاستجابة ، اضبط القيم التالية:

• عرض المحتوى: 90vw
• العرض: 90vw
• العرض الأقصى: 95vw

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

التباعد عن الدعاية

عنوان تباعد هو حل سريع، حيث تحتاج إلى تعيين الهامش الأيسر إلى 0px، أعلى وأسفل الحشو ل2vw، واليسار واليمين الحشو ل1vw.

للحصول على ضبط الاستجابة، لن يؤدي إلا إلى أعلى وأسفل الحشو تغيير. سنحدد هذه بنسبة 5٪ .

أضف Box Shadow

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

ضبط استجابة CSS

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

لذلك نريد إضافة عرض: لا شيء ؛ ضمن حقل Blurb Image للجوال فقط ضمن Custom CSS .

إصلاح وتعويم البطاقة مع إعداد الموضع

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

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

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

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

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

عندما يتم ضبط كل شيء بشكل صحيح وضبطه على موقعك الشخصي ، يجب أن يبدو المنتج النهائي مشابهًا لذلك.

سطح المكتب

متحرك

استنتاج

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

لماذا استخدمت البطاقات العائمة على مواقع الويب الخاصة بك؟ اسمحوا لنا أن نعرف في التعليقات!