ووردبريس للمبتدئين: تخصيص متوسط ​​المستوى

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

مربعات الرموز

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

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

بمجرد تحديد موقع " الرأس " ، وجه انتباهك إلى يسار الشاشة ، حيث سترى قائمة " الأدوات المتاحة ". ProteusThemes: IconBox هي الأداة التي تبحث عنها.

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

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

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

الصفحة الأمامية المتزلج

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

بمجرد التغيير إلى " Front Page With Slider " ، سيكون هناك تعريف جديد في أسفل الشاشة بعنوان " Front page slider " ، انقر هنا لإضافة صورك ونصك إلى شريط التمرير:

الرموز القصيرة

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

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

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

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

منشئ الصفحة

كان التعامل مع المكون الإضافي لـ SiteOrigin Page Builder أمرًا بالغ الأهمية في إعادة إنشاء العرض التوضيحي التلقائي. كانت المهمة الأولى التي اضطررت لاستخدامها من أجلها هي إنشاء IconBox مع قسم Popover أسفل رأس الصفحة الرئيسية:

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

من هنا ، حدد " إضافة صف ". سترى بعد ذلك خيارات متعلقة بالأعمدة داخل هذا الصف. يمكنك تحديد عدد الأعمدة التي تريدها ، ونسبة حجمها وما إذا كنت تريدها في ترتيب الحجم من اليسار إلى اليمين ، أو العكس. بالنسبة إلى IconBox Popover الخاصة بي ، اخترت 3 أعمدة متساوية الحجم.

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

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

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

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

لقد استخدمت Page Builder بالطريقة نفسها تمامًا لإنشاء أعمدة الصفحة المميزة هذه:

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

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

إشترك الآن