كيفية إنشاء كتلة ثابتة (ثابتة) في جوتنبرج بدون كود

هل تبحث عن طرق لإنشاء كتلة لزجة في جوتنبرج؟ 🤔

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

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

👉 إليك مثال على ما نتحدث عنه - يمكنك أن ترى كيف أن الرموز الاجتماعية "عالقة" في موضعها حتى أثناء تمرير المستخدم:

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

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

في هذا البرنامج التعليمي، سنوضح لك كيفية استخدام مكون Gutenberg الإضافي الشهير المسمى Otter Blocks لإضافة كتلة لاصقة إلى موقع WordPress الخاص بك.

دعونا نتعمق في الأمر. 🤿

كيفية إضافة كتلة لزجة في محرر جوتنبرج

لإضافة كتلة لاصقة في محرر Gutenberg، يتعين عليك اتباع الخطوات التالية:

• الخطوة 1: تثبيت وتفعيل المكون الإضافي Otter Blocks
• الخطوة 2: قم بتمكين أداة التحويل إلى Sticky للكتلة الخاصة بك
• الخطوة 3: تغيير موضع الكتلة اللاصقة
• الخطوة 4: تكوين الإزاحة
• الخطوة 5: تمكين الكتلة اللاصقة على الهاتف المحمول
• الخطوة الاختيارية: جرب الوضع العائم
• الخطوة الاختيارية: تحديد سلوك الكتلة

الخطوة 1: تثبيت وتفعيل المكون الإضافي Otter Blocks 🔌

Otter Blocks هو مكون إضافي لبرنامج WordPress يعمل على توسيع وظائف محرر Gutenberg.

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

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

يحتوي Otter Blocks على إصدار مجاني ومميز (يسمى Otter Pro).

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

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

يتوفر Otter Pro مقابل رسوم سنوية قدرها 49 دولارًا لموقع ويب واحد. يمكنك شرائه من هنا. وإذا كنت تريد تجربة المكون الإضافي قبل استخدامه، فقم بتجربة هذا العرض التوضيحي.

➡️ للمتابعة، قم بتثبيت الإصدار المجاني أو المميز من Otter. في البرنامج التعليمي أدناه، سنحاول ملاحظة متى تتطلب ميزة معينة الخيار المميز.

الخطوة 2: تمكين أداة التحويل إلى مثبت للكتلة الخاصة بك 🚧

افتح الصفحة أو المنشور الذي تريد إضافة الكتلة اللاصقة إليه في محرر Gutenberg.

حدد الكتلة التي تريد جعلها ثابتة وانتقل إلى اللوحة الموجودة على الجانب الأيمن من المحرر.

في اللوحة، انتقل إلى Block وانتقل إلى خيار Block Tools . قم بتوسيع أدوات الحظر عن طريق تحديد علامة الجمع .

ثم اختر التحويل إلى مثبت من القائمة المنسدلة.

سيظهر خيار جديد يسمى Sticky أسفل أدوات الحظر مباشرة. قم بتوسيع ذلك وانتقل إلى Sticky To .

في Sticky To، يمكنك تعيين العنصر الذي تريد أن تلتصق به الكتلة. هناك أربعة خيارات:

1. كتلة المستوى الأعلى
2. قسم
3. كتلة الوالدين
4. شاشة

لفهم هذه الخيارات وأي منها يناسب منشورك الثابت، افتح "نظرة عامة على المستند " في محرر Gutenberg وانظر إلى الكتل المحيطة بكتلة منشورك الثابت.

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

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

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

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

يتم ضبط موضع الكتلة اللاصقة افتراضيًا على الأعلى. لمعرفة كيفية تغيير موضعه، انتقل إلى الخطوة التالية.

الخطوة 3: تغيير موضع الكتلة اللاصقة 🚩

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

يمكنك وضع الكتلة اللاصقة في الجزء العلوي أو السفلي من الشاشة. الموضع السفلي متاح فقط لمستخدمي Otter Pro .

إليك كيفية ظهور الكتلة على أحد مواقعنا التجريبية:

الخطوة 4: تكوين الإزاحة ⚙️

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

الخطوة 5: تمكين الكتلة اللاصقة على الهاتف المحمول 📱

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

بالمناسبة، يمكن لمستخدمي Otter Pro فقط الوصول إلى خيار الهاتف المحمول .

خطوة اختيارية: جرب الوضع العائم 🏄

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

يمكن فقط لمستخدمي Otter Pro استخدام الوضع العائم ويمكن تطبيقه على كتلة المستوى الأعلى فقط والتي هي في حالتنا كتلة المجموعة.

بمجرد تبديل الوضع العائم، سيُطلب منك تحديد عرض الكتلة وجانبها وإزاحتها الجانبية .

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

نوصي بمعاينة الصفحة بعد تكوين الوضع العائم وإجراء التعديلات اللازمة.

الخطوة الاختيارية: تحديد سلوك الكتلة 👨🏽‍💼

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

يمكنك ضبط السلوك بحيث يتم طيه أو تلاشيه أو تكديسه .

سيؤدي اختيار الانهيار إلى ضبط الكتل اللاصقة بنفس الحركة على طي بعضها البعض عند الاصطدام، كما يلي:

وسيؤدي اختيار التلاشي إلى ضبط الكتلة على التلاشي أو الاختفاء في الكتلة الأخرى .

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

يتوفر كل من التلاشي والمكدس لمستخدمي Otter Pro فقط .

هذا كل شيء. لقد قمت الآن بإضافة كتلة لاصقة في جوتنبرج. 🤩

قم بإنشاء أول كتلة لاصقة في جوتنبرج 🧱

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

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

على الرغم من وجود عدد قليل من المكونات الإضافية للكتل اللاصقة، فإن Otter Blocks هو البرنامج الإضافي الأسهل والأكثر سهولة في الاستخدام.

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

👉 للحصول على كتلة ثابتة وتشغيلها على صفحتك باستخدام المكون الإضافي Otter Blocks، يتعين عليك اتباع الخطوات التالية:

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