سأعرض لكم اليوم كيفية تصميم مراجعات كتب جذابة باستخدام Divi's Ebook Layout Pack وخيارات Divi المضمنة فقط. إنها طريقة رائعة لإضافة دليل اجتماعي إلى صفحات الهبوط الخاصة بك وزيادة المصداقية ومشاركة مراجعات المستخدمين القصيرة بطريقة أنيقة.
لنبدأ التصميم
تحميل تخطيط الصفحة المقصودة حزمة الكتاب الإلكتروني
أول شيء عليك فعله هو إنشاء صفحة جديدة باستخدام تخطيط الصفحة المقصودة لحزمة تخطيط الكتاب الإلكتروني التي ستجدها في التخطيطات المعدة مسبقًا.
إضافة قسم جديد
قم بالتمرير لأسفل في التخطيط وإضافة قسم جديد حيث تريد عرض مراجعات الكتاب.
أضف سطرًا جديدًا
هيكل العمود
متابعة إضافة صف جديد باستخدام بنية الأعمدة التالية:
1 عمود التدرج الخلفية
بدون إضافة المزيد من الوحدات النمطية ، افتح إعدادات الخط وقم بإضافة خلفية متدرجة إلى العمود الأول.
- لون 1: #ffffff
- لون 2: #f4f4f4
- عمود 1 موضع البداية: 12٪
- العمود 1 الوضع النهائي: 12٪
العمود 2 لون الخلفية
أضف أيضًا لون خلفية مخصصًا إلى العمود الثاني.
- لون خلفية عمود 2: #9400ff
التحجيم
قم بالتبديل إلى علامة التبويب "تصميم" وقم بإزالة كل المساحة المخصصة بين الأعمدة باستخدام الإعدادات التالية:
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 1
مباعدة
نقوم أيضًا بتغيير إعدادات تباعد الأسطر.
- الهامش العلوي: 100px
- الهامش السفلي: 100px
- أعلى الحشو: 0px
- الحشو السفلي: 0px
أضف وحدة صورة إلى العمود 1
قم بتحميل 1: صورة 1
بمجرد أن تكون إعدادات الصف في مكانها الصحيح ، يمكنك البدء في إضافة الوحدات النمطية المختلفة ، بدءًا من وحدة الصورة في العمود الأول. قم بتحميل صورة من اختيارك ولكن تأكد من أن نسبة العرض إلى الارتفاع هي 1: 1. وهذا يعني أن الارتفاع والعرض يجب أن يكونا بنفس القيمة.
محاذاة صورة
حدد محاذاة الصورة اليسرى في علامة التبويب تصميم.
- محاذاة الصورة: يسار
التحجيم
نقوم أيضًا بتغيير عرض هذه الوحدة لأحجام مختلفة للشاشة.
- العرض: 20٪ (سطح المكتب والكمبيوتر اللوحي) ، 30٪ (هاتف)
مباعدة
للسماح بالتداخل على الجانب الأيسر من السطر ، نضيف قيمة الهامش الأيسر السلبية في إعدادات التباعد في وحدة الصورة.
- الهامش الأيسر: -30px
الحدود
لإكمال تصميم الصورة ، نضيف أيضًا "50vw" إلى كل ركن من الزوايا في إعدادات الحدود. سيضمن هذا أن الصورة تحافظ على شكلها الدائري عبر أحجام الشاشة المختلفة.
إضافة الوحدة النمطية للنص # 1 إلى العمود 1
أضف رموز النجوم إلى منطقة المحتوى
لننتقل إلى الوحدة التالية، وحدة نص التقييم. لتمييز التقييم النجمي، سنستخدم الرموز. انسخ الرموز التالية وألصقها في مساحة المحتوى بوحدة نصية جديدة: ★★★★.
لون الخلفية
تغيير الجزء السفلي من الوحدة النمطية ثم.
- لون الخلفية: # 9400ff
إعدادات النص
قم بالتبديل إلى علامة التبويب "تصميم" وقم بتغيير إعدادات النص أيضًا.
- نص الخط: مونتسيرات
- وزن الخط للنص: ثقيل
- حجم النص: 45px (سطح المكتب) ، 30px (الكمبيوتر اللوحي) ، 25px (الهاتف)
- ارتفاع سطر النص: 1em
- محاذاة النص: المركز
التحجيم
تابع عن طريق تغيير عرض الوحدة.
- العرض: 35٪
مباعدة
وإضافة تباعد مخصص.
- الهامش الأيسر: 50px
- الهامش الأيمن: 50px
- أعلى الحشو: 20px
- الحشو السفلي: 20px
صندوق الظل
لإبراز مربع التصنيف ، سنضيف ظلًا دقيقًا.
- Box Shadow Blur Force: 50px
- لون الظل: rgba (0,0,0,0,3،XNUMX،XNUMX،XNUMX)
ترجمة المحول
أخيرًا ، سنقوم بتغيير موضع وحدة النص باستخدام قيم تحويل ترجمة مخصصة. يمكنك تأجيل هذه الخطوة حتى تقوم أيضًا بإضافة جميع الوحدات إلى العمود الخاص بك.
- اليمين: 360px (سطح المكتب) ، -84px (الكمبيوتر اللوحي) ، -70px (الهاتف)
- أسفل: -113px (سطح المكتب) ، 190px (الكمبيوتر اللوحي) ، 141px (الهاتف)
إضافة الوحدة النمطية للنص # 2 إلى العمود 1
إضافة محتوى
الوحدة التالية التي نحتاجها في العمود الأول هي وحدة نصية أخرى. أضف المحتوى الذي اخترته ورابطًا للمراجع والكتاب.
إعدادات النص
قم بالتبديل إلى علامة التبويب تصميم وقم بتغيير إعدادات النص وفقًا لذلك:
- نص الخط: مونتسيرات
- حجم النص: 18px
إعدادات ارتباط النص
تغيير لون نص الرابط أيضا.
- لون نص الرابط: #9400ff
مباعدة
ثم انتقل إلى إعدادات التباعد وقم بتغيير موضع العنصر باستخدام قيم الهامش المخصصة.
- الهامش العلوي: -100px (سطح المكتب) ، 0px (الجهاز اللوحي والهاتف)
- الهامش الأيسر: 200px (سطح المكتب) ، 50px (الكمبيوتر اللوحي) ، 20px (الهاتف)
- الهامش الأيمن: 50px (الكمبيوتر اللوحي) ، 20px (الهاتف)
إضافة الوحدة النمطية للنص # 3 إلى العمود 1
أضف محتوى H3
دعنا ننتقل إلى الوحدة النمطية التالية ، وهي وحدة نصية تحتوي على عنوان مراجعة H3.
إعدادات النص H3
انتقل إلى علامة التبويب "تصميم" وقم بتغيير إعدادات نص H3.
- العنوان 3 الخط: مونتسيرات
- العنوان 3 وزن الخط: غامق
- العنوان 3 لون النص: #000000
مباعدة
إضافة أيضا هامش مخصص.
- الهامش العلوي: 80px (سطح المكتب) ، 50px (الجهاز اللوحي والهاتف)
- الهامش الأيسر: 50px (سطح المكتب والكمبيوتر اللوحي) ، 20px (الهاتف)
- الهامش الأيمن: 50px (سطح المكتب والكمبيوتر اللوحي) ، 20px (الهاتف)
إضافة الوحدة النمطية للنص 4 إلى عمود 1
إضافة محتوى
دعنا ننتقل إلى الوحدة التالية والأخيرة التي نحتاجها في عمود 1 ، وهو وحدة نصية أخرى مع المراجعة الفعلية.
مباعدة
انتقل إلى إعدادات التباعد في هذه الوحدة وقم بتطبيق الإعدادات التالية:
- الهامش العلوي: 20px
- الهامش السفلي: 50px
- الهامش الأيسر: 50px (سطح المكتب والكمبيوتر اللوحي) ، 20px (الهاتف)
- الهامش الأيمن: 50px (سطح المكتب والكمبيوتر اللوحي) ، 20px (الهاتف)
أضف وحدة صورة إلى العمود 2
تغيير إعدادات CSS لعمود 2
سنستخدم الخصائص المرنة لمحاذاة الصورة في المركز:
عرض: المرن.
تنزيل صورة غلاف الكتاب
في العمود الثاني ، سنحتاج إلى وحدتين ، بدءًا من وحدة الصورة بغلاف الكتاب. في هذا البرنامج التعليمي ، نستخدم أغلفة الكتب المرفقة مع كتاب نظرة عامة على Divi ، ولكن يمكنك أيضًا إضافة غلاف الكتاب الخاص بك.
التحجيم
انتقل إلى علامة التبويب تصميم في وحدة الصورة وقم بتغيير العرض.
- العرض: 79٪ (سطح المكتب) ، 40٪ (الجهاز اللوحي والهاتف)
عنصر أساسي متقدم
سنحاول هنا محاذاة الصورة في المركز.
- محاذاة الذات: مركز.
استنساخ التصميم عدة مرات كما تريد
بمجرد إنشاء أول مراجعة للكتاب ، يمكنك استنساخ السطر بالكامل عدة مرات كما تريد ، اعتمادًا على عدد المراجعات التي تريد أن تراها على صفحتك المقصودة.
الأفكار النهائية
في هذا البرنامج التعليمي، شرحنا لك كيفية تصميم مراجعات كتب رائعة لصفحات إصداراتك الإلكترونية القادمة. يساعدك هذا على إضافة دليل اجتماعي إلى صفحتك وإقناع الزوار بمصداقية كتابك. إذا كانت لديك أي أسئلة أو اقتراحات، فلا تتردد في ترك تعليق في قسم التعليقات أدناه!