Divi: نحوه نمایش گزیده مقاله در شناور

می‌خواهید بدانید چگونه می‌توان قطعه‌های مقاله را در حالت شناور در نمایش داد DIVI ?

پیش‌نمایش قطعه‌های پست وبلاگ در حالت شناور می‌تواند راهی مؤثر برای حفظ یک طرح شبکه فشرده برای پست‌های وبلاگ شما بدون رها کردن کامل آن قطعه‌ها باشد. 

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

بنابراین در این آموزش، ما قصد داریم به شما نشان دهیم که چگونه می‌توانید این افکت جابجایی قطعه‌های پست وبلاگ را در شناور در آن ایجاد کنید. DIVI. 

بیایید شروع کنیم!

بررسی

ابتدا، در اینجا یک نمای کلی از آنچه در این آموزش ایجاد خواهیم کرد، آورده شده است.

ایجاد طرح بندی ماژول وبلاگ

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

یک خط ایجاد کنید

برای شروع، یک ردیف از یک ستون را به بخش وارد کنید

عرض خط

سپس به تنظیمات خط بروید. سپس، در تب Style، در قسمت Sizing، عرض ها را به صورت زیر تغییر دهید:

• حداکثر عرض: 90%
• حداکثر عرض: 1200 پیکسل

یک ماژول وبلاگ اضافه کنید

سپس، یک ماژول بلاگ را در ستون خطی که قبلا ایجاد شده است وارد کنید.

تنظیمات ماژول وبلاگ

سپس، در تب به تنظیمات ماژول وبلاگ بروید محتویات، در قسمت Elements، گزینه “Show Read More” را روی “Yes” قرار دهید.

اکنون به تب Style بروید، در قسمت Template، الگوی Grid را به عنوان طرح‌بندی وبلاگ انتخاب کنید.

در نهایت به تب Advanced رفته و کلاس CSS زیر را اضافه کنید: 

کلاس CSS: toggle-blog-excerpt

پس از آن، در مرحله بعد از این کلاس به عنوان انتخابگر برای کد CSS سفارشی خود استفاده خواهیم کرد.

CSS سفارشی را با ماژول Code اضافه کنید.

در این مرحله، پست های وبلاگ ما در یک شبکه قرار می گیرند و یک کلاس CSS سفارشی به منوی وبلاگ اضافه شده است. بنابراین ما قصد داریم از این انتخابگر کلاس CSS برای هدف قرار دادن این ماژول بلاگ و اضافه کردن یک افکت جابجایی هنگام نگه داشتن ماوس روی یک مقاله استفاده کنیم.

برای افزودن CSS از ماژول Code استفاده می کنیم. برای انجام این کار، یک ماژول کد زیر ماژول وبلاگ اضافه کنید.

در مرحله بعد، CSS سفارشی زیر را که برای ایجاد افکت جابجایی قطعه مقاله در hover لازم است، قرار دهید. مهمتر از همه، مطمئن شوید که کد CSS را بین تگ های سبک لازم قرار دهید.

1. @media all and (min-width: 981px) {
2.   /* add transition for post content*/
3.   .toggle-blog-excerpt .et_pb_post .post-content {
4.     -webkit-transition: all 500ms !important;
5.     transition: all 500ms !important;
6.   }
7.   /* keep post content visible in visual builder */
8.   body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
9.     visibility:visible;
10.     opacity: 1;
11.     max-height:none;
12.   }
13.   /* hide post content */
14.   .toggle-blog-excerpt .et_pb_post .post-content {
15.     visibility: hidden;
16.     opacity: 0;
17.     max-height:0px;
18.   }
19.   /* show post content when hovering over post item */
20.   .toggle-blog-excerpt .et_pb_post:hover .post-content {
21.     visibility: visible;
22.     opacity:1;
23.     max-height: 500px;
24.   }
25.   /* set min-height for all post items */
26.   .toggle-blog-excerpt .et_pb_post {
27.     min-height: 400px; 
28.   }
29. }

نتیجه به دست آمده را تا اینجا ببینیم.

نتیجه

بیایید با سازنده Divi مقداری استایل اضافی به ماژول بلاگ اضافه کنیم

اکنون که CSS برای دادن افکت جابجایی برای تکه‌های پست وبلاگ به ما ارائه شده است، سپس می‌توانیم با استفاده از سازنده، هر سبک دیگری را به ماژول وبلاگ اضافه کنیم. DIVI.

برای این مثال، ما حداقل تنظیمات را در سبک انجام خواهیم داد، اما در مورد سبک خود نیز آزاد باشید.

سبک عنوان مقاله

• عنوان کم نور: متن پررنگ
• رنگ متن عنوان: #6D6A7E
• اندازه متن عنوان: 20 پیکسل
• ارتفاع خط عنوان: 1.3 میلی متر

سبک متن "ادامه مطلب"

• بیشتر بخوانید Dim Light: Bold Text
• بیشتر بخوانید سبک کپی: TT
• رنگ متن بیشتر بخوانید: #6D6A7E
• فاصله حروف بیشتر بخوانید: 1px
• ارتفاع خط بیشتر بخوانید: 3.5em

نمایش صفحه بندی متن را تغییر دهید

• نمایش صفحه بندی کم نور: متن پررنگ
• رنگ متن نمایش صفحه بندی: #6D6A7E
• فاصله حروف نمایش صفحه: 1 پیکسل
• نمایش صفحه بندی سبک کپی: TT

حاشیه را بردارید

• عرض حاشیه طرح بندی شبکه: 0 پیکسل

Hover Shadow Box Style

• کادر سایه: به اسکرین شات مراجعه کنید
• موقعیت شروع: 0px
• قدرت تاری سایه جعبه: 38 پیکسل
• رنگ قلم زیرنویس: rgba (109,106,126,0.25)

نتیجه نهایی

نتیجه

در خاتمه، همانطور که در این آموزش نشان داده شده است، افزودن چند قطعه CSS می‌تواند عملکرد مورد نیاز برای تکان دادن قطعه‌های پست وبلاگ با یک افکت شناور خوب را به شما بدهد. 

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

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