آموزش فلت سام [ویدئویی 2025]

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

اموزش ویدئویی قالب فلت سام

آموزش نصب قالب فلت سام از طریق پیشخوان وردپرس

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

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

 آماده‌سازی فایل قالب

 ابتدا نسخه‌ اورجینال قالب فلت ‌سام را تهیه کنید، معمولا از طریق ThemeForest یا منبع معتبر دیگر مانند ژاکت. پس از دانلود، فایل فشرده‌ای که باید آپلود شود را پیدا کنید. به این نکته توجه داشته باشید که فایل ZIP مربوط به قالب را دانلود کنید، نه مستندات یا فایل‌های اضافی. اگر فایل اشتباه انتخاب شود، نصب با خطا مواجه خواهد شد.

بارگذاری قالب در پیشخوان وردپرس

 وارد پیشخوان وردپرس شوید، سپس به مسیر «نمایش → پوسته‌ها → افزودن پوسته جدید» بروید و گزینه “بارگذاری پوسته” را انتخاب نمایید. در این قسمت، فایل ZIP قالب فلت‌ سام را از سیستم خود انتخاب کرده و روی “نصب” کلیک کنید تا وردپرس مابقی عملیات را به صورت خودکار انجام دهد.

 فعالسازی قالب والد

بعد از پایان فرایند نصب، وردپرس قالب فلت ‌سام را در لیست پوسته‌های نصب ‌شده نمایش می‌دهد. شما باید قالب والد(Parent Theme) را فعال کنید تا بتوانید از تنظیمات اصلی آن استفاده کنید و مقدمات سفارشی‌سازی یا دمو را آغاز نمایید.

 نصب قالب فرزند (Child Theme)

اگر می‌خواهید سفارشی‌سازی‌های شخصی روی فلت ‌سام انجام دهید (مثل تنظیم CSS، افزودن کد جدید یا تغییر ساختار قالب) بهتر است قالب فرزند (Child Theme) آن را نصب و فعال کنید. این کار برای این است که تغییرات شما در زمان به‌روزرسانی قالب اصلی حفظ شوند.

 فعال‌سازی افزونه‌ها برای راه‌اندازی اولیه

 پس از فعال‌سازی قالب (والد و فرزند)، فلت ‌سام معمولا از شما می‌خواهد چند افزونه مرتبط مانند ووکامرس را نصب کند؛ این افزونه‌ها را از طریق پنل افزونه‌ها نصب و فعال نمایید. در ادامه، ممکن است با یک پنجره راه‌اندازی یا Setup Wizard روبه‌رو شوید که به شما کمک می‌کند تنظیمات اولیه قالب را انجام دهید، دموها را وارد کنید یا لایسنس را ثبت نمایید (اگر نسخه خریداری‌ شده دارید).

 رفع مشکلات متداول در نصب از طریق پیشخوان

یکی از مشکلاتی که برخی کاربران با آن مواجه می‌شوند، این است که پس از نصب و فعال‌سازی، قالب به‌روزرسانی‌ها را دریافت نمی‌کند؛ این موضوع معمولا به خاطر عدم وارد کردن کد خرید(Purchase Code  یا تنظیمات DNS /  ) فایروال هاست است. همچنین در برخی موارد محدودیت آپلود از سمت هاست باعث خطا در نصب می‌شود.

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

آموزش ساخت صفحه اصلی سایت با UX Builder

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

 از طریق Flatsome Studio هم می‌توانید قالب‌های آماده یا بلوک‌های طراحی‌شده را ایمپورت کرده و به سرعت یک صفحه حرفه‌ای بسازید. این ابزار کاملا واکنش‌گرا است و تنظیمات اختصاصی مانند نمایش در موبایل، تبلت یا دسکتاپ در اختیار شما قرار می‌دهد. مراحل ساخت صفحه اصلی با UX Builder  عبارتند از:

1. ایجاد یک برگه جدید در وردپرس
2. ورود به ویرایش با UX Builder
3. فعال‌سازی و استفاده از Flatsome Studio
4. اضافه کردن سکشن‌های جدید
5. افزودن ردیف‌ها و ستون‌ها به سکشن
6. قرار دادن المان‌های مورد نیاز مثل بنر، متن، دکمه، اسلایدر
7. تنظیم پاسخگویی (رسپانسیو) برای موبایل و تبلت
8. ذخیره طرح به‌ عنوان (طرح آماده) برای استفاده مجدد
9. انتشار برگه به‌ عنوان صفحه اصلی سایت

آموزش ویرایش هدر و فوتر با ابزار درگ‌اند‌دراپ

ویرایش هدر و فوتر با ابزار درگ ‌اند ‌دراپ در فلت‌ سام فرایندی ساده اما حرفه‌ای است؛ زیرا شما کنترل کامل روی چیدمان و ظاهر بخش‌های اصلی سایت دارید و می‌توانید بدون نوشتن حتی یک خط کد، ساختار دلخواه خود را پیاده‌سازی کنید. این ابزار به شما اجازه می‌دهد لوگو، منو، ایکون‌های فروشگاهی، دکمه‌ها، متن و حتی بلوک‌های سفارشی را به‌ راحتی جابه‌جا کنید و نتیجه را همان لحظه مشاهده نمایید.

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

آموزش طراحی صفحه محصول فروشگاهی با صفحه‌ساز فلت سام

در صفحه‌ساز فلت سام با استفاده از UX Builder و UX Blocks می‌توانید طرح‌های متنوع نمایش محصول را بدون نوشتن کد بسازید، عناصر دلخواه (تصاویر گالری، تب ویژگی‌ها، دکمه خرید، محصولات مرتبط و غیره) را در محل مناسب قرار دهید و این چینش را به ‌صورت جهانی برای دسته‌ای از محصولات یا برای هر محصول به‌صورت جداگانه اعمال کنید.

 این روش هم از نظر سرعت توسعه مفید است و هم امکان آزمون و خطا. به عنوان مثال تست A/B طراحی‌های متفاوت را به سادگی ممکن می‌کند. در ادامه مراحل اصلی طراحی صفحه محصول فروشگاهی با صفحه‌ساز فلت سام آمده است:

برنامه‌ریزی ساختار محصول

 قبل از ورود به UX Builder، مشخص کنید کدام المان‌ها برای محصول شما ضروری‌ هستند: گالری تصاویر، قیمت و متغیرها، تب توضیحات و مشخصات، بررسی‌ها، محصولات مرتبط  CTA  یا دکمه فراخوان اصلی. این مرحله کمک می‌کند هنگام قرار دادن بلوک‌ها و ستون‌ها در UX Builder تمرکز خود را بر تجربه کاربر بگذارید و از ایجاد یک صفحه شلوغ یا پراکنده جلوگیری کنید. همچنین تشخیص دهید آیا نیاز به فیلدهای سفارشی دارید (مثلا سایز، رنگ‌ها با تصاویر جداگانه یا محتوای توضیحی اختصاصی) تا از پلاگین‌هایی مثل ACF یا قابلیت‌های خود ووکامرس قبل از طراحی استفاده کنید.

ایجاد یک UX Block برای صفحه محصول

در پیشخوان وردپرس به قسمتBlocks  یاUX Blocks  بروید و یک بلوک جدید بسازید تا قالب‌ِ سفارشی محصول داخل آن طراحی شود؛ استفاده از بلوک به شما این امکان را می‌دهد همان طرح را به ‌راحتی در چند محصول یا برای کل فروشگاه تکرار کنید. داخل UX Block با UX Builder بخش‌بندی کنید: مثلا hero محصول در بالا، ستون توضیحات/قیمت در کنار گالری، سپس تب‌ها و بخش‌های تکمیلی در پایین. ذخیره و انتشار بلوک باعث می‌شود در مرحله بعد بتوانید آن را به قالب محصول متصل کنید یا از آن برای محصولات مشخص استفاده نمایید.

 چیدمان اجزا با UX Builder

در ویرایش UX Block وارد UX Builder شوید و با درگ ‌اند ‌دراپ سطرها، ستون‌ها و المان‌ها را قرار دهید؛ از المان‌های ووکامرس (مانند product gallery، add to cart، product title و product price) استفاده کنید تا محتوای داینامیک محصول به‌ صورت خودکار خوانده شود. برای تصاویر محصول از گالری‌های با رزولوشن مناسب بهره ببرید و برای بخش توضیحات از تب‌ها یا آکاردئون استفاده کنید تا صفحه سازمان‌یافته و قابل‌اسکن باشد.

افزودن فیلدهای داینامیک و محتوای محصول

 اگر به اطلاعات اختصاصی برای هر محصول نیاز دارید (مانند ویژگی‌های فنی یا مقدار موجودی نمایش داده‌شده به شکل دلخواه)، از فیلدهای سفارشی (ACF یا افزونه‌های مشابه) استفاده کنید و سپس آن‌ها را در UX Builder با المان‌های داینامیک فراخوانی کنید.

برای نمایش نظرات و امتیازها از المان‌های ووکامرس بهره‌مند شوید و برای ارتقای سئو، بخش مشخصات فنی را به شکل جدول یا لیست منظم قرار دهید تا موتورهای جستجو و کاربران هر دو اطلاعات را سریع ببینند. نکته مهم: داده‌های بزرگ (مانند جداول طولانی) را داخل تب قرار دهید تا صفحه طولانی و گیج‌کننده نشوند.

 سفارشی‌سازی قالب به محصولات (Global / Category / Single)

پس از آماده ‌شدن بلوک، آن را می‌توانید به‌ صورت کلی برای همه محصولات، برای یک دسته محصول خاص به‌ عنوان طرح منحصربه‌فرد اعمال کنید؛ در فلت سام این کار از طریق تنظیمات Blocks → Assign یا در صفحه محصول از متاباکس مربوطه انجام می‌شود.

 اگر می‌خواهید تغییرات را به صورت مرحله‌ای (مثلا طرح متفاوت برای محصولات پرمحصول) در اختیار داشته باشید، بهترین روش ایجاد چند بلوک و اختصاص آن‌ها بر اساس دسته‌بندی یا برچسب محصول است تا مدیریت طرح در آینده ساده‌تر شود.

ارزیابی رابط و واکنش‌پذیری و بهینه‌سازی عملکرد

قبل از انتشار، صفحه محصول را روی چند دستگاه و مرورگر مختلف تست کنید تا از خوانایی، اندازه فونت‌ها، فاصله‌ها و دکمه‌های لمسی مطمئن شوید؛ UX Builder امکانات پیش ‌نمایش موبایل و تبلت دارد که در این مرحله بسیار کمک‌کننده است. برای بهبود سرعت بارگذاری، تصاویر را بهینه کنید (فشرده‌سازی بدون افت کیفیت و استفاده از WebP در صورت امکان).

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

آموزش تنظیمات منو و ساخت مگامنو در قالب فلت سام

تنظیم منوها و ساخت مگامنو در قالب فلت‌ سام یکی از قابلیت‌های قدرتمند UX Builder است که به شما این امکان را می‌دهد منوهای بزرگ، چندستونی و زیبا طراحی کنید؛ بدون نیاز به افزونه‌های پیچیده. بنابراین با ترکیب UX Blocks و گزینه طراحی منوی فلت‌ سام، می‌توانید بخش منوی دلخواه‌ خود را دقیقا مثل طراحی صفحات بسازید و آن را به آیتم‌های منو متصل کنید.

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

1. طراحی بلوک مخصوص مگامنو
2. رفتن به بخش نمایش و فهرست‌ها و انتخاب منوی مورد نظر
3. فعال‌سازی گزینه دیزاین در آیتم منو
4. نسبت دادن بلوک UX طراحی ‌شده به آن آیتم
5. ذخیره فهرست و بررسی نمایش منو در سایت
6. ویرایش و بهینه‌سازی نحوه چیدمان در بلوک UX
7. تست واکنش‌گرایی منو (موبایل، تبلت، دسکتاپ)

آموزش تغییر فونت، رنگ‌ها و ظاهر کلی سایت

قالب فلت ‌سام امکانات بسیار زیادی برای شخصی‌سازی ظاهر سایت دارد، از تغییر فونت گرفته تا انتخاب رنگ‌های اصلی و تاثیرگذاری بر استایل کلی صفحات. با استفاده از پنل Live Theme Options می‌توانید صدها گزینه مانند فونت گوگل، رنگ اصلی، لینک‌ها، دکمه‌ها و پس زمینه را زنده تغییر دهید و نتیجه را همان لحظه ببینید.

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

آموزش اضافه کردن بنر تبلیغاتی و دکمه‌های فراخوان (CTA)

سایت‌های فروشگاهی برای جلب توجه کاربران هدف، نیاز به المان‌های بصری قدرتمند دارند. در قالب فلت سام بنرهای تبلیغاتی و دکمه‌های فراخوان (CTA) را به ‌سادگی با استفاده از UX Builder اضافه کنید.

 زیرا بنرها می‌توانند پیام‌های تبلیغاتی یا معرفی محصولات ویژه را نمایش دهند و دکمه‌های CTA مسیر کاربر را به سمت خرید، ثبت‌نام یا مشاهده جزئیات هدایت کنند. این قابلیت نه ‌تنها ظاهر سایت را حرفه‌ای‌تر می‌کند؛ بلکه در افزایش نرخ تبدیل و تعامل کاربران تاثیر مثبتی دارد. مراحل افزودن بنر تبلیغاتی و دکمه‌های CTA در فلت سام به شرح زیر است:

 ایجاد سکشن جدید در UX Builder

 ابتدا وارد صفحه مورد نظر شوید و UX Builder را فعال کنید. سپس یک سکشن جدید برگزینید. این سکشن به‌ عنوان ظرف اصلی عمل می‌کند که می‌توانید بنر تبلیغاتی خود را در آن قرار دهید. بنابراین انتخاب درست محل سکشن اهمیت زیادی دارد؛ بهتر است در بخش‌های پر بازدید مثل بالای صفحه یا میان محتوای اصلی قرار بگیرد.

افزودن المان بنر (Banner Element)

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

افزودن دکمه CTA به بنر یا سکشن

 در تنظیمات بنر یا سکشن، گزینه افزودن دکمه را انتخاب کنید. متن دکمه باید کوتاه و مستقیم باشد (مثل “همین حالا خرید کنید” یا “ثبت‌نام کنید”). رنگ دکمه باید با پس‌ زمینه تضاد داشته باشد تا به ‌وضوح دیده شود. این دکمه‌ها مسیر کاربر را به صفحات کلیدی هدایت می‌کنند و باید در جای مناسب قرار گیرند.

لینک ‌دهی و تنظیم مسیر CTA

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

شخصی‌سازی طراحی سایت و تست عملکرد

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

آموزش مدیریت حالت موبایل و تنظیمات ریسپانسیو قالب

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

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

آموزش تنظیم سبد خرید و آیکون‌های سربرگ فروشگاه

جزئی‌ترین بخش‌های یک فروشگاه آنلاین همان چیزی است که تجربه خرید کاربر را شکل می‌دهد. در قالب فلت سام تنظیم سبد خرید و آیکون‌های سربرگ اهمیت زیادی دارد؛ زیرا این بخش‌ها همیشه در دید کاربر هستند و مسیر خرید را ساده‌تر می‌سازند.

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

آموزش ساخت بلاگ و انتشار مقاله با صفحه‌ساز فلت سام

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

• ورود به پیشخوان وردپرس
• ایجاد نوشته جدید
• فعال‌سازی UX Builder –
• طراحی و چیدمان بلاگ با المان‌ها
• افزودن تصویر شاخص و دسته‌بندی
• ذخیره و انتشار مقاله