تحتاج إلى تغيير رأس الصفحة مع التمرير Elementor ?
هناك العديد من سلوكيات الترويسة التي يمكنك تحقيقها من خلال إليمنتور برو. واحد منهم هو تغيير رأس بآخر عند التمرير في الصفحة. هذا المقال سيريك كيف.
Elementor برو كما تعلم يأتي مع ميزة باني الموضوع للسماح لك بإنشاء رأس مخصص على الخاص بك موقع على شبكة الإنترنت ووردبريس. بفضل هذه الميزة ، لم تعد بحاجة إلى الاعتماد على ما تقدمه وورد موضوع عندما يتعلق الأمر بتخصيص الرؤوس ، والتي تكون عادةً محدودة.
يمكنك إضافة أي عنصر تريده ، واستخدام أي إعداد طباعة تريده ، وتعيين أي سلوك تريده.
Elementor يحتوي Pro على خيار تعديل مدمج لإضافة رأس مثبت. سنستخدم هذه الوظيفة لإنشاء رأس يتغير أثناء تمرير الصفحة. ستكون CSS المخصصة مطلوبة أيضًا لهذا النوع من سلوك الرأس.
لقراءة أيضا: كيفية إنشاء رأس مخصص في WordPress باستخدام Elementor
فيما يلي مثال على رأس يتغير أثناء تمرير الصفحة.
الخطوة 1: إنشاء رأس مخصص
قبل أن تبدأ ، تأكد من ترقية Elementor الخاص بك إلى الإصدار المحترف لأن Theme Builder متاح فقط في Elementor Pro. يمكنك الحصول على الإصدار الاحترافي من Elementor Pro على ملف الموقع الرسمي.
بمجرد أن تكون جاهزًا ، انتقل إلى القوالب -> مُنشئ القوالب في لوحة تحكم WordPress الرئيسية الخاصة بك. في لوحة معلومات أداة إنشاء السمات ، قم بتمرير المؤشر فوق علامة التبويب رأس وانقر على الأيقونة المزيد لإنشاء قالب رأس جديد.
في مكتبة القوالب التي تظهر ، يمكنك تحديد قالب رأس محدد مسبقًا تريده. أو ، إذا كنت تريد إنشاء الرأس من البداية ، يمكنك فقط إغلاق مكتبة القوالب لفتح محرر Elementor.
اكتشف أيضًا: كيفية إنشاء أشكال مخصصة في Elementor
في هذه المقالة ، سننشئ قالب الرأس من البداية.
ابدأ في إنشاء العنوان الخاص بك عن طريق إضافة قسم ، ثم قم بإضافة العناصر الضرورية وإنشاء الأنماط وفقًا لذلك.
بمجرد إضافة العناصر الضرورية وإنشاء الأنماط ، انتقل إلى علامة التبويب متقدم. تحت الكتلة متقدم، اضبط الفهرس Z على 100 وأضف فئة CSS.header-1
ثم قم بتكرار قسم الرأس الذي أنشأته للتو أعلاه. سيكون القسم المكرر هو العنوان الثاني ، والذي سيظهر عند تمرير الصفحة لأسفل.
قم بتحرير الرأس المكرر. يمكنك إضافة المزيد من العناصر أو إزالة العناصر الموجودة. يمكنك أيضًا تغيير الخلفية. كل ما تريد. بمجرد اكتمال التحرير ، انتقل إلى علامة التبويب متقدم. تحت الكتلة إعدادات متقدمة، أعد تسمية فئة CSS إلى header-2.
ثم افتح الكتلة آثار الحركة. في القائمة المنسدلة لزج، ضبط ل ★★★★. يمكنك تحديد إزاحة التأثيرات في الحقل إزاحة التأثيرات. ستحدد القيمة التي تحددها هنا عمق التمرير قبل أن يحدث التأثير (ثابت في هذه الحالة).
عند الانتهاء من تحرير مقطعي الرأس ، قم بتغيير ترتيبهما.
قم بتحرير القسم السفلي وتعيين الهامش السلبي ليكون أعلى القسم العلوي. للقيام بذلك ، انتقل إلى علامة التبويب خيارات متقدمة وقم بتعيين الهامش العلوي على -65 تقريبًا.
انشر العنوان الخاص بك عن طريق النقر فوق الزر للنشر في الجزء السفلي من لوحة إعدادات Elementor. أضف شرط عرض بالضغط على الزر أضف حالة. انقر على زر احفظ وأغلق بمجرد الانتهاء من ضبط حالة العرض.
الخطوة 2: إضافة CSS مخصص
يتم استخدام CSS أدناه للتحكم في تأثير الانتقال. يمكنك إضافة CSS إلى مُخصص القوالب. اذهب إلى المظهر -> التخصيص على لوحة تحكم WordPress الرئيسية الخاصة بك. في لوحة معلومات أداة تخصيص السمة ، افتح الكتلة كس إضافية ولصق CSS التالية.
مقتطف CSS:
.header-2 {transform: translatey (-80px)؛ -موز-الانتقال: كل .3s سهولة! مهم ؛ -webkit- الانتقال: كل .3s سهولة! مهم ؛ الانتقال: كل .3s سهولة! مهم ؛ } .elementor-sticky - effects.header-2 {height: auto! important؛ تحويل: translatey (0px) ؛ } .elementor-sticky - effects.header-1 {display: none! important؛ }
انقر على زر للنشر لتطبيق التغيير.
باختصار
يأتي Elementor Pro مع ميزة Theme Builder حيث يمكنك إنشاء قوالب مخصصة لأجزاء من قالبك ، مثل الرأس. عند إنشاء رأس مخصص باستخدام Elementor Theme Builder ، يمكنك تعيين أي سلوك تريده مع القدرة على إضافة CSS مخصص. حتى بدون إضافة CSS مخصص ، يمكنك تعيين التأثيرات على أنها ثابتة وشفافة.
اقرأ أيضا: كيفية إنشاء صفحة 404 في WordPress باستخدام Elementor
يوفر تغيير العنوان في صفحة التمرير نفسها بعض المزايا.
على سبيل المثال ، يمكنك استخدام العنوان الثانوي (العنوان الذي يظهر بعد تمرير الصفحة لأسفل) لزيادة فرص مشاركة صفحتك من خلال إظهار أزرار مشاركة الوسائط الاجتماعية فقط.
احصل على Elementor Pro الآن!
وفي الختام
لذا ! هذا كل شيء في هذا البرنامج التعليمي الذي يوضح لك كيفية تغيير رأس تمرير الصفحة على Elementor. إذا كانت لديك أية مخاوف بشأن كيفية الوصول ، فأخبرنا بذلك في تعليقات.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
