Divi: كيفية إنشاء جهاز لوحي بمحتوى دعابة قابل للتمرير

هل ترغب في إضافة محتوى دعابة إلى جهاز لوحي قابل للتمرير على Divi؟

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

في البرنامج التعليمي اليوم ، سنوضح لك كيفية عرض محتوى دعابة في جهاز لوحي منسدل في Divi. 

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

يمكنك استخدامه من أجل تعزيز تعرض الفصول الأولى من أي كتاب إلكتروني نماذج تصميمات من محفظتك أو أي نوع آخر من المحتوى.

دعونا نبدأ!

مسح

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

قم بإنشاء صفحة جديدة باستخدام Divi Builder

في لوحة معلومات WordPress ، انتقل إلى "صفحات> إضافة جديد"

أعط عنوانًا منطقيًا بالنسبة لك ، ثم انقر فوق "استخدم DiviBuilder"

ثم انقر فوق "بدء البناء"

تصميم الجهاز اللوحي مع محتوى دعابة قابل للتمرير في Divi

إنشاء حاوية الجهاز اللوحي المنسدلة بعمود Divi

أضف صف

للبدء ، قم بإنشاء صف من عمودين بقسم عادي.

إعدادات العمود 1

لون الخلفية

افتح إعدادات العمود 1 وأضف خلفية بيضاء إلى العمود.

• الخلفية: #ffffff

الحدود والهامش

انتقل إلى علامة التبويب تصميم خيار القائمة المنسدلة التباعد وقم بتغيير الإعدادات كما يلي:

• المساحة المتروكة (أعلى ، أسفل ، يسار ويمين): 25 بكسل (أعلى ، أسفل ، يسار ، يمين)

ثم اسحب الخيار الحدود وقم بتغيير الإعدادات وفقًا لذلك:

• الزوايا الدائرية: 20 بكسل
• عرض الحدود: 30 بكسل
• لون الحدود: # 000000

صندوق الظل

لإضفاء بعض العمق على تصميم الجهاز اللوحي ، اسحب الخيار لأسفل مربع الظل وأضف ظل الصندوق التالي:

• Box Shadow: انظر لقطة الشاشة
• مربع الظل (أفقي ورأسي) الوضع: 5 بكسل
• لون الظل: # 555555

ارتفاع وعرض العمود المخصصين باستخدام CSS

المفتاح لجعل محتوى العمود قابل للتمرير هو إعطائه ارتفاعًا محددًا. سيؤدي هذا إلى تجاوز المحتوى لارتفاع العمود. 

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

لمنح العمود ارتفاعًا وعرضًا مخصصين ، انتقل إلى علامة التبويب متقدم وتحديث ما يلي:

سو CSS مخصصة، أضف CSS التالي لشاشة سطح المكتب (العنصر الرئيسي):

height:650px;
max-width: 488px;

ثم قم بتنشيط علامة التبويب للعرض الآخر والصق CSS المخصص التالي لعرض الهاتف للعنصر الرئيسي:

max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;

الفائض العمودي: التمرير

كما ذكرنا سابقًا ، يحتوي العمود الآن على ارتفاع محدد سيؤدي حتمًا إلى تجاوز محتويات العمود رأسيًا.

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

• تجاوز عمودي: التمرير

أضف محتوى الجملة المحفزة إلى عمود القائمة المنسدلة

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

في هذا المثال ، نضيف محتوى كتاب إلكتروني وهمي يتكون من وحدة نمطية دعاية مغالى فيها (لعرض الدعوة الأولية للعمل) ، وحدة صورة (لعرض غلاف الكتاب) ووحدة نمطية نص (لعرض بعض فصول الكتاب الإلكتروني).

تمرير CTA (دعوة إلى العمل) مع خلفية غلاف الكتاب

أول عنصر محتوى تشويقي سنضيفه هو وحدة نمطية دعاية مغالى فيها والتي ستكون بمثابة دعوة للعمل "التمرير للمعاينة". 

سنستخدم رمز العرض التقديمي والعنوان والخلفية مع غلاف الكتاب كصورة الخلفية وتراكب التدرج اللوني.

في عمود الكمبيوتر اللوحي ، أضف وحدة نمطية دعاية مغالى فيها.

قم بتحديث المحتوى على النحو التالي:

• العنوان: قم بالتمرير لقراءة مقتطف

خيار القائمة المنسدلة "الصورة والرمز"

• استخدام الأيقونة: نعم
• الرمز: انظر لقطة الشاشة

ثم اسحب الخيار خلفيّة وإضافة تدرج

• لون الجانب الأيسر: rbga (0,0,0,0,0.0،XNUMX،XNUMX،XNUMX،XNUMX)
• لون الجانب الأيمن: #ffffff
• موقف البداية: 20٪
• المركز النهائي: 85٪
• مربع التدرج فوق صورة الخلفية: نعم

ثم أضف صورة غلاف الكتاب. للحصول على أفضل النتائج ، أضف صورة تقريبًا 600 × 850 بكسل .

في علامة التبويب "تصميم" ، قم بتحديث الأنماط التالية للرمز والعنوان:

• لون الأيقونة: # 000000
• حجم خط الرمز: 80 بكسل (سطح المكتب والجهاز اللوحي) ، 70 بكسل (الهاتف)

• خط العنوان: مونتسيرات
• محاذاة نص العنوان: توسيط
• لون النص: # 000000

ثم يمكننا نقل الرمز والعنوان لأسفل العمود عن طريق إضافة هامش علوي.

لتغيير حجم الدعاية المغلوطة ومساحتها ، قم بتحديث ما يلي:

•  ارتفاع: 100٪

• الهامش: 25 ​​بكسل (سفلي)
• المساحة المتروكة: 400 بكسل (سطح مكتب وجهاز لوحي) ، 270 بكسل (هاتف)

صورة غلاف الكتاب

سيكون الجزء التالي من محتوى الجملة المحفزة عبارة عن صورة لغلاف الكتاب. لإضافة صورة ، ما عليك سوى إضافة وحدة صورة أسفل الوحدة النمطية Blurb.

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

محتويات معاينة النص

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

ثم الصق كود HTML التالي في علامة تبويب النص الأساسي:

<h3>Chapitre 1</h3>
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.
 
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?
 
<h3>Chapitre 2</h3>
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?

ضمن علامة التبويب تصميم ، قم بتحديث نمط العنوان والتباعد كما يلي (العنوان 3):

• الخط: مونتسيرات
• وزن الخط: عريض للغاية
• محاذاة النص: توسيط
• ارتفاع الخط: 1,3 م

• الحشو: 10٪ (علوي وسفلي)

بعض اللمسات الأخيرة

تحديث معلمات الخط

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

• العرض: 100٪ (سطح المكتب) ، 90٪ (الجهاز اللوحي والهاتف)
• العرض الأقصى: 1 بكسل (سطح المكتب) ، 080 بكسل (الجهاز اللوحي والهاتف)

أضف محتوى إضافيًا إلى العمود 2

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

تحميل DIVI Now !!!

نتيجة نهائية

الآن دعونا نرى النتيجة النهائية.

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

وهذه هي الطريقة التي يتراكم بها التصميم على شاشة الجهاز اللوحي والهاتف.

وفي الختام

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

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

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

إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.

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

لكن في غضون ذلك, شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...