هل تريد إنشاء زر عائم باستخدام فهرس Z على Elementor؟
في عالم تصميم الويب، الرؤية وإمكانية الوصول ضرورية لتحقيق أقصى قدر من مشاركة المستخدم. الزر العائم هو ميزة تجذب الانتباه وتسهل التفاعل على موقعك.
باستخدام الفهرس Z في Elementor، يمكنك جعل هذا الزر يظل دائمًا أعلى العناصر الأخرى، مما يضمن سهولة الوصول إليه للزائرين، بغض النظر عن تمرير الصفحة.
ترشدك هذه المقالة خلال عملية إنشاء زر عائم باستخدام فهرس Z في Elementor. سنغطي الخطوات اللازمة لإضافة زر، ووضعه بشكل صحيح، وتكوين فهرس Z الخاص به ليكون مرئيًا في جميع الأوقات.
سواء كنت ترغب في إضافة زر عبارة تحث المستخدم على اتخاذ إجراء، أو زر الرجوع إلى الأعلى، أو أي عنصر تفاعلي آخر، فإن هذه الطريقة ستسمح لك بدمجه بشكل فعال دون الحاجة إلى البرمجة.
إذا كنت تريد أن ترى ما نريد أن نعرضه لك اليوم، شاهد الفيديو أدناه
طاولة ماتيير
لماذا إنشاء زر عائم؟
1. رؤية زيادة : تم تصميم الأزرار العائمة لتظل مرئية، بغض النظر عن تمرير الصفحة. باستخدام زر عائم، يمكنك التأكد من أن العبارات التي تحث المستخدم على اتخاذ إجراء، أشكال تفاصيل الاتصال أو خيارات التنقل المهمة متاحة دائمًا للزائرين. وهذا يزيد من احتمالية تفاعلهم مع موقع الويب الخاص بك في الأوقات المناسبة.
2. تحسين تجربة المستخدم : يعمل الزر العائم على تحسين تجربة المستخدم من خلال توفير الوصول السريع إلى الميزات الأساسية، دون أن يضطر الزائرون إلى البحث أو التمرير لأسفل الصفحة. قد يشمل ذلك أزرار الاتصال أو أزرار العودة إلى الأعلى أو العروض الخاصة. من خلال تسهيل التنقل، فإنك تجعل موقعك أكثر سهولة ومتعة في الاستخدام.
3. زيادة معدل التحويل : تجذب الأزرار العائمة الانتباه وتشجع الزائرين على اتخاذ إجراء، مثل ملء نموذج أو شراء منتج. من خلال وضع الأزرار بشكل استراتيجي مع مؤشر Z مرتفع، يمكنك زيادة حجمها إلى أقصى حد الرؤية وفعاليتها، والتي يمكن أن تؤدي إلى زيادة كبيرة في معدلات التحويل الخاصة بك.
4. مرونة تحديد المواقع : توفر الأزرار العائمة مرونة كبيرة من حيث تحديد المواقع. يمكنك وضعها في أي مكان تريده على الصفحة، سواء كان ذلك في الزاوية اليمنى السفلية لزر الدردشة المباشرة، أو الزاوية العلوية لزر العودة إلى الأعلى. تسمح لك هذه القدرة على التكيف بتلبية الاحتياجات المحددة لموقعك وجمهورك.
5. القدرة على التكيف مع احتياجات التسويق : باستخدام الأزرار العائمة، يمكنك بسهولة دمج عناصر التسويق، مثل العروض الترويجية أو الاشتراكات في النشرة الإخبارية، مباشرة في تجربة المستخدم. تجذب الأزرار العائمة انتباه الزوار دون مقاطعة تنقلهم، مما يجعلها مثالية للترويج للعروض الخاصة أو جمع معلومات الاتصال.
6. تحسين إمكانية الوصول : الأزرار العائمة تجعل الميزات المهمة في متناول المستخدمين، حتى عندما تكون في أسفل الصفحة. يعد هذا مفيدًا بشكل خاص للمواقع التي تحتوي على صفحات طويلة من المحتوى، حيث قد يحتاج المستخدم إلى الرجوع إلى الأعلى أو الوصول إلى المعلومات بسرعة.
7. إنشاء تصميم متماسك : من خلال دمج الأزرار العائمة في تصميمك، يمكنك الحفاظ على الاتساق البصري والوظيفي عبر جميع صفحات موقعك. يساعد استخدام نفس الأزرار العائمة ذات الأنماط المتسقة في تعزيز هوية علامتك التجارية وتحسين تجربة المستخدم بشكل عام.
باختصار، يعد إنشاء زر عائم طريقة رائعة لضمان بقاء العناصر الأساسية لموقع الويب الخاص بك مرئية ويمكن الوصول إليها.
لكن أولاً ، اكتشف: كيفية تثبيت Elementor على WordPress
كيفية إنشاء زر عائم مع فهرس Z في Elementor
يعد إنشاء زر عائم باستخدام فهرس Z في Elementor طريقة بسيطة وفعالة لضمان بقاء عناصر معينة في موقع الويب الخاص بك مرئية دائمًا ويمكن للمستخدمين الوصول إليها، حتى أثناء التمرير لأسفل الصفحة.
فيما يلي إجراء خطوة بخطوة لإضافة زر عائم باستخدام إعدادات Z-index لجعله يظهر فوق كل العناصر الأخرى.
الخطوة 1: إضافة زر جديد
1. افتح العنصر
- انتقل إلى الصفحة أو المنشور الذي تريد إضافة الزر العائم فيه.
- انقر فوق "تحرير باستخدام Elementor" لفتح الملفمحرر مرئي من العنصر.
2. أضف أداة الزر
- في لوحة الأدوات الموجودة على اليسار، ابحث عن أداة "الزر".
- اسحب هذه الأداة إلى القسم المطلوب من صفحتك.
3. تخصيص الزر
- في اللوحة اليمنى، قم بتخصيص نص الزر، مثل " اتصل بنا "أو" احصل على عرض توضيحي".
- قم بتغيير اللون والطباعة والهوامش في " الطراز » بحيث يتناسب الزر تمامًا مع تصميمك.
انظر أيضا: العنصر: تقديم أفضل منشئ صفحات WordPress
الخطوة 2: تطبيق تحديد المواقع العائمة
1. تكوين تحديد المواقع
- انتقل إلى علامة التبويب "خيارات متقدمة" في اللوحة اليمنى.
- ضمن "الموضع"، اختر "ثابت" أو "مطلق" اعتمادًا على التأثير المطلوب. غالبًا ما يتم استخدام الموضع "الثابت" للأزرار العائمة لأنه يبقيها في مكانها حتى عند التمرير لأسفل الصفحة.
2. تعيين الموقف
- استخدم خيارات تحديد الموضع لوضع الزر في الموقع المطلوب على الصفحة. على سبيل المثال، يمكنك وضعه في أسفل اليمين بالإعدادات التالية:
- أسفل - إزاحة : شنومكسبكس
- Droite - فجوة : شنومكسبكس
- اضبط هذه الإعدادات حسب الحاجة بحيث يكون الزر مرئيًا بوضوح.
الخطوة 3: تكوين مؤشر Z
1. فهم مؤشر Z
- الفهرس Z هو خاصية CSS تحدد العنصر الذي سيتم عرضه فوق العناصر الأخرى. كلما ارتفعت القيمة، كلما تميز العنصر عن العناصر الأخرى.
2. قم بتطبيق مؤشر Z على الزر
- لا تزال في علامة التبويب "خيارات متقدمة"، ابحث عن قسم "CSS المخصص".
- أضف كود CSS التالي لتعيين رمز Z مرتفع: كود cssCopy
z-index: 9999;
- تضمن هذه القيمة أن الزر العائم سيكون مرئيًا دائمًا فوق العناصر الأخرى في الصفحة.
الخطوة 4: الاختبار والضبط
1. التحقق من الوظيفة
- قم بمعاينة صفحتك للتأكد من أن الزر العائم يعمل بشكل صحيح ويظل مرئيًا عند التمرير.
- اختبر الزر على أجهزة مختلفة للتأكد من وضعه بشكل صحيح ومرئي على جميع الشاشات.
2. اضبطه إذا لزم الأمر
- إذا كان من الصعب رؤية الزر أو استخدامه، فارجع إلى إعدادات النمط والموضع.
- اضبط اللون أو الهوامش أو الفهرس Z لتحسين رؤية الزر وإمكانية الوصول إليه.
3. قم بتدوير الزر الخاص به إذا لزم الأمر
ستحتاج في بعض الأحيان إلى تدوير الزر العائم الخاص بك بحيث يتناسب تمامًا مع تصميمك.
- تحت علامة التبويب متقدم، الوصول إلى فصول css من الكتلة تصميم, ثم اكتب
rotate
في الداخل.
انظر أيضا: العنصر: تقديم أفضل منشئ صفحات WordPress
- الوصول إلى الكتلة CSS مخصصة ، ثم الصق الكود التالي في الحقل:
.rotate.rotate
{transform: rotate(90deg);}
ملاحظة : إذا كنت لا ترى الكتلة CSS مخصصة، فأنت تستخدم نسخة مجانية. يجب عليك الانتقال إلى نسخة الموالية Elementor للاستفادة من هذه الميزة.
اقرأ أيضا: العنصر: كيفية ترحيل موقع WordPress
إذا كان هناك إزاحة، فانتقل إلى تحديد الموضع وتعديل الإزاحات لتتناسب مع ما تريد.
قد ترغب أيضًا في تحريك هذا الزر عند التمرير. لذا
- في علامة التبويب متقدم اذهب إلى الكتلة محول
- انقر فوق الزر "عند التحويم".
- قم بتغيير الإزاحة من خلال النقر على قلم الرصاص
- تغيير الإزاحة
سيتحرك الزر عند التمرير حسب الرغبة.
هناك عدة خيارات لتحقيق شيء معين في Elementor. عندما يتعلق الأمر بالزر العائم ، هناك خياران يمكنك استخدامهما. لقد قمنا هنا بتغطية طريقة واحدة فقط ، وستكون الطريقة الأخرى عبارة عن برنامج تعليمي آخر.
اقرأ أيضا: العنصر: كيفية ترحيل موقع WordPress
إذا كنت ترغب في الحصول على المزيد من خيارات التصميم ، فسيكون إنشاء زر إجراء عائم باستخدام منشئ Popup بديلاً أفضل حيث سيكون لديك خيارات لتخصيص الزر بالإضافة إلى السلوك ، مثل وقت إغلاق الزر ، والمدة ، وحركة الدخول أو الخروج ، إلخ. .
لقد أكملت للتو هذه المهمة بسهولة. فقط قم بمعاينة عمل جهازك اللوحي والهاتف الذكي ، في محاولة لتغيير الهوامش لتتناسب مع كل جهاز.
الأسئلة الشائعة
لماذا لا يظهر الزر العائم فوق العناصر الأخرى؟
تأكد من تكوين الفهرس Z بشكل صحيح وتأكد من عدم وجود أي عناصر أخرى في الصفحة تحتوي على فهرس Z أعلى.
هل الزر العائم متوافق مع الأجهزة المحمولة؟
نعم، تعمل الأزرار العائمة بشكل جيد على الأجهزة المحمولة إذا قمت بضبط الموضع والنمط للشاشات الصغيرة.
هل يمكنني استخدام الرسوم المتحركة على الزر العائم الخاص بي؟
قطعاً. يمكنك إضافة رسوم متحركة عبر خيارات التصميم الخاصة بـ Elementor لجعل الزر أكثر جاذبية.
كيف يمكنني ضبط الزر العائم بحيث لا يتداخل مع المحتوى؟
استخدم خيارات الهامش والحشوة في Elementor لضبط المساحة حول الزر بحيث لا تغطي المحتوى المهم.
وفي الختام
يمكن أن يؤدي إنشاء زر عائم بمؤشر Z في Elementor إلى تحويل تفاعل المستخدم على موقع الويب الخاص بك. يعد هذا النوع من الأزرار، الذي يظل مرئيًا بغض النظر عن تمرير الصفحة، مثاليًا لجذب الانتباه إلى العبارات المهمة التي تحث المستخدم على اتخاذ إجراء، أشكال معلومات الاتصال، أو غيرها من العناصر الهامة. باستخدام ميزات Elementor، يمكنك بسهولة تكوين الموضع العائم وضبط مؤشر Z للتأكد من أن الزر الخاص بك يبرز فوق المحتوى الآخر.
باتباع الخطوات الموضحة، يمكنك تنفيذ زر عائم فعال دون الحاجة إلى مهارات البرمجة. تأكد من اختبار الزر الخاص بك على أجهزة مختلفة للتحقق من رؤيته وتأثيره. باستخدام الزر العائم المصمم جيدًا، يمكنك تحسين تجربة المستخدم وزيادة التفاعلات على موقعك.
لا تنتظر أكثر من ذلك لتحسين التفاعل على موقع الويب الخاص بك. حاول إنشاء زر عائم باستخدام Elementor الآن وشاهد كيف يمكن أن يعزز تفاعل الزائرين.
إذا كانت هذه المقالة مفيدة لك، لا تتردد في مشاركتها مع زملائك وتزويدنا بتعليقاتك! ولكن يمكنك أيضًا التشاور مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.