ساخت ستون‌ شیک با گوشه های درخشان در المنتور

ساخت ستون‌ شیک با گوشه‌های درخشان در المنتور – سلام به همراه‌ های عزیز رایا وردپرس! این بار برگشتم خدمتتون با یه آموزش خاص دیگه 😊❤️
اگه دوست داری سایتت خیلی خاص و جذاب به نظر بیاد، باید بگم که یکی از بهترین راه‌ها برای شیک‌تر کردن طراحی سایت، ساخت ستون‌ با گوشه‌های درخشان و منحنیه! با استفاده از المنتور، می‌تونی این کار رو خیلی راحت انجام بدی و سایتت رو از بقیه متمایز کنی. 🌟
تا پایان این پست منو همراهی کن تا بهت نشون بدم چطور می‌تونی این تغییرات رو انجام بدی!

چرا ستون‌ با گوشه‌های درخشان باعث جذابیت بیشتر می‌شه؟

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

این تغییرات ظاهری ساده می‌تونن تاثیر عمیقی روی تجربه کاربری بذارن و باعث بشن کاربر بیشتر با سایتت ارتباط برقرار کنه. همچنین، این طراحی به سایتت یه حس شیک و مدرن میده که می‌تونه باعث افزایش تعامل و مدت زمان حضور کاربر در سایت بشه. در نتیجه، هم تجربه کاربری بهتری ارائه میدی و هم شانس بیشتری داری که کاربر دوباره از سایتت بازدید کنه. 🌟

🤔چطور در المنتور ستون‌ با گوشه‌های درخشان و منحنی بسازم؟

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

× ✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

در ادامه، گام به گام بهت می‌گم چطور می‌تونی این کار رو انجام بدی. همراهم باش! 😎

1. ساخت برگه جدید در المنتور و تنظیم رنگ صفحه 🎨

اولین قدم اینه که وارد پیشخوان وردپرس بشی و صفحه‌ای که می‌خوای ستون رو بهش اضافه کنی باز کنی. بعد روی گزینه “ویرایش با المنتور” کلیک کن تا وارد محیط المنتور بشی. حالا وقتشه که یه رنگ پس‌زمینه تیره به صفحه‌ات بدی تا ستون و افکت‌های درخشانش بهتر به چشم بیان. 😎 برای این کار، ابتدا روی آیکون چرخ دنده در بالای ویرایشگر المنتور کلیک کن تا تنظیماتش باز بشه.

بعد به تب استایل (Style) برو و نوع پس‌زمینه رو کلاسیک انتخاب کن. حالا رنگ پس‌زمینه رو به #0e1538 تغییر بده. این رنگ تیره باعث میشه افکت‌های درخشان به خوبی نمایان بشن و طراحی‌ات خاص‌تر به نظر برسه! 🌟

2. ایجاد یک بخش جدید 🛠️

حالا در وسط صفحه روی نماد “+” بزن تا یه بخش جدید اضافه کنی. بعد از اون، از بین ساختارها، گزینه “سه ستونه” رو انتخاب کن تا بخش جدیدت به شکل سه ستونه ساخته بشه.

3. سفارشی کردن رنگ پس زمینه ستون🎨

در این مرحله باید یه رنگ پس‌زمینه تیره به ستون بدی تا ستون و افکت‌ درخشانش بهتر به چشم بیاد. برای این کار، ابتدا روی بخش مورد نظر کلیک کن تا تنظیمات اون باز بشه. سپس به تب “استایل” (Style) برو. و نوع پس زمینه کلاسیک و رنگش رو #0e1538 قرار بده.

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

تو همین بخش ویرایش ستون، به تب استایل برو و از قسمت حاشیه، انحنای حاشیه رو روی 10 پیکسل تنظیم کن.

4. افزودن المان‌های مدنظر به ستون‌ها 🛠️

حالا که ستون‌ها رو تنظیم کردی، وقتشه که المان‌هایی که می‌خوای در ستون‌ها نمایش بدی رو اضافه کنی. برای این کار، به راحتی می‌تونی از پنل سمت راست ابزارک های المنتور، هر المانی که نیاز داری رو بکشی و داخل ستون‌ها رها کنی.

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

افزودن ویجت تصویر به ستون:

اول از همه، ویجت تصویر رو به ستون اول اضافه می‌کنم. 📸

بعد از اون، روی گزینه ویرایش تصویر کلیک می‌کنم و تصویر دلخواهم رو از کتابخانه وردپرس انتخاب می‌کنم. 🖼️😊

افزودن ویجت سربرگ به ستون:

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

افزودن ویجت ویرایشگر متن به ستون:

برای افزودن ویرایشگر متن به ستون، ابتدا باید ویجت ویرایشگر متن رو از پنل سمت راست پیدا کنی. برای این کار، در نوار جستجو در بالای پنل، کلمه “ویرایشگر متن” یا “Text Editor” رو تایپ کن. بعد از اینکه ویجت رو پیدا کردی، کافیه اون رو بگیری و داخل ستون درست زیر ویجت سربرگ رها کنی.

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

تا اینجا هر المانی که نیاز داشتم رو به ستون اضافه کردم، حالا وقتشه که بریم سراغ اصل ماجرا! 😎

روی ویرایش ستون کلیک می‌کنم و از تب استایل، رنگ پس‌زمینه رو به #0e1538 تغییر می‌دم.

5. افزودن کد CSS سفارشی به ستون ✨

حالا وقتشه که حرکت نهایی رو اجرا کنی! 🎯

اولین کاری که باید بکنی اینه که یه کلاس به ستون اختصاص بدی. برای این کار:

1. روی ویرایش ستون کلیک کن.
2. بعد برو به تب پیشرفته (Advanced) و در بخش کلاس CSS اسم کلاس رو وارد کن، مثلاً glowing-box.

حالا که کلاس رو به ستون اختصاص دادی، وقتشه که کد CSS رو وارد کنی! برو به بخش سفارشی CSS و کد زیر رو وارد کن:

.glowing-box::before{

content: "";
position: absolute;
inset: -3px;
background: linear-gradient(45deg,#00ccff,#0e1538,
#0e1538,#d400d4);
box-shadow: 0 0 0 20px #070c23;
z-index: -1;
border-radius: 10px; 

}
.glowing-box::after{

content: "";
position: absolute;
inset: -3px;
background: linear-gradient(45deg,#00ccff,#0e1538,
#0e1538,#d400d4);
z-index: -1;
filter: blur(20px);
border-radius: 10px; 

}

.glowing-box:hover::before{

content: "";
position: absolute;
inset: -3px;
background: linear-gradient(90deg,#00ccff,#0e1538,
#0e1538,#d400d4);
box-shadow: 0 0 0 20px #070c23;
z-index: -1;

}
.glowing-box:hover::after{

content: "";
position: absolute;
inset: -3px;
background: linear-gradient(90deg,#00ccff,#0e1538,
#0e1538,#d400d4);
z-index: -1;
filter: blur(20px);

}

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

ممنون که همراه ما بودی. 💖 اگر سوالی داشتی یا چیزی رو متوجه نشدی، حتما تو کامنت‌ها بپرس. همیشه در خدمتتم! 🙌