تسليط الضوء على برنامج Divi Plugin: Easy Slide-Ins

Easy Slide-Ins هو مكون إضافي تابع لجهة خارجية لـ Divi و Extra والذي يسمح لك بإنشاء شرائح إضافية (ونوافذ منبثقة) باستخدام Divi builder. يمكن أن تعرض الشرائح الإضافية أي شيء يمكن بناؤه باستخدام Divi Builder. قم بتشغيل الشرائح الإضافية مع نسبة التمرير ، ونية الخروج ، وزر بمواقع متعددة ، ومع فئة CSS. يتضمن تحديثات وعروض توضيحية مدى الحياة.

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

تثبيت Easy Slide-Ins

أولاً ، قم بفك ضغط الملف. داخل المجلد ، ستجد عروض توضيحية وملفًا به ارتباط إلى الوثائق والمكوِّن الإضافي Easy Slide-Ins.

قم بتحميل وتنشيط البرنامج المساعد كالمعتاد.

تمت إضافة قائمة جديدة إلى لوحة المعلومات تسمى Easy Slide-Ins. انقر فوق هذه القائمة وأدخل مفتاح الترخيص الخاص بك.

يؤدي تنشيط الترخيص إلى إضافة عنصرين من عناصر القائمة (كل العناصر وإضافة جديد) حيث يمكنك رؤية الشرائح الإضافية وإنشاء شرائح إضافية جديدة.

إنشاء شريحة جديدة

يؤدي النقر فوق إضافة شريحة جديدة إلى فتح محرر حيث يمكنك استخدام Divi Builder لإنشاء الشريحة.

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

أظهر العنوان وأدخل النص لعرضه. اختر لون خلفية النص وألوانه ، وعائلة الخط وحجمه ووزنه. عيّن استدارة الزاوية وارتفاع الملصق وعرض التسمية. أظهر رمز الإغلاق واختر ألوان الخلفية والأيقونة وحجم الرمز.

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

تتم إضافة ميزات أخرى أو إزالتها بناءً على الخيارات التي تختارها. لقد حددت Box Shadow وهو يوفر الآن خيارات للوضع الأفقي والرأسي ، وقوة التمويه والانتشار ، واللون.

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

تتيح لك علامة التبويب الحقول المخصصة إضافة حقول مخصصة تمامًا مثل أي صفحة أو منشور.

أمثلة سهلة الشرائح الإضافية

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

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

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

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

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

يفتح في وضع ملء الشاشة ويتضمن زر الإغلاق.

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

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

تمنحك الشرائح الإضافية فئة تشغيل الزر. يمكنك استخدام هذا مع الأزرار لفتح الشريحة.

انسخ الفصل والصقه في حقل CSS Class بالزر.

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

عروض توضيحية سهلة للشرائح الإضافية

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

هذا هو تجميع البريد الإلكتروني بقصد الخروج. يتضمن عدة وحدات نصية ونموذج اتصال ووحدة صورة.

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

هذا هو مجموعة بريد إلكتروني مع نية التمرير. يتضمن صورة خلفية ووحدتين نصيتين ووحدة بريد إلكتروني.

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

هذا هو دليل زوارك. يتضمن وحدة رمز (لخرائط Google) والعديد من الدعاية والنصوص ونموذج الاتصال.

إليك كيفية ظهورها على الصفحة باستخدام الإعدادات الافتراضية.

هذا هو العرض الترويجي مع التسمية. يتضمن وحدة نصية والعديد من جداول التسعير وزرًا.

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

إليك نفس التصميم عند عرضه باستخدام Extra. يسعدني أن أرى أنه يعمل بشكل رائع مع كل من Divi و Extra.

سهولة في الأسعار والتوثيق

Easy Slide-Ins متاح من موقع المطور. لديها خياران للشراء:

• موقع واحد - 27 دولارًا
• مواقع غير محدودة - 97 دولارًا

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

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

خواطر ختامية

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

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

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

إذا كنت تبحث عن طريقة بسيطة وبديهية لإنشاء شرائح إضافية باستخدام Divi Builder ، فإن Easy Slide-Ins تستحق المشاهدة.

نريد أن نسمع منك. هل جربت Easy Slide-Ins for Divi؟ أخبرنا برأيك في التعليقات.

صورة مميزة عبر ByEmo / shutterstock.com