كيفية إنشاء قرص معاينة نص قابل للتمرير باستخدام Divi

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

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

• عند بيع كتاب
• عند مشاركة كتاب إلكتروني مجاني مع زوارك وترغب في تشجيعهم على تنزيل الإصدار الكامل (عن طريق الاشتراك)
• عند مشاركة دراسات الحالة أو الشهادات

لنوضح لك ما نعنيه بالضبط ، أنشأنا مثالًا سنوضح لك كيفية إعادة الإنشاء خطوة بخطوة:

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

كيفية إنشاء قرص معاينة نص قابل للتمرير باستخدام Divi

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

إنشاء وتعديل القسم

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

أضف صفحة جديدة

لإضافة صفحة جديدة ، انتقل إلى لوحة معلومات WordPress> الصفحات> إضافة جديد . بمجرد إضافة الصفحة الجديدة ، قم بتنشيط Divi Builder وانتقل إلى Visual Builder على الفور.

أضف مقطعًا بصف من عمودين

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

أضف خلفية التدرج

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

• # e02b20
• # f2f2f2

الإعدادات التي استخدمناها لخلفية التدرج هي كالتالي:

• نوع التدرج: خطي
• اتجاه التدرج: 143 درجة
• موقف البداية: 28٪
• موضع النهاية: 28٪

العمود الأول: أضف وحدة التعليمات البرمجية ولوح معاينة النص

بالنسبة للعمود الأول ، سنقوم بإضافة وحدة التعليمات البرمجية مع قرص معاينة النص. لإكمال قرص معاينة النص ، سنحتاج إلى القيام بثلاثة أشياء ؛ أضف وحدة التعليمات البرمجية ، وأضف أسطر تعليمات HTML البرمجية داخل Code Module وأضف أسطر تعليمات CSS البرمجية المطلوبة إلى الصفحة نفسها. يمكنك أيضًا إضافة خطوط التعليمات البرمجية لـ CSS إلى "خيارات السمة" أو "مُخصص السمة". ولكن نظرًا لأن هذا ليس ضروريًا في هذه الحالة ، فسنضيفه فقط إلى الصفحة التي أنشأناها.

أضف وحدة التعليمات البرمجية

ابدأ بإضافة وحدة Code Module إلى العمود الأول من الصف الذي قمت بإنشائه.

أضف كود HTML

بعد ذلك ، افتح وحدة الشفرة هذه وأضف الأسطر التالية داخل Content Box:

<div id="tab-container">
<div class="tablet">
<div class="tab">

<h1 class="title">Chapter 1</h1>

<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>

<h1 class="title">Chapter 2</h1>

<p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<footer>
 2017 *Author*
</footer>
</div>
</div>
</div>

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

أضف كود CSS المطلوب

بمجرد ضبط رمز HTML وفقًا لاحتياجاتك ، يمكنك إضافة كود CSS الذي يجعل جهازك اللوحي يبدو بالشكل الذي تريده. نظرًا لأننا سنحتاج فقط إلى هذا الجهاز اللوحي على الصفحة التي نقوم بإنشائها ؛ سنقوم بإضافة الكود إلى الصفحة مباشرة. داخل Visual Builder من صفحتك ، انقر على أيقونة الإعدادات:

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

*{ box-sizing: border-box; }

.tablet {
position: relative;
background: #1c1c1c;
width: 100%;
height: 600px;
max-width: 450px;
max-height: 600px;
margin: 0 auto 0;
padding: 30px 24px 30px 24px;
border-radius: 18px;
border-top:2px solid #3C3F45;
border-right:2px solid #202227;
border-bottom:2px solid #202227;
border-left:2px solid #3C3F45;
box-shadow:11px 11px 24px rgba(0,0,0,0.5);
}

@media only screen and (max-width:768px) {
height: 400px;
}

.tablet .tab {
background: #f9f9f9;
color: black;
padding: 50px 40px 50px 40px;
overflow: scroll;
height: 100%;
text-align: justify;
}

.tablet .tab h1 {
font-size: 30px;
font-family: "Dancing script";
font-weight: bold;
font-style: italic;
text-align: center;
margin: 0 0 20px 0;
padding: 4px;
font-size: 25px;
}

.tablet .tab p {
margin: 0 0 20px 0;
font-family: "Arial";
font-size: 13px;
}

footer {
background: black;
color: white;
margin-bottom: 8px;
}

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

• المظهر الخارجي للكمبيوتر اللوحي
• المظهر الداخلي للجهاز اللوحي
• العنوان
• الفقرات
• التذييل

يمكنك جعل الجهاز اللوحي مناسبًا لأي نوع من الصفحات التي تقوم بدمج الكمبيوتر اللوحي لمعاينة النص فيها.

العمود الثاني: إضافة وحدتين نصيتين و CTA

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

أول وحدة نصية

ابدأ بإضافة أول وحدة نصية إلى الصف الثاني. افتح الإعدادات واكتب عنوانًا في Content Box ضمن فئة النص الفرعية للمحتوى. علاوة على ذلك ، انتقل إلى علامة التبويب تصميم وقم بإجراء التغييرات التالية على فئة النص الفرعية:

• خط النص: السيناريو الراقص
• نمط خط النص: غامق ومائل
• حجم خط النص: 40 (سطح المكتب) ، 35 (كمبيوتر لوحي) ، 30 (هاتف)
• لون النص: # 1c1c1c
• ارتفاع خط النص: 1.7em

قم بالتمرير لأسفل في نفس علامة التبويب وإضافة "40٪" إلى الهامش العلوي.

وحدة النص الثانية

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

• خط النص: Arimo
• حجم خط النص: 14
• ارتفاع خط النص: 1.7em

وحدة الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• نص حجم الزر: 14 (سطح المكتب والجهاز اللوحي) ، 12 (هاتف)
• لون نص الزر: # f9f9f9
• لون خلفية الزر: # e02b20
• عرض حد الزر: 0
• نصف قطر حد الزر: 3
• خط الزر: Arimo

نصيحة: إذا كنت تروج لكتابك الإلكتروني من خلال معاينة النص ، فيمكنك أيضًا ربط المشغل في نموذج الاشتراك في Click Bloom كما هو موضح في المنشور التالي.

النتيجة

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

تغليف

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!