كيفية إنشاء الصفحة الرئيسية لإعلان الزفاف مع Divi

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

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

دعنا نلقي نظرة على تخطيط الصفحة الرئيسية الذي سنساعدك في بنائه خطوة بخطوة:

إنشاء قائمة التنقل الخاصة بك

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

لهذا السبب سيتعين عليك إنشاء قائمة تنقل مناسبة وأنيقة أولاً.

ابدأ بالانتقال إلى Divi> Theme Options> وقم بتحميل الشعار الذي ترغب في استخدامه في جميع أنحاء موقع الويب الخاص بك.

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

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

بعد ذلك ، انتقل إلى Header & Navigation> Primary Menu Bar وقم بإجراء التغييرات التالية:

• ارتفاع القائمة: 66
• اضبط الشعار الأقصى للارتفاع وفقًا لأبعاد الصورة
• حجم النص: 16
• تباعد الأحرف: 2
• الخط: Raleway Light
• نمط الخط: غامق
• لون النص: # 9b7461
• لون الخلفية: rgba (155،116،97،0.13)

الآن ، ارجع إلى Header & Navigation وقم بتغيير نمط الرأس إلى "توسيط" داخل تنسيق Header.

احفظ وانشر التغييرات التي أجريتها.

ابدأ في صفحة الإعلان

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

قسم البطل (بما في ذلك العد التنازلي)

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

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

ابدأ مع الوحدة النمطية الأولى للنص

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

• حجم خط النص: 100 بكسل (سطح المكتب) ، 80 بكسل (الجهاز اللوحي) ، 66 بكسل (الهاتف)
• خط النص: اليوسفي
• لون النص: # 9b857b

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

انقر فوق حفظ وخروج.

وحدة العد (سطح المكتب)

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

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

• خط الأرقام: اليوسفي
• حجم خط الأرقام: 74 بكسل
• لون خط الأرقام: # 9b857b
• ارتفاع خط الأرقام: 70 بكسل
• خط التسمية: Raleway Light
• حجم خط التسمية: 14 بكسل
• لون نص التسمية: # 9b857b
• ارتفاع خط التسمية: 25 بكسل

في نفس علامة التبويب ، قم بالتمرير إلى أسفل واضبط الحشوة المخصصة العلوية على "10٪" والحشوة المخصصة السفلية على "10٪".

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

max-width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

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

وحدة العد التنازلي (الكمبيوتر اللوحي والهاتف)

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

• حجم خط الأرقام: 72 بكسل (الجهاز اللوحي والهاتف)
• ارتفاع خط الأرقام: 70 بكسل
• حجم خط الملصق: 14 بكسل (الجهاز اللوحي) ، 12 بكسل (الهاتف)

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

margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

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

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

في إعدادات التصميم المتقدمة ، قم بإجراء التغييرات التالية:

• خط النص: اليوسفي
• حجم خط النص: 50 بكسل
• لون النص: # 9b857b
• ارتفاع خط النص: 1.7em

استمر في التمرير في علامة التبويب "إعدادات التصميم المتقدمة" إلى "الهامش المخصص" وأضف "10٪" إلى الهامش العلوي.

مقسم

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

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

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

margin-left: auto;
margin-right: auto;
width: 30%;

انقر فوق حفظ وخروج. لقد انتهيت من القسم الأول من موقع الويب ، والذي يجب أن يبدو كالتالي:

يمكننا الآن الانتقال إلى الجزء الثاني من هذا التصميم حيث يمكنك البدء في سرد ​​قصتك للضيوف.

سرد الإعلان: القسم الثاني

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

أول صف من القسم

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

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

بعد ذلك ، انتقل إلى علامة التبويب Advanced Design Settings (إعدادات التصميم المتقدمة) ، وقم بموازنة ارتفاعات العمود وأضف '# 9b857b' كلون خلفية للعمود الأول. في علامة التبويب نفسها ، قم بتغيير مساحة العمود 1 إلى "5٪" أعلى ، و "10٪" يمين ، و "5٪" أسفل و "10٪" يسار.

بالنسبة للعمود الثاني ، لن نحتاج إلى إعداد لون للخلفية ولكننا نحمل صورة خلفية بدلاً من ذلك.

وحدة النص

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

في علامة التبويب "إعدادات التصميم المتقدمة" ، قم بإجراء التغييرات التالية:

• أقصى عرض: 500 بكسل (لسطح المكتب فقط)
• خط النص: اليوسفي
• حجم خط النص: 44
• لون النص: # fffaf6

وأضف 5٪ إلى البطانة السفلية.

اضغط على Save & Exit وأضف وحدة نصية أخرى. اجعل اتجاه النص "مبررًا". تابع بإجراء التغييرات التالية على وحدة النص في إعدادات التصميم:

• العرض الأقصى: 500 بكسل
• حجم خط النص: 14 بكسل
• خط النص: Raleway Light
• نمط الخط: جريء
• لون خط النص: # fffaf6
• ارتفاع خط النص: 1.7em

اضغط على حفظ وخروج.

استنساخ الصف السابق

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

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

اضغط على حفظ وخروج وأنت على ما يرام.

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

قم بإنشاء صف آخر من عمودين وإخفائه لسطح المكتب. اجعل الصف كامل العرض وقم بتغيير عرض هامش التوثيق إلى "3".

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

• أعلى: 5٪
• اليمين: 10٪
• القاع: 5٪
• اليسار: 10٪

بعد إضافة هذا القسم الثاني ، هذا هو الشكل الذي يجب أن يبدو عليه تخطيطك الآن:

أفضل رجل ، خادمة الشرف ، وصيفات الشرف ورجال العريس

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

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

الآن ، بمجرد إنشاء القسم ، وهو قسم قياسي ، أعطه لون الخلفية التالي: "# fae4de". لن تضطر إلى تغيير أي شيء آخر في إعدادات القسم حتى تتمكن من الضغط على Save & Exit.

إنشاء وحدة النص

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

ثم انتقل إلى إعدادات التصميم المتقدمة ، واضبط Text Font على "Tangerine" ، وحجم خط النص "Text Font Size" على "100px" (سطح المكتب والجهاز اللوحي) و "68٪" (الهاتف) ، و Text Font Color على "# 9b857b". قم بالتمرير لأسفل في نفس علامة التبويب وقم بتغيير الهوامش إلى "10٪" أعلى و "5٪" أسفل.

انقر فوق حفظ وخروج. تم الانتهاء الآن من الوحدة النمطية والصف الأول الخاص بك.

أضف صفًا آخر ، في هذه الحالة بعمودين وأضف 5٪ إلى الهامش العلوي والسفلي. بعد ذلك ، أضف وحدة شخص في العمود الأول من الصف.

وحدة الصورة والشخص

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

بعد ذلك ، انتقل إلى إعدادات التصميم المتقدمة وقم بإجراء التعديلات التالية:

• خط الرأس: Raleway Light
• نمط خط الرأس: غامق
• حجم خط الرأس: 14
• لون نص الرأس: # 9b857b
• ارتفاع خط الرأس: 1em
• خط الجسم: Raleway Light
• نمط خط النص الأساسي: غامق
• حجم خط الجسم: 14
• لون نص النص: # 9b857b
• ارتفاع خط الجسم: 1.7em

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

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
margin-left: 5%;
margin-right: 5%;

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

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

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

أين ومتى

هذا هو الجزء الأخير من الصفحة الرئيسية لحفل الزفاف ، حيث ستبلغ جمهورك بمكان ووقت حفل الزفاف. في هذا القسم ، سنحتاج إلى صف به 3 أعمدة (1/2 ، 1/4 ، 1/4) بلون الخلفية التالي: "# fffaf6".

إضافة خريطة

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

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

• خط النص: اليوسفي
• حجم خط النص: 50 بكسل
• لون النص: # 9b857b
• ارتفاع خط النص: 1.7em

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

الوحدة النمطية Blurb

ضمن وحدة النص ، أضف وحدة Blurb Module. اختر رمز الموقع ، وقم بتغيير لونه إلى "# f9c8b8" ، أضف الموقع في مربع النص وقم بتغيير اتجاه النص إلى "المركز". بعد ذلك ، انتقل إلى إعدادات التصميم المتقدمة وقم بإجراء التغييرات التالية:

• حجم خط الأيقونة: 42 بكسل
• خط الجسم: Raleway Light
• نمط الخط: جريء
• حجم خط الجسم: 14
• لون النص الأساسي: # 9b857b
• ارتفاع خط الجسم: 1em

في العمود التالي ، افعل نفس الشيء بالضبط. قم فقط بتغيير رمز الدعاية الدعاية إلى ساعة وإضافة تفاصيل "متى" في مربع النص.

هذا كل شيء. يجب أن يبدو التخطيط الآن سلسًا مثل التخطيط في هذا البرنامج التعليمي:

القادم

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

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