آیا می خواهید پیوند Read More ماژول وبلاگ را سفارشی کنید DIVI ? سپس آموزش ما را دنبال کنید.
پیوندهای "بیشتر بخوانید" یک وبلاگ می تواند بخش مهمی از بهبود باشد تجربه کاربر. بنابراین مهم است که بدانیم چگونه آنها را به درستی سفارشی کنیم.
در این آموزش، ما به شما نشان خواهیم داد که چگونه پیوند "بیشتر بخوانید" را در ماژول وبلاگ سفارشی کنید. در این مقاله به شما نشان خواهیم داد که چگونه:
- پیوند "بیشتر بخوانید" را با استفاده از گزینه های داخلی سفارشی کنید DIVI
- پیوند "بیشتر بخوانید" را تراز کنید (چپ، مرکز، راست)
- پیوند "بیشتر بخوانید" را به یک دکمه تمام صفحه تبدیل کنید
- یک دکمه سفارشی Read More با جلوه های شناور ایجاد کنید
- متن "بیشتر بخوانید" را با چیز دیگری جایگزین کنید (مانند "مقاله را بخوانید").
بررسی
در اینجا نگاهی گذرا به طرحی که در این آموزش ایجاد خواهیم کرد، است.
با استفاده از Divi's Theme Builder یک ماژول وبلاگ را در صفحه بارگذاری کنید
برای شروع سفارشی کردن پیوندهای Read More، باید به یک ماژول وبلاگ دسترسی داشته باشید.
شما می توانید بارگذاری یک طرح از پیش تعریف شده با هر ماژول وبلاگ دلخواه خود یا به سادگی یک ماژول وبلاگ جدید را به یک صفحه اضافه کنید.
برای شروع فرآیند، از صفحه وبلاگ از طرح از پیش تعریف شده استفاده می کنیم هوش مصنوعی.
یک صفحه جدید از داشبورد وردپرس اضافه کنید
سپس یک عنوان به صفحه خود بدهید و سپس روی "کلیک کنید" استفاده DIVI سازنده"
سپس بر روی " کلیک کنید طرح بندی را انتخاب کنید«
پیدا کنید و انتخاب کنید " ساختگی هوش صفحه وبلاگ«
در نهایت طرح وبلاگ را انتخاب کرده و بر روی ” کلیک کنید طرح بندی را انتخاب کنید«
سفارشی کردن و تراز کردن متن پیوند ادامه مطلب
هر ماژول وبلاگ گزینه ای برای نمایش یا پنهان کردن پیوند "بیشتر بخوانید" برای هر مقاله در طرح ارائه می دهد. برای نمایش پیوند "بیشتر بخوانید"، تنظیمات وبلاگ را باز کنید و " را تغییر دهید نمایش دکمه ادامه مطلب به "YES" در لیست موارد وبلاگی که می خواهید نمایش دهید.
در زیر تب Style، می‌توانید متن Read More را با استفاده از یکی از گزینه‌های داخلی سفارشی کنید. برای این مثال، بیایید موارد زیر را به روز کنیم:
- فونت بیشتر بخوانید: Barlow
- بیشتر بخوانید Dim Light: Semi Bold
- بیشتر بخوانید سبک کپی: حروف بزرگ (TT)، زیر خط (U)
- رنگ متن بیشتر بخوانید: #db0eb7
- بیشتر بخوانید متن زیرخط دار رنگ: #3c5bff
- فاصله حروف بیشتر بخوانید: 1px
در اینجا نتیجه است.
در حال حاضر، پیوند "بیشتر بخوانید" به طور پیش فرض در سمت چپ قرار دارد، مگر اینکه تراز را تغییر دهید. برای تراز کردن پیوند در مرکز یا سمت راست پست، یک قطعه CSS مانند این اضافه کنید:
در تب پیشرفته تنظیمات وبلاگ، CSS زیر را به CSS دکمه Read More اضافه کنید:
display: block;
text-align: right;
"display:block" پیوند را به یک عنصر بلوکی تغییر می‌دهد که تمام عرض ظرف خود را می‌پوشاند (در این مورد، بدنه محتویات از انتشار). هنگامی که به عنوان یک عنصر بلوک تعریف شد، می‌توانیم متن را با استفاده از "text-align:right" به سمت راست تراز کنیم.
دفعات بازدید: چگونه یک سربرگ جهانی چسبناک در Divi ایجاد کنیم
در اینجا نتیجه است.
برای اینکه پیوند را در مرکز قرار دهید، به سادگی به جای "راست" با "center" مقدار خاصیت "Text-align" را به صورت زیر جایگزین کنید:
در اینجا نتیجه است.
پیوند "بیشتر بخوانید" را سفارشی کنید تا شبیه یک دکمه باشد
برای این مثال، یک استایل دکمه ساده با عرض کامل برای پیوند "بیشتر بخوانید" ایجاد می کنیم. قبل از افزودن CSS سفارشی، تنظیمات وبلاگ را باز کنید و متن پیوند "بیشتر بخوانید" را به صورت زیر به روز کنید:
- بیشتر بخوانید سبک کپی: حروف بزرگ (TT)
- رنگ متن بیشتر بخوانید: #ffffff
در مثال قبلی، از «display:block» و «text-align:center» استفاده کردیم تا پیوند تمام عرض ظرف را بپوشاند و متن را در مرکز قرار دهد.
همچنین مشاهده کنید: نحوه ایجاد یک منوی کشویی و فشاری در Divi
برای اینکه مانند یک دکمه به نظر برسد، تنها کاری که باید انجام دهیم این است که مقداری رنگ پس‌زمینه و فاصله به همراه چند قطعه اضافی CSS اضافه کنیم. برای انجام این کار، به تب Advanced رفته و CSS دکمه "بیشتر بخوانید" را به صورت زیر به روز کنید:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
نتیجه
اینم نتیجه!
ایجاد یک استایل دکمه پیشرفته با CSS
اگر می‌خواهید استایل دکمه را به سطح دیگری ببرید، می‌توانیم یک پس‌زمینه و یک افکت شناور اضافه کنیم.
برای انجام این کار، CSS را برای دکمه Read More با عبارت زیر جایگزین کنید:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-image: linear-gradient(90deg,#01012C 50%,rgba(0,0,0,0) 50%);
background-color: #3c5bff;
transition: all 300ms;
برای تغییر پس‌زمینه در شناور، می‌توانید CSS زیر را هنگام نگه‌داشتن مکان‌نمای ماوس روی دکمه «بیشتر بدانید» قرار دهید:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
نتیجه
اینم نتیجه!
متن "بیشتر بخوانید" را به چیز دیگری تغییر دهید
برای تغییر متن «بیشتر بخوانید» به چیز دیگری مانند «مقاله بخوانید»، به کمی جی کوئری نیاز داریم. اما نگران نباشید، این فقط چند خط است.
قبل از اضافه کردن کد jQuery، یک کلاس CSS سفارشی را به صورت زیر به ماژول وبلاگ اضافه کنید:
- کلاس CSS: et-custom-read-more-text
توجه: مطمئن شوید که نام کلاس برای کار کردن jQuery صحیح است.
برای افزودن jQuery که متن «بیشتر بخوانید» را تغییر می‌دهد، یک ماژول کد زیر ماژول وبلاگ اضافه کنید.
سپس کد jQuery زیر را قرار دهید و مطمئن شوید که کد را با تگ های اسکریپت لازم قرار داده اید:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);این کد اساساً به مرورگر می‌گوید که پس از بارگیری صفحه، متن پیوند «بیشتر بخوانید» را به «خواندن مقاله» تغییر دهد.
نتیجه
اینم نتیجه!
نتایج نهایی
در اینجا نگاهی دیگر به سفارشی سازی پیوند (یا دکمه) Read More داریم که انجام داده ایم.
دانلود DIVI در حال حاضر!!!
نتیجه
بنابراین ! برای این مقاله تمام شد. ماژول Divi's Blog به شما این امکان را می دهد که لینک "بیشتر بخوانید" را به صورت خلاقانه شخصی سازی کنید. و اگر می خواهید چند قطعه CSS را آزمایش کنید، می توانید اصلاحات پیشرفته تری را خودتان ایجاد کنید.
امیدواریم این آموزش به شما کمک کند پیوندهای "بیشتر بخوانید" را به سطح بعدی ببرید. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
