إنشاء موقع لمراجعة المنتج باستخدام الجزء الإضافي - الجزء 3

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

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

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

فيما يلي نظرة خاطفة على ما سنبنيه

تحضير عناصر التصميم

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

لتصميم تخطيطات الفئات ، سنستخدم منشئ فئة Extra's وقليلًا من CSS المخصص.

هيا بنا نبدأ.

إنشاء موقع لمراجعة المنتج باستخدام الجزء الإضافي - الجزء 3

اشترك في قناتنا على اليوتيوب

بناء تخطيط الفئة للصفحة الرئيسية

بشكل افتراضي ، يستخدم extra تخطيط فئة للصفحة الرئيسية. لإنشاء تخطيط مخصص ، من الشريط الجانبي للوحة معلومات WordPress ، انتقل إلى Extra> Category Building . ابحث عن تخطيط الفئة المسمى "الصفحة الرئيسية" ، ثم قم بالمرور فوقه وحدد تحرير.

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

الآن يمكننا البدء في بناء تخطيطنا المخصص. ابدأ بإضافة عمود ثلثي وثلث إلى الصف في القسم القياسي.

إلى العمود الأيسر (الثلثين) ، أضف شريط تمرير المشاركات المميزة.

قم بتحديث إعدادات وحدة شريط التمرير للمشاركات المميزة على النحو التالي:

تحت علامة تبويب المحتوى ...

الفئات: الكل
عرض المشاركات المميزة فقط: [سأحافظ على هذا الوضع حتى تقرر أي المشاركات التي تريد إبرازها. يمكنك تعيين منشور معين كما هو وارد في مربع الإعدادات الإضافية في صفحة محرر المنشورات.]
عرض المؤلف: OFF
تاريخ العرض: OFF

تحت علامة تبويب التصميم ...

لون سهم التنقل: #ffffff
خلفية Nav Arrow: # 000000
خلفية التسمية التوضيحية: rgba (255،255،255،0.4)
حجم خط العنوان: 24 بكسل
لون نص العنوان: # 000000
حجم الخط الميتا: 16 بكسل
لون نص التعريف: # 000000
الهامش المخصص: أسفل 0 بكسل

ضمن علامة التبويب "خيارات متقدمة" ...

أدخل CSS المخصص التالي في مربع نص Main Element:

border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
margin-bottom: 0px !important;

احفظ التغييرات

أضف الآن وحدة نصية إلى العمود الأيمن (الثلث) وقم بتحديث إعدادات وحدة النص على النحو التالي:

ضمن علامة تبويب المحتوى ، أضف html التالي إلى علامة تبويب النص في مربع المحتوى:

<h1>Get the Latest Reviews on Popular Products</h1>

<a class="join-cta" href="/reviews" target="_blank">Click to Join</a>

من المفترض أن يكون الرابط هنا بمثابة زر CTA وهمي. يمكنك اختيار استخدامه كما تريد. ما عليك سوى تحديث عنوان URL ونص الارتباط.

نصيحة : يمكنك استخدام Bloom لتشغيل مربع منبثق لاختيار البريد الإلكتروني عند النقر فوق CTA. بهذه الطريقة سيتمكن الزوار من مواكبة المنتجات مع حملة التسويق عبر البريد الإلكتروني. للقيام بذلك ، ستحتاج إلى تثبيت Bloom وإضافة نموذج منبثق ودمج مزود البريد الإلكتروني الخاص بك. ثم اختر عرض النافذة المنبثقة عند النقر فوق محدد CSS "a.join-cta" الذي يتوافق مع فئة الارتباط في كود html أعلاه.

يمكنك أيضًا قراءة المزيد حول كيفية إنشاء نافذة منبثقة لنموذج bloom optin عند النقر فوق الزر.

عد الآن إلى إعدادات وحدة النص.

تحت علامة تبويب التصميم ...

حجم خط النص: 40 بكسل (سطح المكتب) ، 24 بكسل (الجهاز اللوحي والهاتف الذكي)
حجم خط الرأس: 42 بكسل (سطح المكتب) ، 38 بكسل (الجهاز اللوحي) ، 28 بكسل (الهاتف الذكي)
الحشو المخصص: 40 بكسل (أعلى) ، 15 بكسل (يمين) ، 15 بكسل (أسفل) ، 15 بكسل (يسار)

احفظ التغييرات

انتقل الآن إلى إعدادات الصف حتى نتمكن من تصميم خلفية الصف.

ثم قم بتحديث ما يلي:

تحت علامة تبويب المحتوى ...

الخلفية: #ffffff

تحت علامة تبويب التصميم ...

اجعل هذا الصف بعرض كامل: نعم
معادلة ارتفاعات العمود: نعم

ضمن علامة التبويب خيارات متقدمة ، أضف CSS المخصص التالي إلى مربع إدخال العنصر الرئيسي:

border-top: 10px solid #121212;
border-radius: 3px;
-webkit-box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
-moz-box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);

احفظ التغييرات

تحقق من قسم شريط التمرير المميز المخصص الآن.

تبدو جيدة حتى الآن.

لنكمل. ارجع إلى منشئ الفئات وأضف قسمًا قياسيًا أسفل القسم الحالي وأضف صفًا مكونًا من عمود واحد مع وحدة نصية.

ثم قم بتحديث إعدادات Text Module كما يلي:

ضمن علامة تبويب المحتوى ، أضف عنوان html هذا في علامة تبويب النص في مربع المحتوى:

<h1 class="subtitle fancy"><span>Product Reviews</span></h1>

تحت علامة تبويب التصميم ...

اتجاه النص: الوسط
خط الرأس: B (غامق)
حجم خط الرأس: 48 بكسل (سطح المكتب) ، 42 بكسل (الجهاز اللوحي) ، 36 بكسل (الهاتف الذكي)

احفظ التغييرات

سيكون هذا بمثابة عنوان القسم أدناه الذي سيعرض مراجعات منتجك.

بعد ذلك ، أضف قسمًا خاصًا بهيكل العمود الرابع من ثلاثة أرباع التالي:

في القسم الأيسر (ثلاثة أرباع) ، أضف صفًا من عمودين.

في العمود الأيمن من هذا الصف ، أضف وحدة المشاركات

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

ثم قم بتحديث ما يلي:

إظهار المؤلف: NO
تاريخ العرض: NO

احفظ التغييرات

قم بتكرار وحدة المنشورات هذه بحيث يكون لديك وحدتا مشاركات مكدسة في العمود الأيسر و 2 على اليمين.

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

إذا كنت تريد إضافة وحدة منشورات تعرض مراجعات الفيديو ، فيمكنك إضافتها هنا. ستحتاج أولاً إلى إضافة فئة منشور جديدة تسمى Video ، قم بتعيين الفئة باللون # 222222. ثم أنشئ منشورًا جديدًا ، وحدد "فيديو" للتنسيق وأضف عنوان URL للفيديو إلى مربع خيارات تنسيق الفيديو المدمج في Extra.

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

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

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

بالنسبة للأول ، قم بتحديث إعدادات وحدة المشاركات لتشمل "كل" الفئات. ثم حدد طريقة الفرز "الأعلى تقييماً".

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

انطلق وقم بتحديث المنشور لحفظ إعداداتك. هذا هو الشكل الذي يجب أن يبدو عليه التخطيط حتى الآن.

بعد ذلك ، قم بتكرار (أو نسخ) القسم الرئيسي الثاني الذي يحتوي على وحدة النص بعنوان "مراجعات المنتج".

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

<h2 class="subtitle fancy"><span>Latest Reviews</span></h2>

احفظ التغييرات

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

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

احفظ التغييرات

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

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

الآن دعنا نرى كيف يبدو الشكل النهائي.

إضافة عدد قليل من سطور CSS المخصصة

لتجميع التصميم معًا ، نحتاج إلى إضافة بضعة أسطر من Custom CSS. انتقل إلى Theme Customizer> CSS الإضافي وأضف ما يلي في الجزء العلوي من كود CSS الحالي الموجود بالفعل:

.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
border-top: 10px solid;
}

بعد ذلك ، داخل أقواس الاستعلام عن الوسائط المعينة على الحد الأدنى للعرض 980 بكسل ، أضف ما يلي:

.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}

يضيف مقتطف CSS الأول ظلًا أغمق قليلاً وحدًا علويًا أعلى للوحدات النمطية. والثاني يخصص زر "الانضمام الآن" في القسم العلوي.

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

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

بناء تخطيط "جميع الفئات"

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

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

<h1 class="subtitle fancy"><span>All Categories</span></h1>

احفظ التغييرات

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

احفظ التغييرات

ثم أضف وحدة نصية ضمن مكتبة منشورات فئة الملابس. في إعدادات وحدة النص ، أضف الارتباط التالي إلى مربع المحتوى ضمن علامة التبويب المحتوى:

<a href="/category/clothing">view all clothing reviews</a>

قد يلزم تغيير عنوان URL و / أو نص الرابط وفقًا لموقعك ، ولكن الفكرة هي الارتباط بصفحة الفئة لتلك الفئة المعينة من أجل إظهار جميع تقييمات المنتج لتلك الفئة.

تحت علامة تبويب التصميم ، قم بتغيير اتجاه النص إلى "اليمين".

احفظ التغييرات

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

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

يجب أن يبدو التصميم النهائي هكذا عند الانتهاء.

وإليك ما يبدو عليه تخطيط الفئة على الموقع.

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

هذا كل شيء في منشور اليوم. أتمنى أن تكون قد استمتعت بالجزء 3 من هذه السلسلة المكونة من 4 أجزاء حول إنشاء موقع لمراجعة المنتج باستخدام Extra.

أتمنى ألا تتعب بعد ، فلدينا مشاركة أخيرة في سلسلتنا.

قادم

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

إنني أتطلع إلى بناء الجزء الأخير من موقعنا الإلكتروني معًا.

كما هو الحال دائمًا ، لا تتردد في تقديم التعليقات أدناه.