یافتن یک توسعه‌دهنده وب که تمام نیازهای طراحی وب شما را پوشش دهد، ممکن است چالش‌برانگیز باشد. شما با پلتفرم‌های مختلفی مواجه می‌شوید که انعطاف‌پذیری و قید‌های مختلفی در طراحی، سازگاری با موبایل و تجربه ساخت ارائه می‌دهند. به عنوان مثال، پلتفرم‌هایی که طراحی وب واکنش‌گرا را فراهم می‌کنند، احتمالاً با محدودیت‌های عمده‌ای در طراحی روبرو خواهند شد.
اما اکنون شما به خوش‌شانسی دارید! PageCloud به تازگی قابلیت “ستون‌ها” را معرفی کرده است که به شما امکان ویرایش آزاد واکنش‌گرا و انعطاف‌پذیری ساختار وب‌سایت را می‌دهد. با استفاده از این ابزار، می‌توانید تمام نیازهای طراحی‌تان را در یک پلتفرم تحت‌کنترل قرار دهید.
ستون‌ها چیستند؟
ستون‌ها به شما کمک می‌کنند بدون نیاز به دخالت توسعه‌دهنده یا یادگیری کدنویسی، وب‌سایت‌هایی با عملکرد بالا و ظاهر زیبا ایجاد کنید.
ستون‌ها طراحی‌ها و ساختار وب‌سایت‌ها را تسهیل می‌کنند. با استفاده از ستون‌ها، محتوای خود را به‌راحتی به صورت مرتب و منظم اضافه و تنظیم کنید. با استفاده از تکنولوژی‌های Flexbox و شبکه‌های CSS، محتوا به طور خودکار مرتب، تراز و ساختاردهی می‌شود تا در اندازه‌ها تغییر کند و در صفحات مختلف به درستی نمایش داده شود.
ستون‌ها طراحی وب‌سایت موبایل را آسان‌تر از همیشه می‌کنند. ستون‌ها به‌طور خودکار به یک طرح مخصوص موبایل تبدیل می‌شوند و می‌توانید محتوای خود را در ویرایشگر موبایل تنظیم و ویرایش کنید (در ادامه به آن پرداخته می‌شود).
اصول ستون‌ها
شما می‌توانید تا 3 ستون (حداقل 1 ستون) را در هر بخش اضافه کنید و به راحتی عرض و فاصله بین هر ستون را در منوی ویرایش تنظیم کنید.
در اینجا چهار نمونه از بخش‌ها با استفاده از ستون‌ها آورده شده است: یک بخش با 1 ستون (بالا، چپ)، یک بخش با 3 ستون با عرض یکسان (بالا، راست)، یک بخش با 2 ستون با عرض یکسان (پایین، چپ) و یک بخش با 2 ستون با عرض‌های مختلف (پایین، راست).
هر یک از ستون‌های شما می‌تواند با رنگ یا تصویر پس‌زمینه همراه باشد. همچنین، می‌توانید عناصر طراحی اضافی مانند گوشه‌های گرد و افکت‌های سایه اعمال کنید.
ستون‌ها دو نوع چیدمان را در اختیار شما قرار می‌دهند: دستی و خودکار. این دو نوع چیدمان تجربه‌ها و مزایای مختلفی ارائه می‌دهند که در ادامه به تفصیل به آنها می‌پردازیم. ستون‌های دستی به شما اجازه می‌دهند که از ویرایش بصری نهایی خود بهره‌برداری کنید. شما می‌توانید محتوا را به دلخواه خود روی یکدیگر قرار داده و تنظیم کنید، براحتی ترتیب دهید و همه‌چیز را طبق نیاز ترتیب دهید. این شامل متون، تصاویر، ویدیوها، دکمه‌ها، نمادها و سایر اشیاء است. در اینجا چند نمونه از چیدمان‌های جذاب و ترتیب داده شده با استفاده از ستون‌های دستی آمده است که می‌توانید با طرح‌بندی‌های دستی ما ایجاد کنید: این الگوها را در وب‌سایت خود به کار ببرید یا از مجموعه الگوهای ما استفاده کنید. بالا سمت چپ: اسلو، بالا سمت راست: عاج، پایین سمت چپ: شمالی، پایین سمت راست: نووو با استفاده از دکمه‌های تراز موجود در منوی ویرایش، می‌توانید برای کنترل بهتر طرح‌بندی خود، از ترازهای مختلف استفاده کنید. شما می‌توانید اشیاء را در وسط، بالا، پایین، چپ یا راست ستون قرار دهید. اگر تمایل به داشتن آزادی بیشتر در طراحی خود دارید، چیدمان‌های دستی برای شما عالی‌اند. این چیدمان‌ها ساده، انعطاف‌پذیر و دقیق هستند و به شما امکان ویرایش بصری موردنیاز را می‌دهند. در رتبه دوم، ستون‌های خودکار می‌آیند. ما شما را تشویق می‌کنیم که از ستون‌های خودکار استفاده کنید، زیرا این ویژگی با سازماندهی بهتر محتوایتان، سرعت کار را افزایش می‌دهد و به شما امکان می‌دهد وب‌سایت‌های زیبا و منعطفی ایجاد کنید که اندازه آنها به تغییرات در اندازه‌های مختلف پاسخ دهد. چیدمان‌های خودکار ساختار بیشتری نسبت به چیدمان‌های دستی دارند. این به این معناست که محتوای شما در داخل ستون به گونه‌ای سازماندهی می‌شود که امکان پاسخگویی به صفحه در ابعاد مختلف فراهم می‌شود. قبل از بررسی ویژگی‌های ستون‌های خودکار، نمونه‌هایی از طرح‌بندی‌های وب‌سایت‌های ایجاد‌شده با ستون‌های خودکار را مشاهده کنید: این الگوها را در وب‌سایت خود به کار گیرید یا از مجموعه الگوهای ما استفاده نمایید. بالا سمت چپ: کودا، بالا سمت راست: هاوس، پایین سمت چپ: وینیتو، پایین سمت راست: کسب و کار (این قالب پیش‌فراهم‌شده در اپلیکیشن موجود است! آن را در مجموعه کسب و کارهای ما بیابید) حالا بهتر است که ویژگی‌های ستون‌های خودکار را مورد بررسی قرار دهیم. این ویژگی‌ها به شما کمک می‌کنند تا طرح‌هایتان را توسعه دهید، محتوایتان را مرتب کنید و همزمان با حفظ پاسخگویی، وب‌سایت‌های جذابی ایجاد کنید.
تراز محتوا
با استفاده از کنترل‌های تراز موجود در منوی ویرایش، می‌توانید به سرعت تمام محتوای ستون خود را هم‌تراز کنید و موقعیت آنها را تغییر دهید. با یک کلیک ساده، محتوا به سمت چپ، راست، بالا، مرکز یا پایین تراز می‌شود و نیازی به تغییر جداگانه موقعیت هر عنصر نیست.
در اینجا می‌توانیم تأثیر تراز محتوا را در ستون‌ها ببینیم:
این قابلیت به شما اجازه می‌دهد تا به سرعت طراحی محتوای ستون خود را تغییر دهید و در عین حال مطمئن شوید که ستون‌ها به درستی به نمای تلفن همراه منتقل می‌شوند.
چیدمان محتوا
هنگامی که یک عنصر جدید (مانند جعبه متن، تصویر و غیره) را به ستون اضافه می‌کنید، به طور خودکار با دیگر عناصر در ستون سازماندهی و تراز می‌شود. این ویژگی تضمین می‌کند که عناصر شما به صورت کاملاً هم‌تراز در یک خط قرار می‌گیرند، بنابراین نیازی به نگرانی از تنظیم جداگانه موقعیت هر عنصر ندارید.
در این ویدئو می‌توانید نحوه ترتیب و تنظیم محتوا در ستون‌ها را ببینید:
این ویژگی به شما امکان می‌دهد به سرعت عناصر مختلف را در ستون‌ها مرتب کنید و در عین حال توانایی واکنش‌گرا بودن طرح‌بندی را حفظ کنید.
لایه‌بندی
می‌توان تأثیر Padding را مانند حاشیه‌های ستون خود تصور کرد. تنظیم Padding باعث ایجاد فاصله‌ای میان محتوا و حاشیه‌های ستون می‌شود و به تأکید بر رنگ یا تصویر پس‌زمینه ستون کمک می‌کند. می‌توانید اندازه Padding را به سادگی از طریق منوی ویرایش تغییر دهید.
در این جیف می‌توانید چگونگی تأثیر Padding را ببینید:
این ویژگی به شما امکان می‌دهد تمام محتوای ستون خود را به طور همزمان تغییر دهید. Padding ابزاری مفید برای ایجاد طرح‌بندی متوازنی است که از فضای خالی بهره می‌برد.
فاصله‌گذاری
ویژگی Space Below یک ابزار کارآمد برای ایجاد فاصله ثابت بین عناصر در ستون شماست. فاصله‌گذاری به ایجاد طرح‌های بصری زیبا و متوازن کمک می‌کند. به سادگی می‌توانید اندازه این فاصله‌گذاری را از طریق منوی ویرایش تنظیم کنید یا با کشیدن خودکار یک عنصر به زیر یک عنصر دیگر، فاصله‌ای ایجاد کنید.
ستون‌ها و ویرایش موبایل
کار با ستون‌ها، به ویژه در ایجاد وب‌سایت‌های موبایل، بسیار مفید است. داشتن یک وب‌سایت که به درستی بر روی دستگاه‌های موبایل کار کند، بخش مهمی از طراحی وب است و این فرآیند را بسیار ساده‌تر کرده‌ایم!
ستون‌ها به‌طور خودکار به یکدیگر هم‌تراز می‌شوند تا یک طراحی مخصوص موبایل ایجاد کنند، و محتوای شما را می‌توانید در ویرایشگر موبایل تنظیم کنید.
توجه: انتقال یک عنصر از یک ستون به ستون دیگر در حالت ویرای
شگر موبایل، تنظیمات نمای دسکتاپ را تغییر می‌دهد.
ستون‌های دستی به شما این امکان را می‌دهند که همچنان از ویرایش آزاد در ویرایشگر موبایل بهره ببرید. شما همچنان بازیابی آزادی ویرایش WYSIWYG را که در حالت دسکتاپ دارید، خواهید داشت.
ستون‌های خودکار محتوای شما را به‌طور خودکار سازماندهی می‌کنند تا با نمای موبایل سازگار باشد و شما را از نیاز به دوباره تنظیم محتوا در نسخه موبایل صرف‌نظر کنید.
در اینجا می‌توانید ستون‌های خودکار را در یک طراحی موبایل مشاهده کنید:
در قسمت چپ، ستون‌ها در نمای دسکتاپ قرار دارند، و در قسمت راست می‌توانیم نحوه تنظیم ستون‌ها برای ایجاد یک طرح موبایل را مشاهده کنیم. این فرآیند ساده و کارآمد است!
با استفاده از ستون‌ها به طراحی خود بیشتر تنوع بدهید
ما ستون‌ها را طراحی کرده‌ایم تا به شما کمک کنند به سرعت و آسانی وب‌سایت‌های موبایلی ایجاد کنید و امکان ساخت وب‌سایت‌هایی را با دقت دلخواه خودتان داشته باشید. با استفاده از ستون‌ها می‌توانید بیشتر کارهای طراحی خود را انجام داده و وب‌سایت‌هایتان را با استفاده از ابزار PageCloud به سطحی بالاتر از طراحی برسانید.
همین امروز با شروع آزمایش رایگان خود، می‌توانید با استفاده از ستون‌ها به عنوان یک طراح وب، تجربه جدیدی را آغاز کنید و بهبود‌های مختلفی را در طراحی خود ایجاد کنید.
برای مطالعه مقالات بیشتر در زمینه طراحی وب‌سایت با استفاده از ابزار PageCloud و همچنین یادگیری نکات و ترفندهای حیاتی برای طراحان وب در هر جایی، به وبلاگ ما سر بزنید.
