به جلسه بیست و پنجم بخش آموزش طراحی سایت با المنتور از دوره رایگان وردپرس خوش آمدید. یادگیری ساخت قالب نوشته با المنتور دست شما را برای طراحی این دسته از صفحات بازتر میکند. قالبهای آماده وردپرسی معمولاً تنظیمات و قابلیتهایی مجزا برای صفحات داخلی نوشتهها دارند. حتی در تنظیمات این قالبها میتوانید سایدبار و خیلی چیزهای دیگر را نمایش بدهید یا ندهید. اما در قالب Hello Elementor از این خبرها نیست!
در واقع شما ظاهر جالبی را برای صفحات داخلی نوشتهها نخواهید داشت. باید خودتان قالب صفحات داخلی نوشتهها را ایجاد کنید. دقت کنید که این اصلاً بد نیست. چون شما راحتتر میتوانید یک صفحه سبک و متناسب با طرح مدنظر خودتان را به بهترین شکل طراحی کنید. برای یادگیری بیشتر از شما دعوت میکنیم تا پایان این مقاله از آژانس نوآوری رسام ما را همراهی کنید.
ساخت قالب نوشته با المنتور
برای طراحی قالب نوشتههای خود در المنتور، در پیشخوان وردپرس و در قسمت قالبها، روی قالبهای ذخیره شده کلیک کرده و سپس روی “افزودن قالب جدید” کلیک کنید. با تصویر زیر مواجه خواهید شد. از این قسمت قالب Single Post را انتخاب کرده و سپس یک نام برای آن انتخاب کنید. وارد برگهساز المنتور خواهید شد. حالا میتوانید قالب خود را برای نوشتهها طراحی کنید. دقت کنید که اینجا هم مانند لوپ آیتم، باید لینکها، تصویر شاخص، عناوین و اطلاعات متا را با استفاده از برچسبهای پویا (داینامیک) وارد کنیم.
در این بخش قالب Single Page هم وجود دارد اما آن را انتخاب نمیکنیم. به این دلیل که برگهها عمدتاً طراحی متفاوتی دارند. مثلاً برگه تماس با ما ظاهر متفاوتی با درباره ما و فرصتهای شغلی دارد. بنابراین هنگام طراحی سایت برگهها را خودمان با برگهساز المنتور بهصورت مستقیم پیاده سازی خواهیم کرد. اما نوشتهها چون ظاهر مشابه هم دارند، یک قالب المنتوری میسازیم تا ظاهر همه آنها یکنواخت شوند. دقت کنید که بعداً نوشتهها را صرفاً با ادیتور گوتنبرگ درج میکنیم اما همه آنها خود به خود، ظاهر همین قالب کلی نوشتهها را به خود خواهند گرفت. بدین صورت طراحی بسیار سبکتری خواهید داشت.
درج سایدبار در قالب نوشتهها در المنتور
استفاده از سایدبار الزامی نیست. باید به این توجه کنید که در سایتی که میخواهید چقدر سایدبار و محتوای داخل آن ضرورت دارد و چقدر این موضوع متناسب با نیاز کاربران آن سایت است. مثلاً در سایدبار ممکن است بنر و مقالات مشابه را بگذارند. ممکن است دکمههای اشتراکگذاری یا تبلیغات مربوط به خدمات و محصولات خود را نیز درج کنند. پس این موضوع، بسته به سایت شما متغیر است. ما در این بخش آموزش المنتور پروژه محور از دوره رایگان طراحی سایت با وردپرس سایدبار را نیز درج کردیم که آموزش کاملتر شود.
درج کد CSS برای بهبود طراحی قالب نوشتهها در المنتور
اینکه کد CSS بزنید الزامی نیست. با همان امکانات افزونههای المنتور و المنتورپرو هم میتوانید صفحه را طراحی کنید. البته گاهی برای بهتر شدن طراحی نیاز به درج کد است. اگر CSS بلدید به شما تبریک میگویم اما اگر هم بلد نیستید فعلاً مهم نیست. در گذر زمان یاد خواهید گرفت (به شرطی که از انجام تمرین نترسید). کدهای استفاده شده در ویجت محتوای متن صفحه (در تب پیشرفته و قسمت مربوط به کد سفارشی) قرار دادیم. در صورت تمایل از آنها استفاده کنید. دقت کنید که شما باید کلاس pooya-post-links را (بدون نقطه اول) در قسمت کلاس CSS در تب پیشرفته وارد کنید.
.pooya-post-links a strong, .pooya-post-links a {
font-weight: 700;
transition: 300ms;
}
.pooya-post-links a strong:hover, .pooya-post-links a:hover {
text-decoration: underline;
text-underline-offset: 8px;
}
.pooya-post-links .wp-block-video {
margin: 30px 0;
}
.pooya-post-links .wp-block-video video {
border-radius: 10px;
}
.pooya-post-links .wp-block-heading {
margin-top: 30px;
}
.pooya-post-links .wp-block-image {
margin: 30px 0;
}
.pooya-post-links .wp-block-image img {
border-radius: 5px;
}
.pooya-post-links mark {
padding: 5px;
border-radius: 5px;
font-weight: 500;
}یک قالب جذاب برای نوشتههای خود بسازید
صفحات داخلی نوشتهها اهمیت بسیاری دارند. زمانهای بسیار رخ میدهد که کاربران با جستجوی عبارتی وارد سایت شوند و مقصد آنها یکی از صفحات بلاگ شما باشد. پس باید روی سرعت، رابط کاربری و جذابیت این صفحه کار کنید تا به قول دیجیتال مارکترها، از طریق بازاریابی محتوایی مخاطب بیشتری بدست آورید. حتماً طراحی صفحه وبلاگ با المنتور را انجام دهید. همچنین، تجربیات و سوالات خود را نیز با متخصصین آژانس نوآوری رسام در این جلسه از آموزش رایگان وردپرس در میان بگذارید.
