امروز قصد دارم به شما نشان دهم که چگونه با استفاده از یک طرح برای نقد کتاب های چشم نواز طراحی کنید کتاب الکترونیکی فقط گزینه‌های داخلی Divi Layout Pack و Divi. این یک راه عالی برای افزودن اثبات اجتماعی به صفحات فرود، افزایش اعتبار و به اشتراک گذاری نظرات کوتاه افراد به روشی زیبا است.
بیایید طراحی را شروع کنیم
طرح بندی صفحه فرود بسته کتاب الکترونیکی را بارگذاری کنید
اولین کاری که باید انجام دهید این است که یک صفحه جدید با استفاده از طرح بندی صفحه فرود ایجاد کنیدکتاب الکترونیکی Layout Pack که در Premade Layouts پیدا خواهید کرد.
یک بخش جدید اضافه کنید
به پایین اسکرول کنید و بخش جدیدی اضافه کنید که می خواهید بررسی های کتاب را نشان دهید.
یک خط جدید اضافه کنید
ساختار ستون
با استفاده از ساختار ستون زیر، اضافه کردن یک ردیف جدید ادامه دهید:
پس زمینه شیب ستون 1
بدون اضافه کردن ماژول های دیگر ، تنظیمات خط را باز کرده و یک پس زمینه شیب به ستون اول اضافه کنید.
- رنگ 1: #ffffff
- رنگ 2: #f4f4f4
- ستون 1 موقعیت شروع: 12٪
- ستون 1 موقعیت نهایی: 12٪
ستون 2 رنگ پس زمینه
همچنین رنگ ستون سفارشی را به ستون دوم اضافه کنید.
- ستون 2 رنگ پس زمینه: # 9400ff
اندازه
با استفاده از تنظیمات زیر به تب Design بروید و تمام فضای سفارشی بین ستون ها را حذف کنید:
- از عرض روده ای سفارشی استفاده کنید: بله
- عرض روده: 1
فاصله
ما همچنین در حال تغییر تنظیمات فاصله خط هستیم.
- حاشیه بالایی: 100px
- حاشیه پایین: 100px
- پوشش بالا: 0px
- بالشتک پایین: 0px
یک ماژول تصویر به ستون 1 اضافه کنید
آپلود 1: تصویر 1
هنگامی که تنظیمات ردیف شما در محل قرار گرفتند ، می توانید با اضافه کردن یک ماژول تصویر در ستون اول ، ماژول های مختلف را اضافه کنید. تصویری را که انتخاب کردید بارگذاری کنید اما مطمئن شوید که نسبت ابعاد 1: 1 است. این بدان معنی است که ارتفاع و عرض باید یک مقدار باشند.
ترازبندی تصویر
ترازبندی تصویر سمت چپ را در تب Design انتخاب کنید.
- تراز بندی تصویر: چپ
اندازه
ما همچنین عرض این ماژول را برای اندازه های مختلف صفحه تغییر می دهیم.
- عرض: 20٪ (دسک تاپ و رایانه لوحی) ، 30٪ (تلفن)
فاصله
برای همپوشانی در سمت چپ خط ، مقدار حاشیه سمت چپ منفی را در تنظیمات Spacing از ماژول Image اضافه می کنیم.
- حاشیه چپ: -30px
مرز
برای تکمیل طراحی تصویر ، همچنین "50vw" را به هر یک از گوشه های تنظیمات حاشیه اضافه می کنیم. این اطمینان حاصل می کند که تصویر شکل دایره ای خود را در اندازه های مختلف صفحه نمایش حفظ می کند.
ماژول متن # 1 را به ستون 1 اضافه کنید
نمادهای ستاره را به قسمت محتوا اضافه کنید
بیایید به ماژول بعدی برویم، که ماژول متن رتبه بندی است. برای برجسته کردن تعداد ستاره ها، از نمادها استفاده می کنیم. ادامه دهید، نمادهای زیر را کپی کرده و در کادر قرار دهید محتویات یک ماژول متن جدید: ★★★★.
رنگ پسزمینه
سپس پایین قسمت ماژول را تغییر دهید.
- رنگ پسزمینه: # 9400ff
تنظیمات متن
به تب Design بروید و تنظیمات متن را نیز تغییر دهید.
- فونت متن: مونتسرات
- وزن قلم متن: سنگین
- اندازه متن: 45px (دسک تاپ) ، 30px (رایانه لوحی) ، 25px (تلفن)
- ارتفاع خط متن: 1em
- ترتیب متن: مرکز
اندازه
با تغییر عرض ماژول ادامه دهید
- عرض: 35٪
فاصله
و یک فاصله سفارشی اضافه کنید.
- حاشیه چپ: 50px
- حاشیه سمت راست: 50px
- پوشش بالا: 20px
- بالشتک پایین: 20px
جعبه سایه
برای برجسته کردن جعبه رتبه بندی ، ما می خواهیم سایه ظریف اضافه کنیم.
- Box Shadow Blur Force: 50px
- رنگ سایه: rgba (0,0,0,0,3،XNUMX،XNUMX،XNUMX،XNUMX،XNUMX)
ترجمه ترانسفورماتور
سرانجام ، ما با استفاده از مقادیر تبدیل ترجمه سفارشی ، ماژول متن را تغییر مکان می دهیم. می توانید این مرحله را به تأخیر بیندازید تا همه ماژول ها را به ستون خود اضافه کنید.
- سمت راست: 360px (دسک تاپ) ، -84px (رایانه لوحی) ، -70px (تلفن)
- پایین: -113px (دسک تاپ) ، 190px (رایانه لوحی) ، 141px (تلفن)
ماژول متن # 2 را به ستون 1 اضافه کنید
اضافه کردن محتوا
ماژول بعدی که در ستون 1 نیاز داریم، ماژول متن دیگری است. اضافه کردن محتویات به انتخاب شما و پیوندی به داور و کتاب.
تنظیمات متن
به تب Design بروید و متناسب با آن تنظیمات متن را تغییر دهید:
- فونت متن: مونتسرات
- اندازه متن: 18px
تنظیمات پیوند متن
رنگ متن لینک را نیز تغییر دهید.
- رنگ متن لینک: #9400ff
فاصله
سپس به تنظیمات فاصله بروید و عنصر را با استفاده از مقادیر حاشیه سفارشی تغییر مکان دهید.
- حاشیه برتر: -100px (دسک تاپ) ، 0px (رایانه لوحی و تلفن)
- حاشیه سمت چپ: 200px (دسک تاپ) ، 50px (رایانه لوحی) ، 20px (تلفن)
- حاشیه سمت راست: 50px (رایانه لوحی) ، 20px (تلفن)
ماژول متن # 3 را به ستون 1 اضافه کنید
محتوای H3 را اضافه کنید
بیایید به سراغ ماژول بعدی برویم ، که یک ماژول متنی است که شامل عنوان نسخه H3 است.
تنظیمات متن H3
به برگه Design بروید و تنظیمات متن H3 را تغییر دهید.
- عنوان 3 قلم: مونتسرات
- عنوان 3 وزن قلم: جسورانه
- عنوان رنگ 3 متن: #000000
فاصله
همچنین حاشیه سفارشی اضافه کنید.
- حاشیه برتر: 80px (دسک تاپ) ، 50px (رایانه لوحی و تلفن)
- حاشیه سمت چپ: 50px (دسک تاپ و رایانه لوحی) ، 20px (تلفن)
- حاشیه سمت راست: 50px (دسک تاپ و رایانه لوحی) ، 20px (تلفن)
ماژول متن 4 را به ستون 1 اضافه کنید
اضافه کردن محتوا
بیایید به ستون بعدی و آخر مورد نیاز خود در ستون 1 برویم که این یک ماژول متنی دیگر با بازنگری واقعی است.
فاصله
به تنظیمات فاصله این ماژول رفته و تنظیمات زیر را اعمال کنید:
- حاشیه بالایی: 20px
- حاشیه پایین: 50px
- حاشیه سمت چپ: 50px (دسک تاپ و رایانه لوحی) ، 20px (تلفن)
- حاشیه سمت راست: 50px (دسک تاپ و رایانه لوحی) ، 20px (تلفن)
یک ماژول تصویر به ستون 2 اضافه کنید
تنظیمات CSS ستون 2 را تغییر دهید
ما از ویژگی flex برای تراز کردن تصویر در مرکز استفاده خواهیم کرد:
نمایش: flex؛
تصویر جلد کتاب را بارگیری کنید
در ستون دوم ما به دو ماژول نیاز خواهیم داشت ، شروع با یک ماژول تصویر با جلد کتاب. برای این آموزش ، ما از جلد کتاب هایی که همراه با کتاب مروری Divi هستند استفاده می کنیم ، اما شما همچنین می توانید جلد کتاب خود را اضافه کنید.
اندازه
به تب Design در ماژول Image بروید و عرض را تغییر دهید.
- عرض: 79٪ (دسک تاپ) ، 40٪ (رایانه لوحی و تلفن)
عنصر اولیه پیشرفته
در اینجا سعی خواهیم کرد تصویر را در مرکز تراز کنیم.
- align-self: مرکز؛
هر چند وقت یکبار طراحی کنید
پس از ایجاد اولین بررسی کتاب ، بسته به چند بررسی که می خواهید در صفحه فرود خود مشاهده کنید ، می توانید کل خط را هر بار که می خواهید کلون کنید.
آخرین افکار
در این آموزش، ما به شما نشان دادیم که چگونه برای صفحات انتشار کتاب الکترونیکی بعدی خود، نقدهای عالی طراحی کنید. این به شما کمک می کند تا اثبات اجتماعی را به صفحه خود اضافه کنید و متقاعد کنید آخرین بازدید اعتبار کتاب شما اگر سوال یا پیشنهادی دارید، حتما در بخش نظرات زیر نظر دهید!
