My Blog

GARAFIC THEME Studio Pro v5.0 | پلتفرم هوشمند طراحی، بازسازی و تولید قالب وردپرس، المنتور و HTML

GARAFIC THEME STUDIO 5.0

پلتفرم هوشمند طراحی، کپی و تولید قالب وب

دستهبندی قالب آماده:

فونت سراسری:

Table of Contents

Toggle

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

پنل تنظیمات و سفارشیسازی
${el.text}
- ${el.title || ”}
بخش واردشده مستقیم از بلوک‌های گوتنبرگ وردپرس (WP 6.7)

کتابخانه سکشنهای آماده

کلیک = افزودن

کتابخانه اختصاصی من

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

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

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

سیستم منوساز حرفهای و مگامنو

زبان منوی فعلی: فارسی (FA)

مدیریت کامل آیتمهای منو، زیرمنو، آیکون، لینک و استایل نمایش در هدر سایت:

رنگ متن منوها:

رنگ هاور / آیتم ویژه:

فاصله بین منوها (24px):

اندازه فونت منو (14px):

هدر چسبان (Sticky Header) نمایش دکمه سبد خرید در منو

درخت لایهها و سکشنها

جابهجایی و مخفیسازی

بوم زنده: دسکتاپ (100%) RTL (راستچین) برند: گرافیک تم

پنجره پیشنمایش و ویرایش زنده سایت (قابلیت اسکرول فعال)

https://www.garafic.ir/home

افزودن سریع بخش جدید به انتهای این صفحه:

پنل تنظیمات و سفارشیسازی

انتخاب نشده

موتور کپی یکجای کل وبسایت با آدرس اینترنتی (Full Website URL Cloner & Deep Crawler) کپی واقعی DOM + منوها + تصاویر + نوشتهها

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

آدرس کامل سایت مورد نظر برای کپی یکجا (Website URL):

تست سریع سایتهای معروف:

استخراج منوها و زیرمنوها کپی تمام تیترها و نوشتهها استخراج تصاویر، لوگو و کارتها راستچین و فارسیسازی خودکار

گزارش زنده خزنده و آنالیزگر DOM

آماده دریافت آدرس

// آدرس سایت را وارد کرده و دکمه «واکشی و کپی یکجای کل سایت» را بزنید…

// سیستم ابتدا از طریق پراکسی CORS سورس واقعی HTML سایت را بررسی میکند و در صورت مسدود بودن فایروال، ساختار کامل دامنه را بازسازی مینماید.

گزینه تکمیلی: جایگذاری مستقیم سورس HTML سایت مرجع (View-Source Paste)

اگر سایتی دارای قفل Cloudflare است، میتوانید کد HTML آن (Ctrl+U) را در کادر زیر قرار دهید تا تمام منوها، عکسها و نوشتههای آن خط به خط به سکشنهای قابل ویرایش تبدیل شوند:

<span class="text-[11px] text-slate-400">پس از کپی سایت، پنجره «کنترل کامل نوشتهها و منوها» نیز برای سفارشیسازی در دسترس شماست.</span>
                            <button onclick="parsePastedHtmlIntoFullSite()" class="bg-amber-500 hover:bg-amber-400 text-slate-950 font-black px-4 py-2 rounded-xl transition flex items-center gap-1.5">
                                <i class="fa-solid fa-wand-magic-sparkles"></i> تبدیل کد HTML به سایت کامل قابل ویرایش
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div id="modal-text-manager" class="fixed inset-0 bg-slate-950/85 backdrop-blur-md z-50 hidden flex items-center justify-center p-4">
        <div class="bg-slate-900 border border-purple-500/40 rounded-3xl max-w-6xl w-full max-h-[92vh] flex flex-col shadow-2xl overflow-hidden">
            
            <div class="px-5 py-4 bg-slate-950 border-b border-slate-800 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-2xl bg-purple-500/20 border border-purple-500/40 flex items-center justify-center text-purple-400">
                        <i class="fa-solid fa-font text-lg"></i>
                    </div>
                    <div>
                        <h3 class="text-sm font-black text-white flex items-center gap-2"><span class="ez-toc-section" id="%D9%85%D8%B1%DA%A9%D8%B2_%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%DA%A9%D8%A7%D9%85%D9%84_%D8%AA%D9%85%D8%A7%D9%85_%D9%86%D9%88%D8%B4%D8%AA%D9%87%D9%87%D8%A7%D8%8C_%D9%82%DB%8C%D9%85%D8%AA%D9%87%D8%A7_%D9%88_%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA%D9%87_%D9%85%D9%86%D9%88%D9%87%D8%A7%DB%8C_%D8%B3%D8%A7%DB%8C%D8%AA_Global_Text_Menu_Command_Center"></span>
                            مرکز کنترل کامل تمام نوشتهها، قیمتها و مدیریت پیشرفته منوهای سایت
                            <span class="text-[10px] bg-purple-500/20 text-purple-300 px-2.5 py-0.5 rounded-full">Global Text & Menu Command Center</span>
                        <span class="ez-toc-section-end"></span></h3>
                        <p class="text-[11px] text-slate-400 mt-0.5">ویرایش یکجای تمام تیترها، متنها، دکمهها، قیمتها، جستجو و جایگزینی کلمات (Find & Replace) و مدیریت منوها و زیرمنوهای هدر</p>
                    </div>
                </div>
                <button onclick="closeModal('modal-text-manager')" class="w-8 h-8 rounded-xl bg-slate-800 hover:bg-rose-600 text-slate-300 hover:text-white transition"><i class="fa-solid fa-xmark"></i></button>
            </div>

<div class="p-5 overflow-y-auto grid grid-cols-1 lg:grid-cols-12 gap-5 text-xs">
                
                <div class="lg:col-span-7 space-y-4 flex flex-col">
                    
                    <div class="bg-slate-950 border border-slate-800 rounded-2xl p-4 space-y-3">
                        <div class="flex flex-wrap items-center justify-between gap-2">
                            <h4 class="font-bold text-purple-300 flex items-center gap-1.5"><span class="ez-toc-section" id="%DB%B1_%D8%AC%D8%B3%D8%AA%D8%AC%D9%88_%D9%88_%D8%AC%D8%A7%DB%8C%DA%AF%D8%B2%DB%8C%D9%86%DB%8C_%DB%8C%DA%A9%D8%AC%D8%A7%DB%8C_%DA%A9%D9%84%D9%85%D8%A7%D8%AA_%D8%AF%D8%B1_%DA%A9%D9%84_%D8%B3%D8%A7%DB%8C%D8%AA_Find_Replace"></span>
                                <i class="fa-solid fa-magnifying-glass-arrow-right"></i> ۱. جستجو و جایگزینی یکجای کلمات در کل سایت (Find & Replace)
                            <span class="ez-toc-section-end"></span></h4>
                            <div class="flex items-center gap-1.5">
                                <button onclick="scaleAllSiteFonts(2)" class="bg-slate-800 hover:bg-indigo-600 text-slate-200 px-2.5 py-1 rounded-lg font-bold transition" title="بزرگ کردن تمام نوشتههای سایت">A+ بزرگتر کردن خط</button>
                                <button onclick="scaleAllSiteFonts(-2)" class="bg-slate-800 hover:bg-indigo-600 text-slate-200 px-2.5 py-1 rounded-lg font-bold transition" title="کوچک کردن تمام نوشتههای سایت">A- کوچکتر کردن خط</button>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
                            <input type="text" id="bulk-find-input" placeholder="عبارت فعلی (مثلاً: گرافیک تم)" class="bg-slate-900 border border-slate-700 rounded-xl px-3 py-1.5 text-white">
                            <input type="text" id="bulk-replace-input" placeholder="عبارت جایگزین جدید..." class="bg-slate-900 border border-slate-700 rounded-xl px-3 py-1.5 text-emerald-300 font-bold">
                            <button onclick="executeBulkTextReplace()" class="bg-purple-600 hover:bg-purple-500 text-white font-bold py-1.5 px-3 rounded-xl shadow transition">
                                جایگزینی در کل سایت و منوها
                            </button>
                        </div>
                    </div>

<div class="bg-slate-950 border border-slate-800 rounded-2xl p-4 space-y-3 flex-1 flex flex-col">
                        <div class="flex items-center justify-between">
                            <h4 class="font-bold text-slate-200 flex items-center gap-1.5"><span class="ez-toc-section" id="%DB%B2_%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%D8%AA%D9%85%D8%A7%D9%85_%D9%86%D9%88%D8%B4%D8%AA%D9%87%D9%87%D8%A7%D8%8C_%D8%AA%DB%8C%D8%AA%D8%B1%D9%87%D8%A7%D8%8C_%D8%AF%DA%A9%D9%85%D9%87%D9%87%D8%A7_%D9%88_%D9%82%DB%8C%D9%85%D8%AA%D9%87%D8%A7%DB%8C_%D8%B5%D9%81%D8%AD%D9%87"></span>
                                <i class="fa-solid fa-list-check text-indigo-400"></i> ۲. فهرست تمام نوشتهها، تیترها، دکمهها و قیمتهای صفحه
                            <span class="ez-toc-section-end"></span></h4>
                            <span class="text-[11px] text-slate-400">هر تغییر بلافاصله روی سایت اعمال میشود</span>
                        </div>
                        <div id="global-texts-editor-list" class="space-y-2.5 max-h-[380px] overflow-y-auto pr-1">
                            
                        </div>
                    </div>
                </div>

<div class="lg:col-span-5 bg-slate-950 border border-slate-800 rounded-2xl p-4 flex flex-col justify-between space-y-4">
                    <div class="space-y-3 flex-1 flex flex-col">
                        <div class="flex items-center justify-between">
                            <h4 class="font-bold text-emerald-400 flex items-center gap-1.5"><span class="ez-toc-section" id="%DB%B3_%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%DA%A9%D8%A7%D9%85%D9%84_%D9%85%D9%86%D9%88%D9%87%D8%A7%D8%8C_%D8%B2%DB%8C%D8%B1%D9%85%D9%86%D9%88%D9%87%D8%A7_%D9%88_%D8%AF%DA%A9%D9%85%D9%87_%D9%88%DB%8C%DA%98%D9%87_%D9%87%D8%AF%D8%B1"></span>
                                <i class="fa-solid fa-sitemap"></i> ۳. مدیریت کامل منوها، زیرمنوها و دکمه ویژه هدر
                            <span class="ez-toc-section-end"></span></h4>
                            <div class="flex items-center gap-1.5">
                                <button onclick="addMenuItem(); renderAdvancedMenuManager()" class="bg-emerald-600 hover:bg-emerald-500 text-white font-bold px-3 py-1 rounded-xl text-[11px]">
                                    + افزودن منوی اصلی
                                </button>
                                <button onclick="addMegaMenuPresetItem(); renderAdvancedMenuManager()" class="bg-gradient-to-r from-pink-600 to-purple-600 hover:opacity-95 text-white font-bold px-3 py-1 rounded-xl text-[11px]">
                                    + افزودن مگامنو چندستونه
                                </button>
                            </div>
                        </div>
                        <p class="text-[11px] text-slate-400 leading-relaxed">
                            برای هر آیتم منو میتوانید عنوان، لینک، آیکون، نشان ویژه (Badge) و <strong>زیرمنوهای آبشاری (Submenus)</strong> تعریف کنید:
                        </p>

<div class="pt-3 border-t border-slate-800 flex items-center justify-between">
                        <span class="text-[11px] text-slate-400">تغییرات بهصورت زنده در بوم طراحی قابل مشاهده است</span>
                        <button onclick="closeModal('modal-text-manager')" class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-bold px-5 py-2 rounded-xl shadow">
                            تأیید و بازگشت به بوم سایت
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div id="modal-content-to-site" class="fixed inset-0 bg-slate-950/85 backdrop-blur-md z-50 hidden flex items-center justify-center p-4">
        <div class="bg-slate-900 border border-amber-500/40 rounded-3xl max-w-5xl w-full max-h-[92vh] flex flex-col shadow-2xl overflow-hidden">
            
            <div class="px-5 py-4 bg-slate-950 border-b border-slate-800 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-2xl bg-amber-500/20 border border-amber-500/40 flex items-center justify-center text-amber-400">
                        <i class="fa-solid fa-wand-magic-sparkles text-lg"></i>
                    </div>
                    <div>
                        <h3 class="text-sm font-black text-white flex items-center gap-2"><span class="ez-toc-section" id="%D9%85%D9%88%D8%AA%D9%88%D8%B1_%D9%87%D9%88%D8%B4%D9%85%D9%86%D8%AF_%D8%AA%D8%A8%D8%AF%DB%8C%D9%84_%D9%85%D8%B7%D8%A7%D9%84%D8%A8%D8%8C_%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA_%D9%88_%D8%B9%DA%A9%D8%B3%D9%87%D8%A7_%D8%A8%D9%87_%D9%88%D8%A8%D8%B3%D8%A7%DB%8C%D8%AA_%DA%A9%D8%A7%D9%85%D9%84_Content_Photos_to_Website_AI"></span>
                            موتور هوشمند تبدیل مطالب، مقالات و عکسها به وبسایت کامل
                            <span class="text-[10px] bg-amber-500/20 text-amber-300 px-2.5 py-0.5 rounded-full">Content & Photos to Website AI</span>
                        <span class="ez-toc-section-end"></span></h3>
                        <p class="text-[11px] text-slate-400 mt-0.5">متنها، سرفصلها، توضیحات محصولات یا مقالات خود را به همراه عکسها وارد کنید تا بهصورت خودکار یک سایت حرفهای با سکشنبندی استاندارد ساخته شود</p>
                    </div>
                </div>
                <button onclick="closeModal('modal-content-to-site')" class="w-8 h-8 rounded-xl bg-slate-800 hover:bg-rose-600 text-slate-300 hover:text-white transition"><i class="fa-solid fa-xmark"></i></button>
            </div>

<div class="p-5 overflow-y-auto grid grid-cols-1 lg:grid-cols-12 gap-5 text-xs">
                
                <div class="lg:col-span-7 space-y-4">
                    <div class="bg-slate-950 border border-slate-800 rounded-2xl p-4 space-y-3">
                        <div class="flex flex-wrap items-center justify-between gap-2">
                            <h4 class="font-bold text-slate-200 flex items-center gap-1.5"><span class="ez-toc-section" id="%DB%B1_%D9%88%D8%B1%D9%88%D8%AF_%D9%85%D8%B7%D8%A7%D9%84%D8%A8%D8%8C_%D8%B3%D8%B1%D9%81%D8%B5%D9%84%D9%87%D8%A7_%D9%88_%D8%AA%D9%88%D8%B6%DB%8C%D8%AD%D8%A7%D8%AA_%D8%B3%D8%A7%DB%8C%D8%AA"></span>
                                <i class="fa-solid fa-pen-to-square text-amber-400"></i> ۱. ورود مطالب، سرفصلها و توضیحات سایت
                            <span class="ez-toc-section-end"></span></h4>
                            <div class="flex items-center gap-1.5">
                                <button onclick="fillSampleContentForGenerator('company')" class="text-[10px] bg-slate-800 hover:bg-indigo-600 text-slate-300 hover:text-white px-2.5 py-1 rounded-lg transition">نمونه مطلب شرکتی</button>
                                <button onclick="fillSampleContentForGenerator('shop')" class="text-[10px] bg-slate-800 hover:bg-pink-600 text-slate-300 hover:text-white px-2.5 py-1 rounded-lg transition">نمونه لیست محصولات</button>
                                <button onclick="fillSampleContentForGenerator('magazine')" class="text-[10px] bg-slate-800 hover:bg-emerald-600 text-slate-300 hover:text-white px-2.5 py-1 rounded-lg transition">نمونه مقاله و مجله</button>
                            </div>
                        </div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div>
                                <label class="block text-slate-400 mb-1">عنوان اصلی سایت یا برند:</label>
                                <input type="text" id="c2s-site-title" value="آژانس خلاقیت و فناوری نوین" class="w-full bg-slate-900 border border-slate-700 rounded-xl px-3 py-1.5 text-white font-bold">
                            </div>
                            <div>
                                <label class="block text-slate-400 mb-1">شعار یا زیرعنوان در هیرو سکشن:</label>
                                <input type="text" id="c2s-site-subtitle" value="تبدیل ایدهها، مقالات و تصاویر شما به وبسایتهای استاندارد جهانی" class="w-full bg-slate-900 border border-slate-700 rounded-xl px-3 py-1.5 text-slate-200">
                            </div>
                        </div>

<div>
                            <label class="block text-slate-400 mb-1">
                                متن کامل مطالب یا بخشهای سایت (هر پاراگراف یا خط جدید بهصورت هوشمند به سکشن، کارت یا بلوک محتوا تبدیل میشود):
                            </label>
                            <textarea id="c2s-raw-text" rows="8" placeholder="مطالب خود را اینجا بنویسید یا Paste کنید..." class="w-full bg-slate-900 border border-slate-700 rounded-xl p-3 text-slate-100 leading-relaxed focus:outline-none focus:border-amber-500">طراحی تخصصی رابط کاربری و تجربه کاربری | ما با تحلیل دقیق نیاز مخاطبان شما، مدرنترین صفحات وب را با استانداردهای روز طراحی میکنیم. | مشاوره رایگان

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

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

ساختار چیدمان مطالب:

تم رنگی سایت تولیدی:

نحوه اعمال در پروژه:

۲. آپلود عکسهای مطالب (تکی یا گروهی)

۳ تصویر آماده

عکسهای آپلودشده بهترتیب به هیرو سکشن، کارتهای مطالب و گالری تصاویر اختصاص داده میشوند:

آپلود چند عکس همزمان

تولید خودکار هدر، هیرو، سکشنهای مطالب، گالری و فوتر آماده ساخت

فهرست زبانهای استاندارد دنیا (کلیک روی «انتخاب و ترجمه زنده» = تغییر فوری زبان سایت)

افزودن زبان جدید به سیستم

تعیین زبان پیشفرض و جایگزین

تست زنده متنهای ترکیبی (BiDi Mixed Text Tester)

جدول ترجمه صفحات، منوها، دکمهها و بخشها (با حفظ محتوای اصلی)

آدرسدهی مستقل و سئوی چندزبانه (Multilingual SEO & hreflang)

۲. خروجی چندزبانه برای HTML، وردپرس و المنتور

موتور کپی یکجای کل وبسایت با آدرس اینترنتی (Full Website URL Cloner & Deep Crawler) کپی واقعی DOM + منوها + تصاویر + نوشتهها

گزارش زنده خزنده و آنالیزگر DOM

گزینه تکمیلی: جایگذاری مستقیم سورس HTML سایت مرجع (View-Source Paste)

۲. آپلود عکسهای مطالب (تکی یا گروهی)

مرکز جامع مدیریت رسانه (آپلود عکس، موزیک، ویدیو و درج از طریق آدرس URL)

۱. آپلود مستقیم فایل از کامپیوتر یا موبایل

۲. افزودن محتوا با آدرس مستقیم اینترنتی (URL)

کتابخانه فایلهای آپلودشده و لینکها (Asset Manager)

سیستم هوشمند شناسایی و استخراج لوگو (Smart Logo Detector & Logo Studio) موتور OCR + SVG Vectorizer

۱. اسکن هدر سایت یا آپلود تصویر لوگو

۲. مشخصات برند و تنظیمات نمایش در قالب

هسته هوش مصنوعی بازسازی سایت (AI Website Clone Studio)

تنظیمات موتور بازسازی بصری هوش مصنوعی:

ویرایشگر مستقیم کد (Code Studio)

مرکز خروجی استاندارد تجاری (Theme Exporter Engine)

۱. قالب نصبی وردپرس (ZIP)

۲. قالب استاندارد المنتور (JSON)

۳. پکیج HTML5 + CSS3

سیستم کنترل کیفیت، امنیت و تست خروجی (Automated QA Engine)

مرکز جامع چندزبانه، بومیسازی بینالمللی، سئوی جهانی (hreflang) و ذخیرهسازی پروژه Global i18n & Multilingual Engine

فهرست زبانهای استاندارد دنیا (کلیک روی «انتخاب و ترجمه زنده» = تغییر فوری زبان سایت)

افزودن زبان جدید به سیستم

تعیین زبان پیشفرض و جایگزین

۱. انتخاب کشور و منطقه جغرافیایی

۲. تنظیم واحد پول و قیمتهای فروشگاه

۳. قالب تاریخ، ساعت و شماره تلفن

قوانین سازگاری خودکار جهت، فونت و چیدمان

تست زنده متنهای ترکیبی (BiDi Mixed Text Tester)

جدول ترجمه صفحات، منوها، دکمهها و بخشها (با حفظ محتوای اصلی)

آدرسدهی مستقل و سئوی چندزبانه (Multilingual SEO & hreflang)

۱. ذخیرهسازی پایدار پروژه و نسخهها (Auto-Save & Snapshots)

۲. خروجی چندزبانه برای HTML، وردپرس و المنتور

مرکز تبادل دوطرفه المنتور (تمامی نسخهها)، گوتنبرگ و وردپرس (Universal Elementor & Gutenberg Bridge) پشتیبانی از Container v3.26+ / Section / Gutenberg / Paste از سایت دیگر

۱. پذیرش کپی از سایت دیگر المنتور یا گوتنبرگ (Cross-Site Paste)

۲. کپی و خروجی سازگار با تمامی نسخههای المنتور، گوتنبرگ و وردپرس