طراحی پوسته باکس نوشته ها (ویجت پست ها) در المنتور

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
آموزش طراحی باکس نوشته
پخش ویدیو

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

همانطور که میبینید این 3 پوسته جزئیات و طراحی منحصر به فردی ندارد و دست شما را در طراحی بسته است.

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

در آموزش های قبلی هم این کار را برای نمایش محصول تکی انجام داده ایم.

برای استفاده از این آموزش کافیه افزونه های زیر را نصب کنید:

افزودن پوسته به ویجت پست ها در المنتور

ایجاد قالب داینامیکی برای ویجت پست

خب بعد از نصب این افزونه به بخش قالب ها رفته و افزودن جدید را بزنید.

در پنجره باز شده در بخش نوع قالب گزینه Loop را انتخاب کنید. این گزینه با نصب افزونه Elementor Custom Skin به المنتور اضافه خواهد شد. در انتها دکمه ایجاد قالب را بزنید تا به ویرایشگر المنتور بریم.

سفارشی سازی ویجت پست ها

در ویرایشگر المنتور فقط یک بخش و بدون هیچ ستونی اضافه کنید.

سپس اجزای یک باکس را ایجاد میکنیم. منظور از اجزای یک باکس یعنی: تصویر نوشته، عنوان، چکیده، تعداد نظرات، تاریخ و … میباشد. هر کدام از این موارد را میتوانید با طراحی دلخواه به این بخش اضافه کنید.

استفاده از ویجت های داینامیکی

در پنل ویجت های المنتور 8 ویجت داینامیکی به شما پیشنهاد شده است. هر کدام از این ویجت ها را میتوانید استفاده کنید.سفارشی سازی ویجت پست ها

تصویر ویژه

ابتدا ویجت تصویر ویژه را قرا می دهیم. این ویجت تصویر شاخص هر نوشته را به صورت خودکار دریافت کرده و نمایش می دهد.

سفارشی سازی ویجت پست ها

عنوان پست

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

سفارشی سازی ویجت پست ها

اطلاعات نوشته

حالا می خواهیم نام نویسنده و تاریخ نوشته و همچنین تعداد بازدید هر پست را قرار دهیم.

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

در ستون اول ویجت جعبه نویسنده را قرار می دهیم و در ستون دوم ویجت اطلاعات پست رو قرار می دهیم. هر کدام از ویجت ها را بر اساس نیاز خود استایل دهی کنید.

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

سفارشی سازی ویجت پست ها

تعداد بازدید نوشته

برای نمایش تعداد بازدید هر نوشته ابتدا از آموزش نمایش پر بازدیدترین نوشته ها با استفاده از المنتور برای اضافه کردن کد های مربوط به رصد هر نوشته را انجام دهید.

بخوانید : نمایش پر بازدیدترین نوشته ها با استفاده از المنتور

سپس یک ویجت سربرگ در ستون سوم قرار دهید.

سفارشی سازی ویجت پست ها

حالا روی گزینه داینامیک کلیک کنید و از بین لیست گزینه فیلد ACF را انتخاب کنید.

تعداد بازدید هر نوشته در المنتور

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

تعداد بازدید هر نوشته در المنتور

حالا تب پیشرفته را بزنید و فیلد قبل را با متن دلخواه پر کنید. برای مثال میتوانید از بازدید: استفاده کنید. سپس استایل مورد نظر خودتان را به ویجت اعمال کنید.

تعداد بازدید هر نوشته در المنتور

در نهایت بعد از انجام مراحل بالا به صورت زیر نمایش داده خواهد شد.

تعداد بازدید هر نوشته در المنتور

سفارشی سازی استایل

حالا روی ستون اصلی طراح ایجاد شده کلیک کنید و یک پس زمینه تعریف کنید. برای سفارشی سازی کردن هم میتوانید به ستون یک سایه بدید و قالب را ذخیره کنید.

سفارشی سازی ویجت پست ها

مرحله نهایی

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

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

سفارشی سازی ویجت پست ها

بعد از انتخاب قالب طراحی شده، تمامی نوشته ها بر اساس طرح شما نمایش داده خواهند شد.

ویرایش ویجت پست ها در المنتور

دانلود فایل اجرایی

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

دانلود فایل

خب به پایان یکی دیگر از آموزش های المنتور فارسی رسیدیم. امیدواریم از این آموزش هم به خوبی استفاده کرده باشید. اگر سوالی در مورد استفاده از افزونه Elementor Custom Skin دارید در بخش نظرات مطرح کنید.

045-microphone

مدرس :
محمدرضا احمدزاده

013-globe

سطح آموزش :
متوسط

035-essay

زمان آموزش :
6 دقیقه

فهرست مطالب

Avatar
علی در 20:23

سلام و عرض ادب
ببخشید سوال مهمی در این مورد برام پیش اومده اینکه:
اگر بنده بخوام تعدادی از دسته های رو برگردونه نه همه دسته ها رو چیکار بکنم.
مثلا میخوام از تمام دسته فقط اسم شهر و شهرستان رو نشون بده نه همهی دسته ها رو چون وقتی از المان post info گونه terms رو انتخاب میکنم تمام دسته ها رونشون میده.
هدف من طراحی پوسته باکس نوشته باری نمایش آگهی هست مثلا نام شهر و شهرستان رو و قیمت و ویژه یا چند ستاره بودن آگهی رو همشون رو به صورت مجزا نشون بدم که اکثرا داخل دسته ها هستن
اگر راهنمایی بفرمایید ممنون میشم
مخلص شما جعفری

پاسخ
المنتور فارسی
المنتور فارسی در 23:44

با سلام
برای این کار باید فیلد سفارشی برای بخش نوشته ها ایجاد کرده و در باکس نوشته نمایش دهید.

پاسخ
Avatar
جواد در 10:09

سلام و سپاس از آموزش بسیار مفیدتون
عالی بود
یک سوال:
این بخوانید بین پست رو هم با افزونه المنتور گذاشتین؟ ممنون میشم راهنمایی کنید

پاسخ
المنتور فارسی
المنتور فارسی در 11:28

با سلام
با استفاده از گزینه نقل قول در ویرایشگر وردپرس انجام شده است.

پاسخ
Avatar
علیو در 15:39

سلام میشه اینو برای محصولات هم استفاده کرد؟
اگه میشه چجوریه؟

پاسخ
المنتور فارسی
المنتور فارسی در 15:41

با سلام
بله میشه، باید از آموزش طراحی باکس محصول شبکه بندی ووکامرس با المنتور استفاده کنید.

مخصوص ووکامرس و EDD قابل طراحی می باشد.

پاسخ
Avatar
علیو در 15:41

اول مقاله نوشته بود … : )
چقدر افزونه های متفرقه نیاز دارن سایت سنگین میشه که..

پاسخ
المنتور فارسی
المنتور فارسی در 15:45

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

پاسخ
Avatar
مهدی در 21:02

عالی .

پاسخ
رضا
رضا در 00:16

سلام وقتتون بخیر
من از قالب ایدامی استفاده میکنم ولی نمیش پستهاش مناسب نیس میخواستم یه قالب با المنتور طراحیس کنم که همه پستها به یه شکل دیدهع بشن چجوری میتونم تنظیم بکنم که نوشته های از نوع پست با اون قالب نمایش داده بشن؟
ممنونم از شما

پاسخ
المنتور فارسی
المنتور فارسی در 09:40

با سلام
می تونید از آموزش طراحی صفحه تکی نوشته ها با المنتور استفاده کنید.

پاسخ
reza and
reza and در 20:50

برای تک تک پستها باید این کار رو انجام بدم؟ نمیشه قالب تعریف کرد و از بخش انتخاب قالب تو قسمت نوشتن پست انتخاب کرد که با اون قالب پست نمایش داده بشه؟

پاسخ
المنتور فارسی
المنتور فارسی در 21:26

نه کافیه یک قالب طراحی کنید و برای تمامی نوشته ها اعمال می شود.

پاسخ
Avatar
احسان در 19:17

ممنون عالی بود

پاسخ
Avatar
احسان محمدی در 04:16

سلام
من از قسمت قالب > آرشیو >
صفحه بلاگ رو ساختم
چطوری تعیین کنم که در منوناوبری روی مقاله‌ها کلیک شد این صفحه باز شود؟
چطور میشه تعیین کرد url صفحه blog باشد؟

پاسخ
المنتور فارسی
المنتور فارسی در 11:28

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

پاسخ
مصطفی شیری
مصطفی شیری در 12:07

مثل همیشه آموزش های شما بی نظیره !!
مرسی

پاسخ
المنتور فارسی
المنتور فارسی در 12:15

ممنون از توجه شما

پاسخ
Avatar
alireza roshanaiee در 13:58

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

پاسخ
المنتور فارسی
المنتور فارسی در 14:11

با سلام
قالب تون چیه ؟
لطفا آدرس صفحه ای که اجرا کردید را ارسال کنید.

پاسخ
Avatar
alireza roshanaiee در 17:56

عرض کردم سایتم الان در لوکاله راه حل رو لطفا بگید

پاسخ
المنتور فارسی
المنتور فارسی در 18:01

متاسفانه باید صفحه اجرا شده رو بررسی کنیم تا ببینیم مشکل چیه و بعد راه حل ارائه بشه.
می تونید روی سرور انتقال بدید تا بررسی کنیم.

پاسخ
Avatar
احسان در 19:09

دسته بندی مطالب رو چطوری میشه اضافه کرد
مثلا کنار نام نویسنده و زمان انتشار، دسته بندی نوشته رو مشخص کرد
وقتی نوشته رو تنظیم می کنیم سمت راست گزینه دسته بندی را انتخاب می کنیم اما از جایی که فیلد سفارشی رو انتخاب می کنیم گزینه دسته بندی نوشته نیست

پاسخ
المنتور فارسی
المنتور فارسی در 19:29

برای اضافه کردن دسته بندی نوشته، می توانید از ویجت اطلاعات پست استفاده کرده و دسته بندی و برچسب را اضافه کنید.

پاسخ
Avatar
احسان در 19:05

سلام
چطور میشه ابعاد باکس رو ثابت کرد که با توجه به متن و سایز و عکس تغییر نکنه
اگر دقت کردید توی فیلم خود شما هم برخی تیترهای دوخطی باکس های کشیده تری داشتند و نظم صفحه بهم می خورد
اما برخی سایت ها رو می بنیم کاملا باکس های یکسانی دارند
چطوری امکان پذیر است؟

پاسخ
المنتور فارسی
المنتور فارسی در 19:27

با سلام
می توانید کد زیر را برای ویجت متن قرار دهید.

.elementor-widget-posts .elementor-post__title{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px; /* set your desired width */
}

عدد 200 مقدار عرض متن را تعیین میکند.

پاسخ
Avatar
احسان در 13:37

سلام

میشه به جای بازدید حدود زمان موردنیاز مطالعه رو گذاشت ؟؟؟؟

میشه آیکن هم به جای کلمه بازدید اضافه کرد؟؟؟

پاسخ
المنتور فارسی
المنتور فارسی در 13:46

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

پاسخ
Avatar
hamed kamkar در 13:53

بسیار عالی و تسکر از آموزش خوبتون
در انتهای کار چطور میتونیم تمام کادر های پست تایپ هارو بر اساس ارتفاع یکسان کنیم؟
یعنی محدودیت برای تعداد کاراکتر عنوان و توضیحات بذاریم؟

پاسخ
المنتور فارسی
المنتور فارسی در 13:47

با سلام
می توانید محدودیت برای تعداد کاراکتر عنوان قرار دهید. یا ستون طراحی شده را یک ارتفاع ثابت دهید.
همچنین با نصب نسخه پرو افزونه Elementor Custom Skin Pro می تونید قابلیت ستون های هم ارتفاع را اضافه کنید.

پاسخ
Avatar
سعید در 19:44

ضمنا این اتفاق زمانی است که بهش لینک میدم

پاسخ
Avatar
سعید در 19:38

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

پاسخ
المنتور فارسی
المنتور فارسی در 00:21

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

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید

نیاز به کمک دارید؟ پیام دهید