چگونه یک صفحه لیست هدیه برای عروسی خود با Divi ایجاد کنیم

این پست قسمت 3 از 5 در مینی سریال ما است چگونه یک وب سایت عروسی زیبا با Divi ایجاد کنیم. در این مجموعه، مهم‌ترین بخش‌های ایجاد یک وب‌سایت عروسی برای خود یا مشتری‌تان با Divi را به شما معرفی می‌کنیم.

در دو قسمت اول مینی سریال خود، به شما نشان دادیم که چگونه با Divi یک صفحه اعلامیه عروسی و صفحه گالری زیبا ایجاد کنید. این بخش سوم به ایجاد یک صفحه لیست هدیه در وب سایت عروسی شما اختصاص داده می شود.

ما گام به گام به شما نشان خواهیم داد که چگونه می توانید طرح بندی زیر را با Visual Builder ایجاد کنید:

این طرح دارای پنج بخش است که هر کدام به ارزش کل می افزاید. بریم سراغ اولی!

بخش قهرمان

بخش قهرمان واقعاً ساده است، اما این دقیقاً همان چیزی است که ما در این مینی سریال به دنبال آن هستیم. سادگی و ظرافت ما از پالت رنگی مشابه دو آموزش عروسی قبلی استفاده می کنیم، بنابراین اگر دنبال کنید، می توانید به راحتی این صفحه را به وب سایت عروسی که قبلاً ایجاد کرده اید اضافه کنید.

شروع شدن

با افزودن یک صفحه جدید به وب سایت وردپرس خود و دادن یک نام شروع کنید. پس از آن، Divi Builder را فعال کرده و بلافاصله به Visual Builder بروید.

یک بخش جدید به صفحه ای که ایجاد کرده اید اضافه کنید. بخش تنظیمات را باز کنید و تصویر پس زمینه را در زیر شاخه پس زمینه تب Content تغییر دهید. در این مثال، ما یک تصویر متقارن برای پس‌زمینه بخش ترسیم کرده‌ایم تا جلوه‌ی افزوده‌ای را ایجاد کنیم.

با افزودن یک ردیف با عرض کامل به بخش ادامه دهید. تنظیمات ردیف را باز کنید و رنگ پس‌زمینه را به «rgba(122,122,122,0.56)» در زیر شاخه پس‌زمینه تب Content تغییر دهید.

ادامه دهید، به تب Design بروید. زیرمجموعه Size را باز کنید، سطر را به عرض کامل تبدیل کنید و عبارت “1” را برای Gutter Width وارد کنید.

به پایین اسکرول کنید و زیر شاخه Spacing را باز کنید. برای رایانه‌های رومیزی باید «200 پیکسل» را به صفحه‌های بالا و پایین و «150 پیکسل» را به صفحه‌های بالا و پایین برای تبلت‌ها و تلفن‌ها اضافه کنیم.

برای تبلت‌ها و تلفن‌های موجود در همان زیر مجموعه، «-50px» را به حاشیه بالا و پایین اضافه کنید.

اولین ماژول متن

در ادامه، یک ماژول متنی جدید به آرایه اضافه کنید. متن خود را به زیر شاخه Text در تب Content اضافه کنید. سپس به تب Design رفته و تغییرات زیر را در زیر شاخه Text اعمال کنید:

• جهت متن: مرکز
• فونت متن: نارنگی
• اندازه قلم متن: 100 (رومیزی و تبلت)، 68 (تلفن)
• رنگ متن: #fffaf6
• ارتفاع خط متن: 1.5 میلی متر

ماژول متن دوم

یک ماژول متن دیگر در زیر آن ایجاد کنید. به تب Content بروید و متن خود را در زیر شاخه Text وارد کنید. سپس به تب Design رفته و تغییرات زیر را در زیر شاخه Text اعمال کنید:

• جهت متن: مرکز
• فونت متن: Raleway Light
• سبک قلم متن: پررنگ
• اندازه فونت متن: 20 پیکسل (رومیزی)، 14 پیکسل (تبلت و تلفن)
• رنگ متن: #fffaf6
• ارتفاع خط متن: 1.5em

هدر شما باید تا الان به این شکل باشد:

بخش مقدمه

در این چیدمان می خواهیم به مردم حق انتخاب بدهیم. آنها می توانند انتخاب کنند که آیا می خواهند برای عروس، داماد یا هر دو چیزی بخرند.

با ایجاد یک بخش جدید شروع کنید و یک ردیف با یک ستون اضافه کنید. در زیر شاخه پس زمینه تب Content، رنگ پس زمینه را به ‘#fffaf6’ تغییر دهید. پس از آن، تنظیمات ردیف را باز کنید و به تب Design بروید. فقط برای رایانه های رومیزی، «5٪» را به حاشیه بالا و پایین اضافه کنید.

عنوان بخش

در همین حال. تنها چیزی که باید اضافه کنیم Text Module است. عنوانی را که می خواهید در زیر شاخه Text تب Content نمایش داده شود تایپ کنید. به تب Design رفته و تغییرات زیر را در زیر شاخه Text اعمال کنید:

• جهت متن: مرکز
• فونت متن: نارنگی
• سبک قلم متن: پررنگ
• اندازه فونت متن: 60 پیکسل (رومیزی)، 50 پیکسل (تبلت و تلفن)
• رنگ متن: #9b857b
• ارتفاع خط متن: 1.7em

حالا زیرمجموعه Size را باز کرده و Maximum Width را به ‘500px’ تغییر دهید.

با باز کردن زیرمجموعه Spacing در همان برگه ادامه دهید و «3%» را به قسمت بالا و پایین اضافه کنید.

سپس به تب Advanced رفته و کد زیر را به عنصر اصلی در زیر شاخه Custom 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;

حالا یک ردیف دیگر با یک ستون به همان بخش اضافه کنید. نیازی نیست در پارامترهای این ردیف چیزی را تغییر دهیم.

ماژول تصویر

یک ماژول تصویر را به ردیف اضافه کنید و تصویر را در زیر شاخه Image تب Content آپلود کنید. بعد، به تب Design بروید، فضای زیر تصویر را بردارید، “Center” را برای تراز تصویر انتخاب کنید و همیشه تصویر را در مرکز موبایل قرار دهید.

سپس به تب Advanced رفته و کد زیر را به قسمت Main Element در زیر شاخه Custom CSS اضافه کنید:

height: 100px;
width: 150px;

اولین ماژول متن

اولین ماژول متنی بخش زیر ماژول تصویر را اضافه کنید. متن را در جعبه متن در زیر شاخه Text زبانه Content وارد کنید و به تب Design بروید. در زیر مجموعه Text تنظیمات زیر را انجام دهید:

• جهت متن: مرکز
• فونت متن: Raleway Light
• اندازه فونت متن: 24 پیکسل
• رنگ متن: #9b857b
• ارتفاع خط متن: 1.5 میلی متر

همان برگه را به پایین اسکرول کنید و ’30px’ را به لبه بالایی زیرمجموعه Spacing اضافه کنید.

در نهایت، به تب Advanced همان ماژول متنی بروید و کد زیر را به عنصر اصلی در زیر مجموعه CSS سفارشی اضافه کنید:

font-weight:400;

ماژول متن دوم

یک Text Module دیگر را به بخش اضافه کنید و متن را در کادر متنی در زیر شاخه Text زبانه Content تایپ کنید. سپس به تب Design رفته و تغییرات زیر را اعمال کنید:

• جهت متن: مرکز
• فونت متن: Raleway Light
• سبک قلم متن: پررنگ
• اندازه فونت متن: 16 پیکسل
• رنگ متن: #9b857b
• ارتفاع خط متن: 1.5 میلی متر

همان تب را به پایین اسکرول کنید و حداکثر عرض را در زیر شاخه Size به ‘300px’ تغییر دهید. حاشیه بالا را در زیر شاخه Spacing نیز به ‘5%’ تغییر دهید.

سپس به تب Advanced رفته و کد زیر را به عنصر اصلی در زیر شاخه Custom CSS اضافه کنید:

font-weight: 300;

شبیه سازی ماژول تصویر و ماژول های متن

یک ردیف دیگر به همان بخش اضافه کنید، اما این بار با سه ستون.

ستون اول و آخرین ستون یک ردیف به همان ماژول های ردیف قبلی نیاز دارند. ماژول تصویر و دو ماژول متن. این ماژول ها باید همان تنظیماتی را داشته باشند که قبلا ایجاد کردیم، بنابراین تنها کاری که باید انجام دهیم این است که آنها را شبیه سازی کنیم. پس از دوبار کلون کردن هر ماژول، آنها را در ستون های چپ و راست ردیف جدید قرار دهید و تصویر و متن را تغییر دهید.

در مرحله بعد، به تب Design سطر بروید و “5%” را به حاشیه پایین زیر مجموعه Spacing اضافه کنید.

ماژول عکس عروس

حالا یک Image Module را به ستون دوم سطر اضافه کنید. تصویر را آپلود کنید و به تب Design بروید. مطمئن شوید که تراز تصویر را روی “چپ” تنظیم کرده اید و گزینه “همیشه در مرکز تصویر روی موبایل” را در زیر مجموعه Alignment فعال کنید.

همان برگه را به پایین اسکرول کنید و «5%» را به حاشیه بالایی در زیر شاخه Spacing اضافه کنید.

سپس به تب Advanced رفته و کد زیر را به عنصر اصلی در زیر شاخه Custom CSS اضافه کنید:

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

در نهایت، Image Module را در گوشی ها و تبلت ها غیرفعال کنید.

ماژول تصویر داماد

ماژول تصویر قبلی را کلون کنید و آن را در همان ستون قبلی قرار دهید. تصویر آپلود شده را تغییر دهید و به تب Design بروید. زیرشاخه Alignment را باز کنید و Image Alignment را به Right تغییر دهید.

علاوه بر این، در زیر شاخه Spacing، حاشیه بالا را روی “-60٪” تنظیم کنید.

اکنون می‌توانیم به بخش فهرست هدیه از طرح‌بندی برویم. طرح شما تا الان باید به این شکل باشد:

لیست آرزوها/لیست هدیه

یک بخش پیش‌فرض جدید اضافه کنید و رنگ پس‌زمینه را به ‘#fae4de’ در زیر شاخه پس‌زمینه تب Content تغییر دهید.

ماژول متن: عنوان

یک ردیف با عرض کامل به بخش اضافه کنید و آن را به عرض کامل تبدیل کنید. سپس، ماژول متنی را که در بخش دوم ایجاد کردیم، کلون کنید و آن را در این ماژول ردیف قرار دهید. متن ورودی های متن را تغییر دهید و رنگ پس زمینه را در قسمت Main Element در زیر شاخه CSS پیشرفته به ‘fffaf6# تغییر دهید. نشان

لیست هدیه/لیست آرزوها: با استفاده از ماژول اسلایدر

یک ردیف جدید با 3 ستون به بخش اضافه کنید و عرض سفارشی را در زیر شاخه Size تب Design به ‘65%’ تغییر دهید. با افزودن یک Text Module به ردیف اول ادامه دهید و تنظیمات زیر را در زیر شاخه Text تب Design انجام دهید:

• جهت متن: مرکز
• فونت متن: Raleway Light
• سبک قلم متن: پررنگ
• اندازه قلم متن: 24 پیکسل
• رنگ متن: #9b857b
• ارتفاع خط متن: 1.5em

همان برگه را به پایین اسکرول کنید و ’30px’ را به لبه بالایی زیرمجموعه Spacing اضافه کنید.

اکنون، ماژول متن را دو بار کلون کنید و یکی را در هر ستون قرار دهید.

سپس ماژول Slider را اضافه کنید. به تب Advanced در نوار لغزنده بروید و کد زیر را به عنصر اصلی در زیر مجموعه CSS سفارشی اضافه کنید:

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

ادامه دهید، یک اسلاید جدید اضافه کنید. در اسلاید، در زیر شاخه پس‌زمینه تب Content، تصویر پس‌زمینه یکی از مواردی را که می‌خواهید در فهرست هدیه قرار دهید، آپلود کنید. سپس نام عنصر و متن دکمه را در زیر شاخه Text آن تب وارد کنید. همچنین آدرس زیر مجموعه پیوند را تغییر دهید. هر تعداد اسلاید را که می خواهید در یک دسته اضافه کنید و همین کار را تکرار کنید.

به افزودن یک ردیف جدید ادامه دهید، اما اکنون تنها با 2 ستون.

در تب Design، در زیر شاخه Size، عرض سفارشی را به ’55٪’ و در زیر شاخه Spacing، حاشیه پایین را به ‘5٪’ تغییر دهید.

ماژول Text Module و Slides که در ماژول ردیف قبلی ایجاد کردیم، تنظیمات مورد نیاز ما را در سایر ماژول‌های متن و اسلایدرها دارد. پیش بروید و هر دو را چهار بار کلون کنید و آنها را در ستون های باقیمانده هر ماژول ردیف قرار دهید.

اکنون طرح شما باید به شکل زیر باشد:

فرم تماس (رومیزی)

هدف از فرم تماس در طراحی این است که به افراد امکان دهد هدیه ای را که برای زوج خریداری کرده اند، منتقل کنند. به محض دریافت هدیه، می توان آن را با هدیه دیگری در سایت تعویض کرد. با این کار کمتر احتمال دارد که دو مهمان یک هدیه بیاورند.

یک بخش پیش‌فرض جدید ایجاد کنید و رنگ پس‌زمینه را در زیر شاخه Background تب Content به #fffaf6 تغییر دهید.

ردیف اول

ترتیبی که در این قسمت نیاز داریم مانند سایر بخش ها است. فقط ماژول ردیفی که قبلا استفاده شده بود را با ماژول متن داخل آن کلون کنید و آن را داخل بخش قرار دهید. تنها کاری که باید انجام دهید این است که تغییراتی در تنظیمات Text Module ایجاد کنید. رنگ متن و پس‌زمینه عنصر اصلی را به #fae4de تغییر دهید.

سطر دوم

حالا یک ردیف با دو ستون اضافه کنید و ردیف را در تبلت ها و گوشی ها در زیر شاخه Appearance در تب Advanced پنهان کنید. ماژول فرم تماس را در ستون اول قرار دهید و تغییرات زیر را در زیر شاخه های مختلف تب Design اعمال کنید.

متن فیلد فرم:

• فونت ناحیه فرم: Raleway Light
• اندازه قلم ناحیه فرم: 18 پیکسل
• رنگ متن فیلد فرم: #9b857b
• ارتفاع خطی فیلد فرم: 1.7 میلی متر

مرز:

• شعاع مرز ورودی: 15
• استفاده از حاشیه: بله
• رنگ حاشیه: #d7dce1
• عرض حاشیه: 1 پیکسل
• سبک حاشیه: جامد

دکمه:

• اندازه متن دکمه: 15
• اندازه متن دکمه: 15
• رنگ متن دکمه: #fffaf6
• رنگ پس زمینه دکمه: #9b857b
• پهنای حاشیه دکمه: 9
• رنگ حاشیه دکمه: #9b857b
• شعاع حاشیه دکمه: 4

در تب Content ماژول فرم تماس، اکنون می توانید سه فیلد اضافه کنید. نام، ایمیل و پیام.

رنگ پس زمینه هر فیلد را به صورت دستی به #fae4de تغییر دهید.

در نهایت، ما یک ماژول متنی را به ستون دوم اضافه می کنیم تا بازدیدکنندگان شما را از روند مطلع کنیم. به تب Design رفته و تغییرات زیر را در دسته Text اعمال کنید:

• جهت متن: مرکز
• فونت متن: Raleway Light
• سبک قلم Tet: پررنگ
• اندازه قلم متن: 16
• رنگ متن: #9b857b
• ارتفاع خط حروف: 1.5 میلی متر

همان برگه را به پایین اسکرول کنید و «300 پیکسل» را به Maximum Width در زیر شاخه Size اضافه کنید.

در نهایت، در زیر شاخه Spacing، عبارت ‘5px’ را در حاشیه بالا تایپ کنید.

فرم تماس (تبلت و تلفن)

سطر از قبل ساخته شده را کلون کنید و فقط مکان (و ستون) ماژول فرم تماس و ماژول متن را تغییر دهید. به تب Advanced بروید و ردیف را برای دسکتاپ پنهان کنید.

برنامه شما باید اکنون و در نهایت به این شکل باشد:

بعدی

در قسمت چهارم این مینی سریال، به شما نشان خواهیم داد که چگونه یک کتاب مهمان آنلاین برای عروسی خود با Divi و نقدهای خودکار ایجاد کنید. اگر نظری در مورد این آموزش یا هر درخواستی برای آموزش های بعدی دارید؛ حتما نظر خود را در بخش نظرات این پست وبلاگ بگذارید تا بتوانیم با شما تماس بگیریم!

فراموش نکنید که در خبرنامه ایمیل ما مشترک شوید و کانال یوتیوب بنابراین هرگز یک اعلان بزرگ، نکته مفید یا رایگان Divi را از دست ندهید!