كيفية تصميم مراجعات كتاب ملفتة للنظر لصفحة Divi Ebook الخاصة بك

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

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

دعنا نذهب اليها!

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل مخطط قسم مراجعات الكتب مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لنبدأ في إعادة التكوين!

قم بتحميل تخطيط الصفحة المقصودة لحزمة تخطيط الكتاب الإلكتروني إلى صفحة جديدة

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

إضافة قسم جديد

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

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

العمود 1 خلفية متدرجة

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

• اللون 1: #ffffff
• اللون 2: # f4f4f4
• موضع البداية للعمود 1: 12٪
• موضع نهاية العمود 1: 12٪

لون خلفية العمود 2

أضف لون خلفية مخصصًا إلى العمود الثاني أيضًا.

• لون خلفية العمود 2: # 9400ff

تحجيم

انتقل إلى علامة تبويب التصميم وقم بإزالة كل المساحة المخصصة بين الأعمدة باستخدام الإعدادات التالية:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

نقوم أيضًا بتعديل إعدادات تباعد الصفوف.

• الهامش الأعلى: 100 بكسل
• الهامش السفلي: 100 بكسل
• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف وحدة الصورة النمطية إلى العمود 1

تحميل صورة 1: 1

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

محاذاة الصورة

حدد محاذاة الصورة اليسرى في علامة تبويب التصميم.

• محاذاة الصورة: يسار

تحجيم

نقوم أيضًا بتغيير عرض هذه الوحدة عبر أحجام الشاشات المختلفة.

• العرض: 20٪ (كمبيوتر مكتبي وتابلت) ، 30٪ (هاتف)

تباعد

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

• الهامش الأيسر: -30 بكسل

الحدود

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

أضف وحدة النص رقم 1 إلى العمود 1

أضف Star Symbols إلى Content Box

ننتقل إلى الوحدة التالية ، وهي وحدة نص التصنيف. لعرض تقييمات النجوم ، سنستخدم الرموز. تابع وانسخ الرموز التالية والصقها في مربع المحتوى الخاص بوحدة نصية جديدة: ★★★★ ✰.

لون الخلفية

قم بتغيير خلفية الوحدة التالية.

• لون الخلفية: # 9400ff

إعدادات النص

انتقل إلى علامة تبويب التصميم وقم بتعديل إعدادات النص أيضًا.

• خط النص: مونتسيرات
• وزن خط النص: ثقيل
• حجم النص: 45 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)
• ارتفاع خط النص: 1em
• محاذاة النص: الوسط

تحجيم

تابع عن طريق تغيير عرض الوحدة.

• العرض: 35٪

تباعد

وإضافة بعض التباعد المخصص.

• الهامش الأيسر: 50 بكسل
• الهامش الأيمن: 50 بكسل
• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل

مربع الظل

لتمييز مربع التصنيف ، سنضيف ظل مربع دقيقًا.

• مربع قوة طمس الظل: 50 بكسل
• لون الظل: rgba (0،0،0،0.3)

تحويل الترجمة

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

• إلى اليمين: 360 بكسل (سطح المكتب) ، -84 بكسل (جهاز لوحي) ، -70 بكسل (هاتف)
• الجزء السفلي ،: -113 بكسل (سطح المكتب) ، 190 بكسل (جهاز لوحي) ، 141 بكسل (هاتف)

أضف وحدة النص رقم 2 إلى العمود 1

إضافة محتوى

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

إعدادات النص

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات النص وفقًا لذلك:

• خط النص: مونتسيرات
• حجم النص: 18 بكسل

إعدادات نص الارتباط

تغيير لون نص الارتباط أيضا.

• لون نص الرابط: # 9400ff

تباعد

بعد ذلك ، انتقل إلى إعدادات التباعد وقم بتغيير موضع العنصر باستخدام قيم الهامش المخصصة.

• الهامش العلوي: -100 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• الهامش الأيسر: 200 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 20 بكسل (هاتف)
• الهامش الأيمن: 50 بكسل (جهاز لوحي) ، 20 بكسل (هاتف)

أضف وحدة النص رقم 3 إلى العمود 1

أضف محتوى H3

إلى الوحدة التالية ، وهي وحدة نصية تحتوي على عنوان مراجعة H3.

إعدادات نص H3

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات نص H3.

• خط العنوان 3: مونتسيرات
• وزن خط العنوان 3: غامق
• لون نص العنوان 3: # 000000

تباعد

أضف بعض الهامش المخصص أيضًا.

• الهامش العلوي: 80 بكسل (سطح المكتب) ، 50 بكسل (الجهاز اللوحي والهاتف)
• الهامش الأيسر: 50 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 20 بكسل (الهاتف)
• الهامش الأيمن: 50 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 20 بكسل (الهاتف)

أضف وحدة النص رقم 4 إلى العمود 1

إضافة محتوى

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

تباعد

انتقل إلى إعدادات التباعد في هذه الوحدة وقم بتطبيق الإعدادات التالية:

• الهامش العلوي: 20 بكسل
• الهامش السفلي: 50 بكسل
• الهامش الأيسر: 50 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 20 بكسل (الهاتف)
• الهامش الأيمن: 50 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 20 بكسل (الهاتف)

أضف وحدة الصورة النمطية إلى العمود 2

تحميل صورة غلاف الكتاب

في العمود الثاني ، سنحتاج إلى وحدتين ، بدءًا من وحدة الصورة التي تحمل غلاف الكتاب. في هذا البرنامج التعليمي ، نستخدم أغلفة الكتب التي تأتي مع حزمة Divi's Ebook Layout Pack ، ولكن يمكنك إضافة غلاف الكتاب الخاص بك بدلاً من ذلك.

تحجيم

انتقل إلى علامة تبويب التصميم في وحدة الصورة وقم بتغيير العرض.

• العرض: 79٪ (سطح المكتب) ، 40٪ (الجهاز اللوحي والهاتف)

تباعد

قم بتعديل إعدادات التباعد أيضًا.

• الهامش العلوي: 60 بكسل
• الهامش السفلي: 60 بكسل

مربع الظل

وإضافة ظل مربع للتأكيد على غلاف الكتاب.

• مربع الظل الرأسي: 40 بكسل
• مربع قوة طمس الظل: 80 بكسل
• قوة انتشار الظل المربع: -20 بكسل
• لون الظل: rgba (0،0،0،0.8)

أضف وحدة الزر إلى العمود 2

أضف نسخة

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

محاذاة الزر

انتقل إلى علامة تبويب التصميم وقم بتغيير محاذاة الزر.

• محاذاة الزر: الوسط

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 16 بكسل
• لون نص الزر: #ffffff
• لون خلفية الزر: # 000000
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل
• زر الخط: مونتسيرات
• وزن خط الزر: غامق

تباعد

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

• الحشوة العلوية: 16 بكسل
• الحشو السفلي: 16 بكسل
• الحشوة اليسرى: 38 بكسل
• الحشوة اليمنى: 38 بكسل

استنساخ صف حتى عدة مرات كما هو مطلوب

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

تحميل صورة مختلفة

تغيير صورة المراجع.

تغيير غلاف الكتاب

مع غلاف الكتاب ، إذا لزم الأمر.

تغيير النسخ

وتعديل جميع النسخ كذلك.

البحث عن واستبدال لون الخلفية للعمود 2 في الصف

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

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

• ضمن: هذا الصف
• استبدل بـ: # 31d190

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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