مشاوره: 23087 21 (98+)

طراحی سایت با قالب آماده

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

طراحی سایت و قالب آماده

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

public_html >>>> wp-content>>>>> Themes

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

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

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

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

هشدار : افرادی که قالب های پولی را به صورت نال شده برای دانلود قرار میدهند معمولا داخل قالب کدهای مخربی قرار میدهند که اگر شما از آن قالها در سایت خود استفاده کنید خیلی راحت میتوانند به اطلاعات هاست شما دسترسی پیدا کنند و سایت شما را هک کنند یا از آن سوء استفاده کنند

عدم پشتیبانی : طبیعی است وقتی شما یک قالب که رایگان دانلود شده را برای طراحی سایت خود استفاده میکنید وظیفه رفع تمام مشکلات آن هم بر عهده خود شماست و شرکت طراحی سایت یا شخصی نیست که پشتیبان شما باشد. یک سرویس پشتیبانی برای خدماتی ارائه میشود که پولی برای آن پرداخت کرده باشید و قالب رایگان هم مانند هاست رایگان هیچ پشتیبانی ندارد.

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

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

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

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

  1. استفاده از تصویر در طراحی سایت
  2. چرا باید طراحی سایت را تغییر دهید
  3. نقش فرم ها در طراحی سایت
  4. طراحی سایت فروشگاه اینترنتی
  5. رازهای طراحی سایت
  6. طراحی سایت و عواملی که باعث آزار کاربران میشود
  7. آیا طراحی سایت مهم است

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

کلمات کلیدی:

نقش طراحی سایت در موفقیت کسب و کار

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

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

طراحی سایت

طراحی سایت

قبل از شروع طراحی سایت باید ابتدا بخش های مهم سایت را پیدا کنید و آنها را در منوی اصلی و بالایی سایت قرار دهید و بخشهای دیگر را در منوهای کناری و ثانویه سایت قرار دهید.رعایت این نکته در طراحی سایت بسیار مهم است. چون با این کار وقتی شخصی وارد سایت شما میشود به راحتی میتواند صفحه مورد نظر خود را پیدا کند و به نوعی باعث افزایش زمان ماندگاری کاربر در سایت میشود که همان Time On Page است و هرچه کاربران زمان بیشتری در سایت بماند در حقیقت نرخ پرش سایت یا همان bounce rate کاهش پیدا میکند.

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

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

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

 

کلمات کلیدی:

آموزش واکنش گرا کردن قالب وردپرس

امروزه هر شخصی یک دستگاه متصل به اینترنت در اختیار دارد که ممکن است این دستگاه یک تلفن همراه , تبلت , لپ تاپ و حتی یک تلویزیون هوشمند باشد. با گسترش روز افزون کاربران اینترنت همراه و استفاده اکثریت مردم از این گجت ها برای وب گردی و انجام کارهای روزانه دیگر وقت آن شده که تمامی سایت ها به صورت واکنش گرا یا Responsive  طراحی شوند.مشکل اصلی در استفاده از دستگاه های همراه این است که سایت ها برای کامپیوترهای خانگی طراحی شده اند و برای سایز کوچک صفحه نمایش مناسب نیستند و به همین دلیل اکثریت افراد برای مرور سایتها با دستگاه های همراه با مشکلاتی از قبیل :

  • ریز بودن فونت سایت و نیاز به زوم کردم
  • بیشتر بودن عرض سایت از صفحه نمایش و نیاز به اسکرول به چپ و راست برای مطالعه متن
  • بهم ریختگی تصاویر و منو های سایت
  • عمل نکردن دکمه ها و لینک های موجود در سایت

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

قالب واکنش گرا

قبلا خواندید که سایت واکنش گرا چیست و چگونه کار میکند و در این مقاله قصد داریم به شما آموزش بدهیم که چگونه یک قالب معمولی را به صورت واکنش گرا تغییر دهید تا کاربرانتان بتوانند از هر دستگاهی سایت شما را به صورت کامل و درست مشاهده کنند.

در این مقاله واکنش گرا کردن قالب پیش فرض TwentyTen در سیستم مدیریت محتوی وردپرس آموزش داده میشود. اما شما میتوانید همین تغییرات را بر روی هر قالب دیگری انجام دهید و آن قالب را Responsive کنید.

برای شروع باید به سراغ فایل Style.css بروید و تغییرات زیر را در آن ایجاد کنید.

برای دسترسی به این فایل از مسیر زیر استفاده کنید :

پنل مدیریت وردپرس >>> نمایش >>> ویرایشگر >>> فایل Style.css

در مرحله اول کد زیر را در انتهای فایل لضلفه کنید :

@media only screen and (max-width: 480px) {
}

افزودن این کد به مرورگر میگوید که اگر سایز صفحه نمایش کاربر کوچکتر از ۴۸۰ پیکسل باشد نسخه موبایل سایت برای او نمایش داده شود.

۴۸۰ پیکسل حداکثر عرض  صفحه نمایش برای اکثر گوشی های هوشمند موجود در بازار است.

و برای پشیبانی از تبلت ها که عرض صفحه نمایش آنها ۹۵۹ پیکسل است از کد زیر استفاده کنید :

@media only screen and (min-width: 768px) and (max-width: 959px) {

}

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

مرحله بعد افزوردن کد زیر است :

#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {

width:400px;

}

و کد زیر :

#container {
width:100%;
}

مفهوم کدهای بالا این است که محتوی میتواند ۱۰۰% از عرض صفحه نمایش را بگیرد که عرض صفحه نمایش هم ۴۰۰ پیکسل تعریف شده است.

گام بعدی تصویر بالایی سایت یا header است. اگر میخواهید این تصویر مخفی شود از کد زیر :

#branding img {
display:none;
}

و اگر میخواهید تصویر هدر با عرض صفحه نمایش هم اندازه شود از کد زیر استفاده کنید :

#branding img {
width:100%
}

کد بالا مشخص میکند که اندازه تصویر هدر باید ۱۰۰% عرض صفحه نمایش باشد که در ابتدا ۴۰۰ پیکسل مشخص شد.

مرحله بعدی عنوان سایت است که برای مخفی کردن آن در نسخه موبایل از کد زیر :

#site-description{
display:none;
}

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

#site-description{
float:left;
}

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

#access{
width:100%;
}

و کد زیر برای هم عرض کردن بخش محتوی و نوار کناری  :

#content{
width:100%;
}

برای قسمت پست های سایت از کد زیر :

.hentry{
margin-left:-13px;
}

و برای مخفی کردن نوار کناری (ساید بار ) و هم عرض کردن نوار پایینی سایت (فوتر) از کد زیر استفاده کنید :

#primary{
display:none;
}

This one resizes the footer section:</pre>
<blockquote>
#footer{
width:100%;
}

و در پایان کد ها زیر برای کوچک کردن نام ورودپرس و حاشیه مشکی قسمت فوتر مورد استفاده قرار میگیرد :

#site-generator {
float:left;
margin-top:5px;
}

#colophon {
width:100%;
}

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

تمامی کد های بالا در کادر زیر وارد شده است که برای راحتی کار میتوانید از همین کادر تمام کدها را کپی کنید و در فایل style.css قرار دهید.

#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {
 
width:400px;
 
}

#container {
width:100%;
}

#branding img {
width:100%
}

#site-description{
float:left;
}

#access{
width:100%;
}
#content{
width:100%;
}

.hentry{
margin-left:-13px;
}

#primary{
display:none;
}
 
This one resizes the footer section:</pre>
<blockquote>
#footer{
width:100%;
}

#site-generator {
float:left;
margin-top:5px;
}
 
#colophon {
width:100%;
}

فایل ویدئویی زیر آموزش کامل انجام تغییرات برای واکنش گرا کردن قالب پیشفرض وردپرس میباشد :

کلمات کلیدی: