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

نشرت: 2017-05-17

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

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

سنوضح لك خطوة بخطوة كيفية إنشاء التخطيط التالي باستخدام المنشئ المرئي لـ Divi:

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

قسم البطل

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

قم بإنشاء صفحة

ابدأ بإنشاء صفحة ، باستخدام Divi builder وانتقل إلى Visual Builder.

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

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

وحدة النص

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

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

اتجاه النص: الوسط
خط النص: اليوسفي
حجم خط النص: 90 بكسل (سطح المكتب) ، 80 (جهاز لوحي) ، 66 (هاتف)
لون النص: # 9b857b
ارتفاع خط النص: 1.7em

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

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

العروس والعريس

للمضي قدمًا ، سيتعين عليك إنشاء قسم به صورتان فرديتان للعروس والعريس.

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

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

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

صورة العروس

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

border: 10px double #9b857b;

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

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

صورة العريس

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

شكرا لك ملاحظة

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

للبدء ، أضف قسمًا قياسيًا جديدًا إلى التخطيط الخاص بك. داخل القسم ، استخدم صفًا كامل العرض.

بعد ذلك ، افتح إعدادات القسم وقم بتغيير لون الخلفية إلى "# fffaf6" ضمن فئة الخلفية الفرعية.

أول وحدة نصية

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

ابدأ بتحديد الفئة الفرعية للنص في علامة تبويب التصميم وقم بإجراء التغييرات التالية من خلال البحث عنها يدويًا أو البحث عنها في شريط البحث:

اتجاه النص: الوسط
خط النص : اليوسفي
حجم خط النص: 70 (سطح المكتب والتابلت) ، 50 (هاتف)
لون النص: # 9b857b
ارتفاع خط النص: 1em

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

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

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

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

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

اتجاه النص: مبرر
خط النص: Raleway Light
نمط النص: جريء
حجم خط النص: 14
لون النص: # 9b857b
ارتفاع خط النص: 1.6em

انقر فوق حفظ وخروج وأنت على ما يرام. هذا ما يجب أن تبدو عليه صفحة المعرض الآن:

قسم الصور المفضلة

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

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

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

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

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

صور بولارويد (سطح المكتب)

لهذا الجزء ، ستحتاج إلى قسم قياسي آخر. في هذا القسم ، ستحتاج إلى صف به 4 أعمدة. غيّر لون خلفية هذا القسم إلى "# fae4de" في علامة التبويب "المحتوى" ضمن الفئة الفرعية "الخلفية".

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

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

z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);

الآن ، لتشغيل فئة "polaroid" ، يجب عليك الانتقال إلى الواجهة الخلفية لموقع الويب الخاص بك. انتقل إلى Divi> Theme options> وأدخل الكود التالي في حقل Custom CSS في أسفل الصفحة:

.polaroid {
background: white;
display: inline;
float: left;
margin: 0 15px 30px;
padding: 10px 10px 25px;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index:0;
position:relative;
}

.polaroid::after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
}

.polaroid.et_pb_image_2 {
display: block;
width: inherit;
}

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

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

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

الصورة 1

هذه هي أول وحدة صورة قمت بإنشائها ، احتفظ بها على هذا النحو.

الصورة 2

هوامش مخصصة:
أعلى: -10٪
اليسار: -20٪

العنصر الرئيسي:

z-index: 5;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);

صورة 3

هوامش مخصصة:
اليسار: -20٪

العنصر الرئيسي:
لا أحد

صورة 4

هوامش مخصصة:
أعلى: -10٪
اليسار: -20٪

العنصر الرئيسي:

z-index: 3;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);

صورة 5

هوامش مخصصة:
لا أحد

العنصر الرئيسي:

-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
transform: rotate(14deg);

صورة 6

هوامش مخصصة:
أعلى: -10٪
اليسار: -20٪

العنصر الرئيسي:

-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
transform: rotate(-18deg);

صورة 7

هوامش مخصصة:
اليسار: -20٪

العنصر الرئيسي:

z-index: 1;
-webkit-transform: rotate(-10deg);l
-moz-transform: rotate(-10deg);

صورة 8

هوامش مخصصة:
أعلى: -10٪
اليسار: -20٪

العنصر الرئيسي:

z-index: 5;
-webkit-transform:rotate(-3deg);
-moz-transform: rotate(-3deg);

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

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

الصور المفضلة (الجهاز اللوحي والهاتف)

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

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

بعد إجراء كل هذه التغييرات ، يجب أن يبدو تخطيطك هكذا حتى الآن على سطح المكتب:

المعرض حسب الاسم الأخير (سطح المكتب)

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

قائمة الأسماء

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

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

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

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

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

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

حدد أحد الأسماء ، وانقر على أيقونة الرابط واكتب "#" + الاسم. في وقت لاحق في منشور المدونة هذا ، ستقوم بربط هذا الاسم بقسم معين. كرر نفس الشيء لكل اسم في القائمة.

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

اتجاه النص: صحيح
خط النص: Raleway Light
نمط النص: جريء
حجم خط النص: 20
لون النص: # 9b857b
ارتفاع خط النص: 1.6em

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

افتح إعدادات الصف وقم بتغيير الرؤية إلى سطح المكتب فقط في فئة الرؤية الفرعية لعلامة التبويب خيارات متقدمة.

المعرض حسب الاسم الأخير (الجهاز اللوحي والهاتف)

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

كرر نفس الشيء الذي فعلناه في الصف السابق من خلال النقر على أيقونة الرابط وكتابة "#" + الاسم في مربع URL.

لكن تأكد من تعيين رابط رابط مختلف لكل اسم ثانٍ. في هذا المثال ، سيكون لكل من Avery و Brown رابط ارتساء مختلف عما كان عليه على أجهزة سطح المكتب. يتعين علينا القيام بذلك لأنه في الجزء التالي من الموقع ، سيتعين علينا أن يكون لدينا قسمان مختلفان في المعرض لكل معرض ثانٍ. بهذه الطريقة ، سيكون مستجيبًا للجهاز اللوحي والهاتف.

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

قسم المعرض (سطح المكتب)

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

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

المضي قدمًا ، أضف صفًا مثل هذا:

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

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

وحدة النص

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

محاذاة النص: الوسط
خط النص: اليوسفي
حجم خط النص: 60
لون النص: # 9b857b
ارتفاع خط النص: 1.6em

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

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

في العمود الثاني من الصف ، سيتعين عليك إضافة وحدة معرض. اكتب "8" في حقل رقم الصور في فئة الصور الفرعية في علامة التبويب "عام" واختر 8 صور.

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

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

العنصر الرئيسي:

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
border: 5px solid #FFFFFF;
column-count: 2; 
column-gap: 0px;

تراكب:

-webkit-filter: brightness(0%);

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

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

قم بتغيير الصور الموجودة في المعرض والاسم الأخير المذكور في مربع النص ومعرف الفصل الدراسي. هذا القسم له لون خلفية آخر أيضًا ؛ "# fffaf6".

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

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

قسم المعرض (الجوال)

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

ثم افتح خيارات وحدة النص. انتقل إلى علامة التبويب تصميم وقم بإزالة الهامش العلوي في فئة التباعد الفرعية. بعد ذلك ، انتقل إلى علامة التبويب خيارات متقدمة وقم بتغيير معرّف CSS في فئة CSS ID والفئات الفرعية إلى "avery1". هذا هو نفس المعرف الموجود في القائمة المطبقة على الأجهزة اللوحية والهواتف.

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

القادم

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

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