كيفية إنشاء صفحة قائمة هدايا لحفل الزفاف الخاص بك مع Divi

هذا المنشور هو جزء 3 من 5 في مسلسلاتنا القصيرة كيفية إنشاء موقع زفاف أنيق مع Divi. في هذه السلسلة ، سنوجهك عبر أهم أجزاء إنشاء موقع زفاف لنفسك أو لعميل مع Divi.

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

سنوضح لك خطوة بخطوة كيف يمكنك إنشاء التخطيط التالي باستخدام Visual Builder of Divi:

يحتوي التصميم على خمسة أقسام ويساهم كل منها بقيمته الخاصة في الكل. دعونا نتعمق في أول واحد!

قسم البطل

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

البدء

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

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

تابع عن طريق إضافة صف كامل العرض إلى القسم. افتح إعدادات الصف وقم بتغيير لون الخلفية إلى "rgba (122،122،122،0.56)" ضمن فئة الخلفية الفرعية لعلامة التبويب "المحتوى".

للمضي قدمًا ، انتقل إلى علامة التبويب "تصميم". افتح فئة التحجيم الفرعية ، واجعل الصف كامل العرض وأدخل "1" لعرض المزراب.

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

في نفس الفئة الفرعية ، أضف "-50 بكسل" إلى الهامش العلوي والسفلي للأجهزة اللوحية والهواتف.

أول وحدة نصية

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

• اتجاه النص: الوسط
• خط النص: اليوسفي
• حجم خط النص: 100 (سطح المكتب والجهاز اللوحي) ، 68 (هاتف)
• لون النص: # fffaf6
• ارتفاع خط النص: 1.5em

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

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

• اتجاه النص: الوسط
• خط النص: Raleway Light
• نمط خط النص: غامق
• حجم خط النص: 20 بكسل (سطح المكتب) ، 14 بكسل (الجهاز اللوحي والهاتف)
• لون النص: # fffaf6
• ارتفاع خط النص: 1.5em

يجب أن يبدو رأسك هكذا حتى الآن:

قسم المقدمة

في هذا التصميم ، نريد أن نمنح الأشخاص خيارًا. يمكنهم اختيار ما إذا كانوا يريدون شراء شيء للعروس أو العريس أو لكليهما.

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

عنوان القسم

في هذا الصف. الشيء الوحيد الذي سيتعين علينا إضافته هو وحدة نصية. اكتب العنوان الذي تريده أن يظهر في فئة النص الفرعية بعلامة التبويب "المحتوى". انتقل إلى علامة التبويب التصميم وقم بإجراء التغييرات التالية على فئة النص الفرعية:

• اتجاه النص: الوسط
• خط النص: اليوسفي
• نمط خط النص: غامق
• حجم خط النص: 60 بكسل (سطح المكتب) ، 50 بكسل (الجهاز اللوحي والهاتف)
• لون النص: # 9b857b
• ارتفاع خط النص: 1.7em

الآن ، افتح فئة Sizing الفرعية وقم بتغيير Max Width إلى '500px'.

استمر بفتح فئة التباعد الفرعية في نفس علامة التبويب وأضف "3٪" إلى الحشوة العلوية والسفلية.

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

background: #fae4de;
-webkit-clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
border-top: 1px solid #9b857b;
border-bottom: 1px solid #9b857b;

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

وحدة الصورة

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

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

height: 100px;
width: 150px;

أول وحدة نصية

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

• اتجاه النص: الوسط
• خط النص: Raleway Light
• حجم خط النص: 24 بكسل
• لون النص: # 9b857b
• ارتفاع خط النص: 1.5em

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

أخيرًا وليس آخرًا ، انتقل إلى علامة التبويب خيارات متقدمة في وحدة النص نفسها وأضف الكود التالي إلى العنصر الرئيسي ضمن فئة CSS الفرعية المخصصة:

font-weight:400;

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

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

• اتجاه النص: الوسط
• خط النص: Raleway Light
• نمط خط النص: غامق
• حجم خط النص: 16 بكسل
• لون النص: # 9b857b
• ارتفاع خط النص: 1.5em

قم بالتمرير لأسفل في نفس علامة التبويب وقم بتغيير الحد الأقصى للعرض إلى "300 بكسل" ضمن فئة التحجيم الفرعية. قم بتغيير الهامش العلوي إلى "5٪" في فئة التباعد الفرعية أيضًا.

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

font-weight: 300;

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

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

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

بعد ذلك ، انتقل إلى علامة تبويب التصميم في الصف وأضف "5٪" إلى الهامش السفلي ضمن فئة التباعد الفرعية.

وحدة صورة العروس

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

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

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

height: 200px;
width: 200px;
-webkit-clip-path: circle(48.2% at 50% 50%);
clip-path: circle(48.2% at 50% 50%);

أخيرًا ، قم بتعطيل وحدة الصورة على الهواتف والأجهزة اللوحية.

وحدة صورة العريس

استنساخ وحدة الصورة السابقة وضعها في نفس العمود مثل العمود السابق. قم بتغيير الصورة التي تم تحميلها وانتقل إلى علامة التبويب التصميم. افتح فئة المحاذاة الفرعية وقم بتغيير محاذاة الصورة إلى "اليمين".

علاوة على ذلك ، اضبط الهامش العلوي على "-60٪" ضمن فئة التباعد الفرعية.

يمكننا الآن الانتقال إلى قسم قائمة الهدايا في التخطيط. يجب أن يبدو تخطيطك هكذا حتى الآن:

قائمة الرغبات / قائمة الهدايا

أضف قسمًا قياسيًا جديدًا وقم بتغيير لون الخلفية إلى "# fae4de" في فئة الخلفية الفرعية لعلامة التبويب "المحتوى".

وحدة النص: العنوان

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

قائمة الهدايا / قائمة الأمنيات: استخدام وحدة Slider Module

أضف صفًا جديدًا يحتوي على 3 أعمدة إلى القسم وقم بتغيير العرض المخصص "65٪" ضمن فئة التحجيم الفرعية لعلامة التبويب "تصميم". تابع عن طريق إضافة وحدة نصية إلى الصف الأول وقم بإجراء التعديلات التالية على الفئة الفرعية للنص في علامة التبويب تصميم:

• اتجاه النص: الوسط
• خط النص: Raleway Light
• نمط خط النص: غامق
• حجم خط النص: 24 بكسل
• لون النص: # 9b857b
• ارتفاع خط النص: 1.5em

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

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

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

border: 2px solid #FFFFFF;
border-radius: 15px;
margin-left: 20px;

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

تابع بإضافة صف جديد ، ولكن الآن بعمودين فقط.

غيّر العرض المخصص إلى "55٪" ضمن فئة التحجيم الفرعية لعلامة التبويب "تصميم" وقم بتغيير الهامش السفلي إلى "5٪" ضمن فئة التباعد الفرعية.

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

يجب أن يبدو تخطيطك هكذا الآن:

نموذج الاتصال (سطح المكتب)

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

أنشئ قسمًا قياسيًا جديدًا وقم بتغيير لون الخلفية إلى # fffaf6 في فئة الخلفية الفرعية في علامة التبويب المحتوى.

السطر الاول

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

الصف الثاني

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

نص حقل النموذج:

• خط حقل النموذج: Raleway Light
• حجم خط حقل النموذج: 18 بكسل
• لون نص حقل النموذج: # 9b857b
• ارتفاع خط حقل النموذج: 1.7em

الحدود:

• نصف قطر حدود الإدخال: 15
• استخدام الحدود: نعم
• لون الحدود: # d7dce1
• عرض الحدود: 1 بكسل
• نمط الحدود: صلب

زر:

• حجم نص الزر: 15
• حجم نص الزر: 15
• لون نص الزر: # fffaf6
• لون خلفية الزر: # 9b857b
• عرض حد الزر: 9
• لون حدود الزر: # 9b857b
• نصف قطر حد الزر: 4

في علامة التبويب "المحتوى" في وحدة نموذج الاتصال ، يمكنك الآن إضافة ثلاثة حقول ؛ الاسم والبريد الإلكتروني والرسالة.

قم يدويًا بتغيير لون الخلفية لكل حقل إلى # fae4de.

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

• اتجاه النص: الوسط
• خط النص: Raleway Light
• نمط الخط Tet: غامق
• حجم خط النص: 16
• لون النص: # 9b857b
• ارتفاع خط الرسالة: 1.5em

قم بالتمرير لأسفل نفس علامة التبويب وأضف "300 بكسل" إلى العرض الأقصى ضمن فئة التحجيم الفرعية.

أخيرًا ، اكتب "5 بكسل" في الهامش العلوي ضمن فئة التباعد الفرعية.

نموذج الاتصال (الجهاز اللوحي والهاتف)

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

يجب أن يبدو تخطيطك الآن وأخيرًا كما يلي:

القادم

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

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