فلت سام نام یکی از قالبهای محبوب و پرطرفدار وردپرس است. با این قالب چند منظوره وردپرس وردپرس میتوانید هر نوع وب سایتی که مدنظرتان است بسازید. آموزش فلت سام به شما کمک میکند بخشها و تنظیمهای مختلف مربوط به این قالب را به صورت گام به گام و تصویری یاد بگیرید. در مقاله آموزش فلت سام همه چیز را در مورد آن خواهید دانست. با تم فور همراه باشید.
سر فصلهای این مقاله:
آموزش فلت سام: نصب قالب فلت سام
پوسته فلت سام یک پوسته یا قالب تجاری است و به صورت رایگان ارائه نمیشود. یعنی نمیتوانید از طریق مخزن وردپرس آن را نصب و فعال کنید. نیاز به فایل zip قالب را دارید که بتوانید قالب را نصب کنید. روش این کار هم ساده است که مقاله «آموزش نصب قالب وردپرس» را مطالعه کنید. با مطالعۀ این مقاله میتوانید با در اختیار داشتن فایل هر قالبی، از طریق داشبورد وردپرستان آن را نصب و فعال کنید.
آموزش کار با تنظیمات فلت سام
همانطور که اشاره کردیم، این قالب دارای قابلیتها و تنظیمهای زیادی است و یک قالب چندمنظوره تمام عیار محسوب میشود. در اولین بخش از آموزش فلت سام به معرفی تنظیمات و آپشنهای آن میپردازیم.
پس از نصب و فعال سازی، منوی Flatsome به لیست منوهای پیشخوان سایت اضافه میشود. در این منو، زیرمنوهای مختلفی برای دسترسی سریع به محیط تنظیمات قالب و شخصی سازی آن وجود دارد.
به جز منوی اضافه شده به پیشخوان، در بالای نوار مدیریت، گزینۀ دسترسی سریع فلت سام هم اضافه میشود. از نوار مدیریت هم میتوانید با جزئیات بیشتری به بخشهای مختلف قالب دسترسی دسترسی داشته باشید.
مثلاً تمامی آپشنهای تنظیمات پیشرفته و تنظیمات شخصی سازی از همین منوی نوار مدیریت پیشخوان قابل مشاهده هستند.
برای شروع، میخواهیم با محیط تنظیمات قالب در سمت پیشخوان آشنا شویم و به منوی «تنظیمات سایت» میرویم.
در محیط تنظیمات سایت فلت سام، دهها آپشن برای کنترل ویژگیها و قابلیتهای این پوسته قرار گرفتهاست. در اولین تنظیم، شما میتوانید کدهای جاوا اسکریپت خود را از طریق قالب به سایت اضافه کنید.
این ویژگی کمک میکند بدون نیاز به استفاده از افزونه جانبی، بتوانید با خود قالب، اسکریپت JS و حتی CSS هم به سایت تزریق کنید.
اسکریپتها و CSS ها را میتوانید در هرکدام از قسمتهای سورس کد سایت میشود تزریق کرد. مثلاً در تگ هدر Head یا در فوتر Footer یا در قسمت Body و این موضوع کنترل بیشتری را برای مدیر سایت ارائه میکند.
تنظیمات CSS دلخواه
در تب CSS دلخواه هم به مانند تب سراسری، میتوانید کدهای CSS مدنظرتان را براساس نوع صفحه نمایش به سایت اضافه کنید.
تنظیمات عملکرد سایت
در تب عملکرد سایت، شما میتوانید ویژگیهای عملکرد و بهینه سازی قالب را مدیریت و کنترل کنید. به عنوان نمونه، اگر ویژگ لیزی لود را برای تصاویر سایت میخواهید فعال کنید، کافیست گزینه آن را تیک بزنید.
همچنین چند آپشن دیگر مانند غیرفعال کردن فایلهای اسکریپت ایموجی، کتابخانه کد CSS گوتنبرگ (بلاک) و غیرفعال سازی jQuery Migrate در این تب تعبیه شده است.
تنظیمات تحویل محتوا
تب تحویل محتوا، یکی از بخشهای مهم در اینجای آموزش فلت سام است. در اینجا میتوان نوع بارگذاری اطلاعات قسمتهای مختلف سایت را تنظیم کرد. به عنوان نمونه، اگر میخواهید فیلتر صفحه دسته بندیها، آرشیو فروشگاه به صورت ایجکس (یعنی بدون رفرش مجدد صفحه) انجام شود و کاربر همان لحظه نتیجه فیلتر را ببیند، این گزینه را تیک بزنید.
اسکرول بینهایت به روشی برای نمایش محتوای صفحه گفته میشود که کاربر یا بازدیدکننده در صورت اسکرول کردن صفحه، قسمتی از محتوا برای او لود میشود. قالب اجازه میدهد این حالت را برای صفحات دسته بندی و آرشیو و فروشگاه فعال نمایید.
سؤال: حتماً باید این گزینه را فعال کنم؟ این بستگی به خودتان را دارد. اگر نمیخواهید نمایش محصولات داخل آرشیو و دسته بندی به صورت صفحه بندی باشد، این گزینه کاربرد دارد.
تنظیمات لودر سایت
قابلیت لودر سایت، یکی از ویژگیهای جالب و مدرن پوسته فلت سام به شمار میرود. چراکه بدون نیاز به نصب پلاگین اضافی، از طریق خود تنظیمات قالب میتوانید یک آیکون لودینگ ساده را با پس زمینه تنظیم کنید.
این لودینگ در هنگام لود صفحات نمایش داده میشود. شما میتوانید لودینگ را برای فقط صفحه اصلی یا کل صفحات تنظیم کنید.
همچنین امکان تنظیم رنگ پس زمینه لود هم وجود دارد. تنها در صورتی که برای سایتتان کاربردی است، میتوانید آن را فعال کنید.
تنظیمات جستجوی سایت
در تب جستجوی سایت، همانطور که از نامش پیداست، ما میتوانیم تنظیمات مربوط به جستجوی محصولات، نوشتهها و صفحات را سفارشی کنیم.
جستجوی زنده، همان جستجوی Live یا آنی و فوری است. پیشفرض این قابلیت فعال است و کمک میکند بازدیدکننده پس از وارد کردن نام محصول، نوشته یا کلمۀ مدنظرش؛ سریع جستجو انجام شود.
در فیلد نگهدارنده جستجو، میتوان متن داخل فیلد جستجو نوار جستجوی فلت سام را تغییر داد.
سایر تنظیمها هم از توضیحات آنها میشود فهمید چه کاربردی دارند. به عنوان مثال، اگر گزینۀ جستجوی محصول براساس کد SKU را فعال کنید، در صورتی که برای محصولات فروشگاه کد SKU را تنظیم کرده باشید، مشتری تنها با وارد کردن آن کد میتواند سریع کالا را پیدا کند.
تنظیمات اینستاگرام
وارد کردن اطلاعات تب اینستاگرام، زمانی کاربرد دارد که شما بخواهید پستهای صفحه اینستاگرام خود را در قسمتی از سایت نمایش دهید. مثلاً در ابزارک یا صفحهای خاص، بازدید کنندگان آخرین پستهای صفحه اینستاگرام را بازدیدکنندگان ببینند.
روش اتصال به سایت به اینستاگرام را تیم توسعه قالب توضیح دادهاند. کافیه روی لینک «نحوۀ دریافت توکن» کلیک کنید تا آموزش این کار را یاد بگیرید.
تنظیمات نقشههای گوگل
آی پی آی گوگل برای نمایش نقشههای گوگل در سایت کاربرد دارد. اگر میخواهید در صفحه تماس باما یا در سایر صفحات، لوکیشن مدنظرتان روی نقشه گوگل به درستی نمایش داده شود، نیاز است API که گرفتید را در فیلد مشخص شده قرار دهید.
سپس تنظیمات را ذخیره کنید و با این اقدام، نقشههای گوگل به خوبی در سایتتان قابل نمایش هستند.
تنظیمات حالت تعمیر
حالت تعمیر و نگهداری، یکی از قابلیتهای کاربردی فلت سام است. با این قابلیت میتوانید وب سایت خود را در حالت بزودی (Coming Soon) قرار دهید.
به عنوان مثال؛ اگر سایت نیاز به تغییرات اساسی دارد و نمیخواهید کاربران و بازدیدکنندگان تغییرات را همان لحظه مشاهده کنند و ابتدا بعنوان مدیریت، تغییرات را بررسی و از درستی آنها مطمئن شوید، این قابلیت کاربرد دارد.
در تنظیمات، اجازه دارید که متن حالت تعمیر و نگهداری را تغییر دهید. همچنین شما میتوانید یک رمز عبور یا متنی را در فیلد Bypass Key تنظیم کنید که با مراجعه به آن آدرس، بتوانید سایت را مشاهده کنید حتی اگر سایت در حالت تعمیر و نگهداری باشد.
آپشن انتخاب صفحه دلخواه، اجازه میدهد صفحهای که برای حالت تعمیر یا حالت بزودی ساختید را انتخاب کنید. این به این معناست که دیگر از صفحه پیشفرض فلت سام برای حالت استفاده نخواهد شد.
تنظیمات ۴۰۴
در اینجای آموزش فلت سام به تنظیمات مربوط به صفحه ۴۰۴ میرسیم. اینجا میتوانید یک صفحه اختصاصی برای ۴۰۴ تنظیم کنید.
زمانی که بازدید کننده، با صفحهای مواجه شد که این صفحه در دسترس نیست یا وجود ندارد، صفحه ۴۰۴ ظاهر میشود. شما میتوانید خودتان یک صفحه اختصاصی بسازید و از اینجا آن را انتخاب کنید.
تنظیمات ووکامرس
تنظیمات ووکامرس برای سایتهای فروشگاهی به سایت فروشگاهی کمک میکند که امکانات و ویژگیهای مهم فروشگاه را کنترل کنید.
در قالب چند منظوره فلت سام، امکانات فروشگاهی مانند: سواچ تصویر و رنگ برای متغیرهای محصول و ویژگیها وجود دارد. همچنین امکانات دیگری مانند ایجکسی کردن اضافه کردن محصول به سبد خرید در صفحه محصول، غیرفعال کردن نظرات، اضافه کردن تب اضافی به صفحه محصول در دسترس است.
به عنوان نمونه، اگر میخواهید یک تب اضافی به صفحه محصول اضافه کنید، کافیه در همین بخش گزینههای ووکامرس، عنوان تب و محتوای تب را اضافه کنید.
این ویژگی اجازه میدهد بدون نیاز به نصب پلاگین خاصی، بتوانید یک تب اضافی به صفحه محصول برای نمایش یک محتوا یا اطلاعات را اضافه نمایید.
تنظیمات حالت کاتالوگ
حالت کاتالوگ برای وب سایتها و فروشگاههایی کاربرد دارد که تنها هدفشان نمایش کالا یا محصولات است. منظور همان حالت ویترین است! در این حالت، میتوانید قیمت محصولات و دکمه خرید را مخفی کنید و تنها توضیحات و تصاویر کالا را نمایش دهید.
در این تب؛ چندین گزینه دیگر برای کنترل این قابلیت پوسته فلت سام تعبیه شده است.
تنظیمات نمونه کار
اگر سایتتان دارای نمونه کار است یا مربوط به حوزهای است که نیازمند درج نمونه کار است، میتوانید ویژگی نمونه کار را فعال کنید.
با فعالسازی این گزینه، یک منو به نام «نمونه کار» به منوهای پیشخوان سایت اضافه میشود.
تنظیمات موبایل
در تنظیمات موبایل، گزینههای برای کنترل نمایش سایت در موبایل وجود دارد. این بخش به تازگی اضافه شده و در حال حاضر تنها یک گزینه در دسترس است.
گزینه پشتیبانی از پارالاکس، زمانی کاربردی است که صفحات شما حاوی افکت اسکرول برای تصاویر یا پس زمینه باشد. اگر چنین صفحاتی ندارید، غیرفعال بگذارید بماند.
تنظیمات یکپارچه سازی
در بخش یکپارچه سازیها، گزینههایی برای یکپارچه سازی این پوسته وردپرس قرار گرفته است. گزینه استودیو فلت سام، برای استفاده از الگوهای آماده صفحه ساز قالب یعنی صفحه ساز UX است.
این گزینه پیشفرض فعال است و از طریق محیط صفحه ساز داخلی قالب، میتوانید از الگوهای آماده استفاده کنید.
تنظیمات بک آپ و نگهداری
قسمت بهروز رسانی برای آپدیت کردن قالب است که از این مورد عبور میکنیم و نیازی به اقدام خاصی نیست. در تب بک آپ و درونریزی، میتوان از تنظیمات بک آپ گرفت و از همین بک آپ در سایتهای بعدی که از Flatsome استفاده کردید، بک آپ را درونریزی (Import) کنید.
یا اینکه اگر میخواهید تغییراتی در تنظیمات بدهید، ابتدا در این قسمت، یک بک آپ از تنظیمات بگیرید و سپس تغییرات جدید را اعمال کنید تا در صورت بروز مشکلات احتمالی، بتوانید از بک آپ قبلی استفاده کنید.
آموزش فلت سام: آشنایی با تنظیمات قالب
در این بخش از آموزش فلت سام به معرفی محیط تنظیمات فلت سام رسیدیم. همانطور که متوجه شدید؛ فلت سام دارای دو محیط تنظیمات است. تنظیمات فلت سام در حالت شخصی سازی وردپرس تعبیه شده است.
برای رفتن به تنظیمات فلت سام، کافیست در منوی فلت سام روی گزینه تنظیمات قالب کلیک کنید.
تنظیمات قالب؛ شامل مجموعه تنظیمها و آپشنها برای کنترل ظاهر و عملکرد فلت سام است. برای دیدن آپشنهای هرکدام از موارد، فقط روی تنظیم مورد کلیک نمایید.
آموزش فلت سام: تنظیمات هدر فلت سام
اگر میخواهید تغییراتی در هدر بدهید یا شخصی سازی مدنظرتان را انجام دهید، کافیست در تنظیم هدر، در سمت چپ صفحه، هدر ساز اختصاصی قالب را بررسی کنید.
همانند تصویر بالا، به آسانی میتوانید با ماوس، مکان لوگو، مکان منو، و سایر موارد را تغییر دهید. برای تغییر مکان، المانها را بکشید و در موقعیت مورد نظر رها کنید.
اگر به پایین صفحه در هدر ساز (Header Builder) دقت کنید، المانهای مربوط به هدر در دسترس هستند. مثلاً اگر میخواهید یک منوی جدید اضافه کنید، کافیه المان منو (مثل منوی عمودی یا ثانویه) را با ماوس بگیرید و به داخل بخش هدر بکشید و رها کنید.
در تصویر راهنمای بالا، المان یا ویجت تماس باما را به بخش دوم هدر در کنار منوی اصلی کشیدیم و رها کردیم. برای دیدن تنظیمات آن ویجت، بعد از درج ویجت در موقعیت، روی آن کلیک کنید تا در سمت راست صفحه، تنظیمهای آن ظاهر شوند.
مثلاً در اینجا، روی ویجت آیکون جستجو کلیک کردیم و در سمت راست صفحه، تنظیمهای آن ظاهر شد. برای ویجت جستجو، میتوانیم متن نگهدارنده، عرض فرم، آیکون جستجو، نوع آیکون و استایل آن را شخصی سازی کنیم.
تغییر لوگو در فلت سام
برای تغییر لوگوی سایت، میتوانید از طریق تنظیمات قالب هم اقدام کنید. در تب لوگو و هویت سایت، مربوط به لوگوی سایت قرار گرفته است.
در اینجا میتوان تصویر لوگو، موقعیت نمایش لوگو، پدینگ و فاصلۀ لوگو و عرض لوگو را مشخص کرد.
تنظیمات نوار بالای در فلت سام
برای شخصی سازی نوار بالای هدر Flatsome کافیه به تنظیمات نوار بالا بروید و آپشنهایی که میخواهید را تغییر یا شخصی سازی کنید.
در تب نوار بالا، امکان تغییر ارتفاع، تغییر رنگ پس زمینه، تغییر استایل ناوبری و موارد دیگر در دسترس است.
پاپ آپ فرم عضویت فلت سام
فلت سام به صورت پیشفرض خودش دارای یک فرم جذاب برای ورود و عضویت به صورت پاپ آپ است. از طریق تنظیمات سایت، بخش هدر و سپس گزینههای حساب کاربری، میتوانید نحوۀ نمایش این پاپ آپ را کنترل کنید.
در حالت شخصی سازی، امکان تغییر موقعیت فرم (از چپ به راست یا وسطچین) وجود دارد. همچنین میتوانید رنگ پس زمینه را تغییر دهید یا یک تصویر پس زمینه انتخاب کنید.
ضمناً در بخش ورود (Login) میشود این پاپ آپ را غیرفعال کرد. مثلاً اگر میخواهید کاربر روی دکمۀ ورود هدر سایت کلیک کرد و به یک صفحه اختصاصی ثبت نام ورود (خودتان طراحی کردید) هدایت شود، کافیست که گزینۀ استایل ورود را روی لینک قرار دهید.
تغییر آیکون شبکه اجتماعی
با ادامۀ آموزش فلت سام در خدمت شما عزیزان هستیم، اینجا به روش تغییر آیکونهای شبکههای اجتماعی در نوار بالای هدر میپردازیم.
در همان تب هدر در شخصی سازی، در قسمت آیکونهای دنبال کردن، امکان تغییر آیکونها یا اضافه کردن آیکون اجتماعی جدید وجود دارد. همچنین میتوانید استایل آیکون، لینک آیکون و موارد دیگر را شخصی سازی کنید.
پیکربندی تنظیمات فونت فلت سام
برای تنظیم فونت برای سایت، در همان بخش شخصی سازی به تب استایل و گزینه تایپوگرافی بروید. لیست فونتها در اینجا قرار گرفته و تنها کاری که باید انجام دهید، انتخاب فونت است.
در تنظیمهای فونت یا تایپوگرافی، هر قسمت برای تنظیم فونت مشخص شده است. مثلاً در قسمت Headlines شما میتوانید فونت عنوانهای H1-H6 را تنظیم کنید.
برای فونت ناوبری یا همان منو و سایر بخشها، نیاز است که فونت را انتخاب و مشخص نمایید. توصیه میکنیم از یک یا حداکثر دو فونت برای سایت استفاده کنید. هرچه تعداد فونتهای سایت بیشتر باشد، وب سایت از نظر ظاهری، یکدست نخواهد بود و باعث کاهش لود سرعت صفحات نیز میشود.
کاستوم CSS در فلت سام
در همان بخش استایل، گزینهای به نام CSS سفارشی وجود دارد. این گزینه کاربردی است! زیرا شما میتوانید کدهای CSS دلخواه خود را از طریق خود قالب به سایت تزریق کنید.
یکی از مزایای این ویژگی در Flatsome امکان درج کدهای CSS براساس نوع دستگاه (تبلت و موبایل) است. مثلاً اگر میخواهید کدهای CSS در حالت موبایل فقط اعمال شوند، در باکس CSS سفارشی موبایل، کدها را قرار دهید.
برچسب یا لیبل برای محصولات
اگر میخواهید برای یک محصول، برچسب یا لیبل روی تصویر قرار دهید، به ویرایش محصول بروید. عنوان لیبل میتواند هرچیزی باشد! بستگی به استراتژی خودتان دارد.
در باکس اطلاعات محصول (در صفحه ویرایش محصول) تب Extra مربوط به فلت سام است. در این تب، به جز تنظیمهای انتخاب برچسب، تنظیمهای دیگری هم وجود دارد.
دو گزینۀ اول، یعنی Bubble سفارشی برای قرار دادن برچسب روی تصویر شاخص محصول است. همچنین اگر میخواهید برای محصول یک تب و توضیحات سفارشی در کنار تب دیدگاهها، توضیحات در صفحۀ محصول اضافه کنید، از همین جا امکان پذیر است.
یکی دیگر از امکانات موجو در این تب، درج ویدیوی محصول است. در صورتی که محصولتان دارای ویدیو است، با قرار دادن آدرس ویدیو یا لینک ویدیو (فقط از یوتیوب و ویمیو) ویدیو را به جای تصویر محصول، نمایش دهید.
آموزش قالب فلت سام: روش کار با صفحه ساز UxBuilder
به یکی از قسمتهای مهم آموزش فلت سام رسیدیم! باید بدانید که یکی از مزایای بسیار جذاب Flatsome داشتن صفحه ساز اختصاصی است. نام این صفحه ساز UXBuilder است و همۀ امکانات لازم برای طراحی و پیاده سازی صفحات سایت در آن تعبیه شده است.
برای ورود به محیط این صفحه ساز، از طریق نوار مدیریت سایت میتوانید گزینۀ ویرایش با uxbuilder را مشاهده و روی آن کلیک کند.
همچنین هنگام ویرایش یک صفحه یا ایجاد صفحۀ جدید، دکمۀ ویرایش با این صفحه ساز اختصاصی و قدرتمند قالب را خواهید دید.
زمانی که یک صفحه را با این صفحه ساز ویرایش میکنید، در سمت چپ صفحه؛ میتوانید المانهای مربوط به صفحه را ببینید. البته اگر صفحه با المانهای این صفحه ساز ساخته شده باشد.
فراموش نکنید، پس از انجام هر تغییری، به روز رسانی را انجام دهید.
برای ویرایش هر المان، کافیست با استفاده از ماوس، روی آن المان کلیک کنید تا در سمت چپ صفحه، تنظیمات و محیط ویرایش ظاهر شود.
اگر روی آیکون چرخ دنده که برای المانهای داخل صفحه ظاهر میشود کلیک کنید، چند تنظیم مانند: تنظیمات، کپی کردن، کپی بعنوان شورت کد وردپرس، ذخیره و حذف دیده میشود.
ضمناً در تنظیمات سمت چپ صفحه، همۀ المانها و بخشها و ردیفها و سایر تنظیمهای مربوط به صفحه قابل مشاهده و حتی شخصی سازی هستند.
اضافه کردن یک بخش جدید به صفحه
برای اضافه کردن یک بخش (سکشن) جدید در صفحه، کافیست روی آیکون بعلاوه (مثبت) کلیک کنید.
پس از کلیک، در سمت چپ، باکس واردن کردن محتوا یا همان اضافه کردن ویجت به صفحه ظاهر میشود. مثلاً اگر میخواهید دکمه به این بخش جدید اضافه کنید، ویجت Button را بگیرید و به داخل بخش بکشید و رها کنید.
کتابخانه فلت سام یا Flatsome Studio
ویژگی Flatsome Studio مهم در دیگر در آموزش قالب فلت سام، در واقع همان کتابخانه الگوهای آماده است. این ویژگی به شما کمک میکند که بدون آنکه خودتان صفحه را از صفر طراحی کنید، با استفاده از الگوهای آماده؛ اقدام به ساخت صفحه کنید.
این کتابخانۀ آنلاین دارای انواع طرح و چیدمان است. مثلاً طرح صفحه تماس باما، طرح صفحه وبلاگ و دهها الگوی دیگر که به شما در طراحی سریع صفحه کمک میکنند. پس از درونریزی (import) هر الگو، کافیست تنها متنها یا تصویر را تغییر دهید.
مهم: اگر هنوز نسخه اورجینال قالب فلت سام را ندارید، از این صفحه (خرید قالب فلت سام) میتوانید نسخۀ کامل را با نصب نامحدود و بدون لایسنس تهیه کنید.
جمع بندی آموزش فلت سام
در مقاله آموزش فلت سام به صورت گام به گام و تصویری با جزئیات، ویژگیها و قابلیتهای مهم قالب را معرفی کردیم. مطالعۀ آموزش فلت سام تم فور، میتواند نقطۀ شروع خوبی برای کسانی باشد که حتی با فلت سام کار نکردند.
به قولی با این آموزش، راه خواهید افتاد و روش کار کردن با این قالب پرطرفدار را یاد خواهید گرفت. امیدواریم از آموزش فلت سام لذت برده باشید و برای شما مفید واقع شده باشه؛ موفق باشید.
این مقاله چقدر براتون مفید بود؟
از ۱ تا ۵ امتیاز بدید
میانگین رتبه ۴.۵ / ۵. تعداد رای: ۲۰
همۀ تلاش مجموعهی تم فور اینه که بهترین آموزشها برای وردپرس رو به صورت کاملاً رایگان برای جامعهی وردپرس ایران تولید بکنه. امیدواریم آموزشهای ما براتون مفید واقع بشه :)