قم بتنزيل تخطيط الصفحة المقصودة Divi لمعاينة الكتاب مجانًا بما في ذلك روابط المرساة و CTAs

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

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل تخطيط الصفحة المقصودة لمعاينة الكتاب مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

اضف سطر

هيكل العمود

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

لون الخلفية

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وأضف لون خلفية أبيض.

• لون الخلفية: #ffffff

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

أضف خلفية متدرجة إلى العمود الثالث أيضًا.

• اللون 1: # 6a30ff
• اللون 2: # a202ff
• العمود 3 نوع التدرج: خطي
• العمود 3 اتجاه التدرج: 166 درجة

تحجيم

بعد ذلك ، انتقل إلى إعدادات التحجيم واسمح للصف باحتلال عرض الشاشة بالكامل عن طريق إضافة إعدادات التحجيم التالية:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

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

• الحشوة العلوية: 0vw
• الحشو السفلي: 0vw
• الحشوة العلوية للعمود 1: 15vw (سطح المكتب) ، 10vw (الكمبيوتر اللوحي والهاتف)
• الحشوة السفلية للعمود 2: 15vw (سطح المكتب) ، 10vw (الكمبيوتر اللوحي والهاتف)
• العمود 1 الحشوة اليسرى: 7vw

العمود 2 CSS ID

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

• معرّف CSS للعمود 2: شريط تمرير النمط

العمود 2 العنصر الرئيسي

الشيء التالي الذي سنفعله هو السماح للعمود بالتمرير عن طريق إضافة الأسطر التالية من كود CSS إلى العنصر الرئيسي في العمود 2:

overflow-y: scroll;
height: 57.87vw;
scroll-behavior: smooth;

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: لاتو
• اللون: # 666666
• حجم النص: 1.6vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 4vw (هاتف)
• ارتفاع خط النص: 2vw

أضف وحدة Divider Module إلى العمود 1

الرؤية

الوحدة التالية التي سنضيفها هي وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

اللون

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

• اللون: # 5802ed

تحجيم

العب مع قيم التحجيم أيضًا.

• وزن الحاجز: 4 بكسل
• العرض: 3vw (Desktop) ، 6vw (Tablet) ، 9vw (Phone)
• الارتفاع: 0 بكسل

تباعد

وأضف بعض الحشو العلوي والسفلي المخصص لإنشاء مساحة.

• الهامش العلوي: 1vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 4vw (هاتف)
• الهامش السفلي: 7vw

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

إضافة محتوى

إلى الوحدة الثالثة ، وهي وحدة نصية أخرى. هنا ، قمنا بإضافة رمز (►) متبوعًا بعنوان الفصل الأول إلى مربع المحتوى.

إضافة رابط

نحن نربط هذه الوحدة بأكملها بمعرف الارتساء الذي سنضيفه لاحقًا في هذا المنشور.

• عنوان URL لرابط الوحدة النمطية: https://yourwebsite.com/pagetitle/#chapter-1

إعدادات النص

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

• خط النص: لاتو
• وزن خط النص: خفيف
• لون النص: # 666666
• حجم النص: 1.3vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3.3vw (هاتف)

تباعد

أضف بعض المساحة المتروكة العلوية والسفلية المخصصة أيضًا.

• الحشوة العلوية: 1vw
• الحشو السفلي: 1vw

استنساخ وحدة النص # 2 مرتين

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

تغيير المحتوى

قم بتعديل محتوى كل نسخة من التكرارات.

تغيير الروابط

جنبًا إلى جنب مع معرف الارتساء في نهاية عنوان URL لرابط الوحدة النمطية. في هذه الحالة ، يعني ذلك إضافة "# Chapter-2" إلى النسخة الأولى و "# Chapter-3" إلى النسخة الثانية.

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

إضافة محتوى

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

لون الخلفية

بعد ذلك ، انتقل إلى إعدادات الخلفية وأضف لونًا للخلفية البيضاء.

• لون الخلفية: #ffffff

إعدادات النص

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

• خط النص: لاتو
• حجم النص: 0.8vw (سطح المكتب) ، 1.6vw (جهاز لوحي) ، 2.1vw (هاتف)
• ارتفاع خط النص: 1.7vw (سطح المكتب) ، 3.3vw (الكمبيوتر اللوحي) ، 3.8vw (الهاتف)

إعدادات نص H2

العب مع إعدادات نص H2 أيضًا.

• خط العنوان 2: Lato
• وزن خط العنوان 2: ثقيل
• لون نص العنوان 2: # 5802ed
• حجم نص العنوان 2: 2vw (سطح المكتب) ، 2.5vw (جهاز لوحي) ، 2.9vw (هاتف)
• ارتفاع خط العنوان 2: 2.3vw

تباعد

تابع بالانتقال إلى إعدادات التباعد وإضافة الهوامش المخصصة التالية وقيم الحشو:

• الهامش العلوي: 2vw (سطح المكتب) ، 7vw (جهاز لوحي) ، 10vw (هاتف)
• الهامش السفلي: 2vw (سطح المكتب) ، 7vw (كمبيوتر لوحي) ، 10vw (هاتف)
• الهامش الأيسر: 5vw
• الهامش الأيمن: 5vw
• الحشوة العلوية: 6vw
• الحشو السفلي: 6vw
• الحشوة اليسرى: 6vw
• الحشوة اليمنى: 6vw

مربع الظل

قم بتشكيل وحدة النص عن طريق إضافة ظل مربع دقيق.

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

معرف CSS

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

• معرف CSS: الفصل الأول

استنساخ وحدة النص مرتين

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

تغيير المحتوى

قم بتغيير محتوى كل وحدة نصية مكررة.

تغيير معرفات CSS

جنبًا إلى جنب مع معرفات CSS.

• معرف CSS: الفصل 2
• معرف CSS: الفصل 3

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: لاتو
• وزن خط النص: ثقيل
• لون النص: #ffffff
• حجم النص: 2vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 4vw (هاتف)
• ارتفاع خط النص: 2vw
• اتجاه النص: الوسط

تباعد

أضف بعض الحشو الأيمن والأيسر المخصص بعد ذلك.

• اليسار: 2vw
• يمين: 2vw

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

أضف نسخة

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

انتقام

قم بتغيير محاذاة الزر بعد ذلك.

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

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1vw (سطح المكتب) ، 1.5vw (الجهاز اللوحي) ، 2.4vw (الهاتف)
• لون نص الزر: # 5802ed
• لون خلفية الزر: #ffffff
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 10vw
• تباعد حرف الزر: 0 بكسل
• وزن الخط: عريض للغاية
• نمط الخط: أحرف كبيرة

تباعد

وأضف بعض قيم الهوامش والحشو المخصصة لنمط الوحدة ووضعها.

• الهامش العلوي: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 5vw (هاتف)
• الحشوة العلوية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشوة السفلية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشو الأيسر: 3vw (سطح المكتب) ، 7vw (كمبيوتر لوحي) ، 9vw (هاتف)
• الحشو الأيمن: 3vw (سطح المكتب) ، 7vw (كمبيوتر لوحي) ، 9vw (هاتف)

نمط شريط التمرير

افتح إعدادات الصفحة

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

أضف كود CSS

بعد ذلك ، انتقل إلى علامة التبويب "خيارات متقدمة" وأضف بعض CSS المخصص إلى مربع CSS المخصص وبذلك تكون قد انتهيت!

#style-scrollbar::-webkit-scrollbar {
width: 1.1vw;
}
#style-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
#style-scrollbar::-webkit-scrollbar-thumb {
background: #333333;
}

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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