MeDo

مولّد ترويسة بالذكاء الاصطناعي.

صِف أعلى صفحتك وسيبني MeDo الشريط بالكامل — الشعار وتركيب هوية العلامة، وشريط إعلانات اختياري فوقه، وسلوك تمرير لاصق بضبابية الزجاج المصنفر، وزر الحث على الإجراء. روابط التنقل تعيش داخله؛ والترويسة هي كل ما يُحيط بها.

الترويسة
الترويسة

الترويسة هي المكوّن الوحيد الموجود في كل صفحة على الإطلاق

أياً كان ما يتغيّر بين صفحة الهبوط والوثائق ومسار الدفع، تبقى الترويسة ثابتة. هذا يجعلها العنصر الذي يحمل هوية العلامة، ويجعلها أيضاً أغلى مكان لإفساد الأداء: ترويسة تنزلق أثناء تحميل الخطوط، أو لا تحفظ ارتفاعاً قبل الترطيب، تُنتج انزياحاً في التخطيط على كل صفحة يراها الزائر وليس على صفحة واحدة. وللسلوك اللاصق المضاعف نفسه؛ فضبابية تُعاد رسمها في كل إطار تمرير تُكلّفك سلاسة على مستوى الموقع كله. ولأنها تُولَّد مرة وتُستخدم في كل مكان، تستحق الترويسة وصفاً مفرطاً في التفصيل داخل الموجّه.

6 قالبًا

قوالب الترويسة التي يمكنك توليدها

كل قالب هو طلب حقيقي لا صورة. انسخه إلى أي محرّر ذكاء اصطناعي، أو شغّله في MeDo لتحصل على كود React و Tailwind مباشرة.

Fixed heightAcme

Sticky Header With a Frosted Scroll State

The default worth starting from: a pinned height and a blur that only appears once you have scrolled. Specifying the height is the whole point — a header that sizes to its content shifts on every page as the webfont swaps in.

Create a sticky website header with an explicit 64px height set on the container so the space is reserved before the logo and webfonts load. Logo mark plus wordmark on the left, four navigation links in the middle, one filled Get started button on the right. Start with a solid white background and a 1px bottom border, then switch to a semi-transparent surface with a backdrop blur once the page scrolls past 80px, transitioning over 200ms. Drive the state from an IntersectionObserver watching a 1px sentinel above the header rather than a scroll listener, so nothing runs on the scroll thread. Below 768px, replace the links with a hamburger that opens a drawer.

جرّبه في MeDo
Announcement barMega

Promo Bar Above a Sticky Row

Two stacked strips where only the lower one stays pinned. The trap is the sticky offset: dismiss the bar without recomputing it and the header floats 36px below the viewport top for the rest of the session.

Create a two-part header: a dismissible 36px announcement bar on an accent background with a short promo line, an inline link and a close button, and beneath it a 64px main row with logo, links and a CTA. Only the main row is sticky. Persist the dismissal in localStorage so the bar does not return on the next page, and recompute the sticky top offset when it is removed so the main row still pins flush to the viewport top. Render the bar server-side and hide it with a class rather than mounting it after hydration, so dismissing it never causes a visible reflow of the page below.

جرّبه في MeDo
TransparentShipfast

Transparent Over Hero, Solid on Scroll

For landing pages with a full-bleed hero behind the header. Everything that depends on the background — logo variant, link color, border, button style — has to flip in one state change, not four.

Create a header that overlays a full-bleed hero image: fully transparent with no border at the top of the page, with a light logo variant and white links. Once the page scrolls past the hero height, switch in a single state change to a solid white surface, a dark logo variant, dark links and a 1px bottom border, transitioning over 200ms. Keep the header height fixed at 72px in both states so the switch does not move the links. Add a scroll-margin-top equal to the header height on all headings so in-page anchors do not land behind the bar.

جرّبه في MeDo
Two-rowShop

Utility Row Over a Sticky Search Row

A storefront header where the top row scrolls away and the search row stays. Pinning both eats 100px of a phone viewport, which is most of a product image.

Create a two-row e-commerce header. The top row, 32px tall, carries a free-shipping message on the left and Track order, Help and account links on the right, and scrolls away with the page. The bottom row, 64px tall, holds the logo, a wide search input, a wishlist icon and a cart button with a count badge, and is the only row that stays sticky. Announce cart count changes through an aria-live="polite" region. Below 768px, collapse the top row entirely, keep logo, search icon and cart in the sticky row, and open search as a full-width overlay when the icon is tapped.

جرّبه في MeDo
App shellDocs

Fixed Header With a Sidebar Toggle

A docs header that has to coordinate with a sidebar below it. Reserve the toggle button's space at every breakpoint, otherwise the logo jumps sideways when the button appears at the tablet threshold.

Create a fixed 56px documentation header: a sidebar toggle button on the far left that is only interactive below 1024px but keeps its 40px slot reserved at every breakpoint so the logo never shifts, then the logo, a version switcher, a search button with a Command-K hint, a theme toggle and a GitHub link. Because the header is fixed rather than sticky, add matching top padding to the page body and set scroll-margin-top on every heading so deep links from search land below the bar. Give the toggle aria-expanded and aria-controls pointing at the sidebar element.

جرّبه في MeDo
StaticStudio

Oversized Wordmark, No Sticky

Not everything needs to be pinned. A tall static header that scrolls away gives an agency site its full viewport back, and removes the scroll listener along with it.

Create a static header for a design studio that scrolls away with the page rather than sticking: 120px tall, with an oversized lowercase wordmark on the left, a one-line location and availability note beneath it, and four right-aligned links in a light weight with wide letter spacing. No border, no background change, no scroll listener at all. Below 640px, reduce the height to 80px, keep the wordmark, and move the four links into a full-screen overlay opened by a text Menu button — labelled Menu rather than a hamburger icon, and closing on Escape with focus returned to the button.

جرّبه في MeDo

كيف تخصّص الترويسة الخاص بك

ثبّت الارتفاع قبل أن تُنسّق أي شيء

اطلب ارتفاعاً صريحاً للترويسة. يكلّف سطراً واحداً ويُزيل انزياح التخطيط الذي يحدث خلاف ذلك على كل صفحة أثناء تحميل الشعار وخطوط الويب، وهو أشهر تراجع في Core Web Vitals يُعاد إلى الترويسة.

قيّد معدل حالة التمرير

ضبابية backdrop تُبدَّل عبر مستمع تمرير خام تُعاد رسمها عشرات المرات في الثانية. حدّد أن معالج التمرير يجب تقييد معدله بـ requestAnimationFrame، أو أن يُدار بحرس IntersectionObserver، ليبقى التمرير سلساً على العتاد متوسط الفئة.

اعتبر شريط الإعلانات جزءاً من الترويسة

إذا أردت شريطاً ترويجياً فوق الصف الرئيسي، فصِفه في الموجّه نفسه ليُحسب ارتفاعه داخل إزاحة العنصر اللاصق. أما إضافته لاحقاً فتؤدي إلى تغطية المحتوى أو احتساب ارتفاعه مرتين بعد إخفائه.

حدّد تركيب هوية العلامة بدقة

قل ما إذا كنت تريد الرمز وحده، أو الرمز مع الشعار النصي، أو شعاراً نصياً يتقلّص إلى الرمز فقط على الشاشات الصغيرة. الترويسة هي المكوّن الوحيد في كل صفحة، ولذلك هنا يُفرض اتساق العلامة أو يُفقد.

من يستخدم مكوّن الترويسة

موقع منتج SaaS

ترويسة بيضاء بارتفاع 64px ثابت، بضبابية زجاجية بعد التمرير، وفوقها شريط إعلانات قابل للإخفاء يعرض عرضاً ترويجياً للإطلاق طوال مدة الحملة.

متجر إلكتروني

ترويسة من صفّين، يحمل الصف الأعلى لافتة شحن مجاني وروابط الحساب، ويضم الصف الأسفل البحث وسلة الشراء، مع بقاء الصف الأسفل وحده لاصقاً أثناء تمرير المتسوّق.

صفحة تسويقية أو هبوط

ترويسة شفافة فوق صورة بطل بعرض كامل تنتقل إلى خلفية صلبة عند التمرير، مع تحوّل الشعار من نسخة فاتحة إلى داكنة عند نقطة التوقف نفسها.

موقع وثائق المطورين

ترويسة ثابتة بمبدّل إصدارات ومُشغّل بحث، مع زر تبديل شريط جانبي يظهر تحت نقطة توقف الأجهزة اللوحية ويحفظ مساحته الخاصة حتى لا يُعاد تدفق محتوى الوثائق أبداً.

أنماط الترويسة لمواقع مختلفة

المكوّن الترويسة نفسه، مُهيّأ لنوع الموقع الذي يُنشر عليه.

01 / 06

SaaS Product Header

One fixed-height sticky strip with a brand lockup, links and a single CTA. Because it renders on every route, any layout shift here is multiplied across your whole Core Web Vitals field data rather than isolated to the landing page.

أنماط الترويسة وتنويعاته

اختر التنويعة التي تناسب بقية الصفحة، ثم ولّدها.

01 / 06

Fixed-Height Sticky Header

An explicit height on the container, pinned to the top. The height is not a styling detail — without it the strip resizes as the logo and webfonts resolve, and that shift lands on every page a visitor opens.

الترويسة في React و Next.js و Vue و Svelte

React و Next.js و Vue 3 و SvelteKit و Astro أو HTML صِرف — المكوّن الترويسة نفسه بست طرق للإضافة.

01 / 06

React Header

Keep the scroll state in the header itself with an IntersectionObserver on a sentinel div, not a scroll listener. Render it once above your router outlet so the observer is created once per session.

src/components/Header.tsx

export function Header() {
  const [pinned, setPinned] = useState(false)
  const ref = useRef(null)

  useEffect(() => {
    const io = new IntersectionObserver(
      ([e]) => setPinned(!e.isIntersecting)
    )
    io.observe(ref.current)
    return () => io.disconnect()
  }, [])

  return <header className={pinned ? 'backdrop-blur' : ''} />
}

كيف تضيف الترويسة إلى مشروعك

أربع خطوات، من اختيار قالب الترويسة إلى إطلاقه في الإنتاج.

01~30s

Pick a Header Template

Decide two things first: does the strip stay pinned, and is there an announcement bar. Those choices drive the sticky offset and the scroll state, and they are the awkward ones to retrofit.

02~10s

Copy the Prompt

Paste it into MeDo, Lovable, Bolt, v0 or Cursor. Keep the explicit pixel height and the sentinel-based scroll state in the text — those two sentences are what stop the header shifting and repainting on every page.

03~1min

Generate and Refine

You get React + Tailwind back with a live preview. Follow up in plain English — "make the blur stronger", "persist the dismissed announcement bar", "flip the logo variant on scroll".

04~2min

Mount It in Your Layout

Put the header above {children} in your root layout. If it is fixed rather than sticky, add matching top padding to the body and scroll-margin-top to your headings so anchor links do not land underneath it.

أسئلة شائعة حول الترويسة

ما هو مولّد الترويسة بالذكاء الاصطناعي؟

مولّد الترويسة بالذكاء الاصطناعي هو أداة تأخذ وصفاً بلغة طبيعية لموقعك وتُنتج تلقائياً HTML وCSS وJavaScript لمكوّن ترويسة كامل ومُنسّق. بدلاً من كتابة كود التخطيط من الصفر، تصف ما تريده وتحصل على كود عامل.

كيف أنشئ ترويسة موقع ويب بالذكاء الاصطناعي؟

افتح MeDo، اكتب موجّهاً مثل "أنشئ ترويسة لاصقة لوكالة تصميم مع شعار على اليسار وروابط للأعمال ومن نحن والتواصل وزر 'لنتحدث' على اليمين"، وMeDo يولّد المكوّن الكامل. يمكنك بعدها نسخ الكود أو متابعة تعديله بموجّهات متابعة.

هل يمكنني توليد ترويسة متجاوبة بالذكاء الاصطناعي؟

نعم. MeDo يولّد ترويسات موبايل أولاً بشكل افتراضي. أخبره بنقاط التوقف أو الأجهزة التي تهمك — "اجعلها تنطوي إلى قائمة هامبرغر تحت 768px" — وسيتعامل مع منطق الاستجابة نيابةً عنك.

ما الفرق بين الترويسة وشريط التنقل؟

الترويسة هي الشريط بعرض كامل أعلى كل صفحة: تركيب هوية العلامة، وشريط إعلانات اختياري، والسلوك اللاصق وسلوك التمرير، والحاوية التي تضم كل شيء. أما شريط التنقل فهو روابط التنقل الموجودة داخلها. ابنِ الترويسة عندما يهمّك شكل أعلى الصفحة وسلوكه في الموقع كله؛ وراجع مولّد شريط التنقل بالذكاء الاصطناعي عندما يكون سؤالك في الحقيقة عن هيكل الروابط والقوائم المنسدلة وقائمة الجوال.

كيف أمنع ترويستي من التسبب في انزياح التخطيط؟

أعطِ الترويسة ارتفاعاً صريحاً في الموجّه ليحفظ المتصفح المساحة قبل تحميل الخطوط والشعار، واحفظ مساحة لأي شريط إعلانات بدلاً من تركه يدفع المحتوى للأسفل بعد الترطيب. وإذا كانت الترويسة fixed بدلاً من position: sticky، فأضف حشواً علوياً مماثلاً لجسم الصفحة. اطلب من MeDo ارتفاع ترويسة ثابتاً وسيُطبّق الأمرين.

ما هو أفضل أداة ذكاء اصطناعي لتوليد ترويسات المواقع؟

MeDo مبني خصيصاً لتوليد مكوّنات مواقع فردية من الموجّهات، بما فيها الترويسات. بخلاف أدوات الدردشة الاصطناعية العامة، يفهم MeDo بنية المكوّنات ومتطلبات الوصول وأنماط تجربة المستخدم الحقيقية — لذا النتيجة أقرب لما يقدّمه مطور واجهات أمامية خبير.

بناء الترويسة الخاص بك الآن.

جرّب أي أمر — مجاني وبدون تسجيل.

ابدأ البناء مجاناًعرض الأسعار
شريط التنقل

شريط التنقل

صِف موقعك واحصل على شريط تنقل متجاوب بالكامل — بشعار وروابط تنقل وقوائم منسدلة وقائمة هامبرغر للجوال — مُولَّد من موجّه واحد. بدون قوالب، بدون تعقيد.

مكونات ذات صلة
قسم البطل

قسم البطل

اكتب جملة واحدة عمّا تبنيه واحصل على قسم بطل كامل فوق خط الطي — عنوان رئيسي، عنوان فرعي، دعوة لاتخاذ إجراء، وتخطيط — جاهز للنشر.

مكونات ذات صلة
مسار التنقل

مسار التنقل

الصق موجهاً واحصل على مكوّن تنقل مسار مصمم بالكامل في ثوانٍ. MeDo يفهم هيكل موقعك ويُنشئ ترميز مسار نظيف وسهل الوصول — جاهز للإدراج في أي صفحة.

مكونات ذات صلة