العنوان العادي عبارة عن كتلة واحدة من النص بنمط واحد. يقسم العنوان المزدوج هذا العنوان إلى جزأين يمكنك تصميمهما بمفردهما، بحيث تحصل كل من الكلمات الأولى والكلمات الثانية على اللون والخلفية والطباعة الخاصة بها. هذه هي الطريقة التي تبني بها عنوانًا ثنائي اللون مثل الإضافات الرئيسية بلون واحد بجانب للعنصر وفي حالة أخرى، دون لمس CSS المخصص.
ال القطعة ذات العنوان المزدوج في الإضافات الرئيسية للعنصر يحتوي على كلا الجزأين، وعنوان فرعي اختياري، وأيقونة اختيارية في عنصر واجهة مستخدم واحد. يغطي هذا الدليل كل إعداد في علامتي التبويب "المحتوى والنمط"، باستخدام نفس عنصر واجهة المستخدم الذي يأتي مجانًا مع الإضافات الرئيسية.
إليك ما ستنتهي به الأمر، عنوان ثنائي اللون مع أيقونة فوقه وعنوان فرعي أسفله
قبل أن تبدأ #
- العنصر مثبت ونشط
- الإضافات الرئيسية للعنصر مثبتة ونشطة (دليل التثبيت)
- صفحة أو قالب مفتوح في محرر Elementor
الخطوة 1: أضف أداة العنوان المزدوج #
في محرر Elementor، افتح لوحة عناصر واجهة المستخدم وابحث عنها عنوان مزدوج. اسحبه إلى صفحتك. تحمل عناصر واجهة المستخدم Master Addons شارة “MA”، لذلك من السهل اكتشافها في القائمة. بمجرد وجوده على الصفحة، يفتح المحرر تحرير العنوان المزدوج اللوحة الموجودة على اليسار بها ثلاث علامات تبويب: المحتوى والأسلوب والمتقدم.
الخطوة 2: ضبط المحتوى #
ال محتوى علامة التبويب هي المكان الذي تكتب فيه النص وتختار التخطيط الأساسي. ماذا يفعل كل حقل:
- النمط المحدد مسبقًا يختار مظهرًا جاهزًا للجزأين. يؤدي تبديل الإعدادات المسبقة إلى تغيير كيفية وضع العنوانين الأول والثاني معًا.
- محاذاة يضبط الكتلة بأكملها على اليسار أو الوسط أو اليمين.
- العنوان الأول هو الجزء الأول من العنوان (على سبيل المثال، “Master Addons”).
- العنوان الثاني هو الجزء الثاني (“For Elementor”). هذا عادةً ما يكون الجزء الذي تقوم بتمييزه بلون مختلف.
- عنوان URL يجعل العنوان بأكمله رابطًا مفيدًا لأقسام الأبطال.
- العنوان الفرعي هو سطر الوصف الموجود تحت العنوان.
- تمكين الأيقونة يقوم بتشغيل أيقونة فوق العنوان.
- علامة العنوان يضبط علامة HTML، من H1 إلى H6. استخدم H1 للعنوان الرئيسي للصفحة وH2 لعناوين الأقسام بحيث تحافظ الصفحة على بنية عنوان نظيفة.
الخطوة 3: إضافة أيقونة (اختياري) #
الوجه تمكين الأيقونة إلى نعم و أيقونة يظهر الحقل. اختر أي أيقونة من المكتبة، أو قم بتحميل SVG الخاص بك. حزم الإضافات الرئيسية 8 مكتبات أيقونات متميزة، لذلك هناك الآلاف للاختيار من بينها دون مغادرة Elementor. يقع الرمز فوق العنوان ويتبع نفس المحاذاة التي قمت بتعيينها مسبقًا.
الخطوة 4: قم بتصميم العنوان الأول والثاني #
التبديل إلى أسلوب علامة التبويب. هذا هو المكان الذي يكتسب فيه العنوان المزدوج اسمه. تحصل على أقسام منفصلة ل العنوان الأول و العنوان الثانيولكل منها ضوابطها الخاصة:
- لون النص لهذا الجزء من العنوان
- خلفية اللون خلف هذا الجزء (وهذا ما يخلق المظهر ثنائي اللون)
- الطباعة لعائلة الخطوط والحجم والوزن والتباعد
- الحشو و هامش للتحكم في التباعد حول كل جزء
نظرًا لأن القسمين مستقلان، يمكنك إعطاء الجزء الأول خلفية داكنة والثاني خلفية حمراء، أو مطابقة ألوان علامتك التجارية تمامًا. اضبط خلفية العنوان الثاني على لهجة العلامة التجارية وستحصل على تأثير الكلمات المميزة الذي يستخدمه الأشخاص في أقسام الأبطال. شيء واحد يجب مشاهدته: إذا استخدم الجزءان حشوة مختلفة، فيمكن أن يبدوا غير متساويين، لذا اضبط كلا الجانبين على نفس القيمة عندما تريد أن تصطف المربعات.
الخطوة 5: قم بتصميم العنوان الفرعي #
ال وصف يقوم القسم بوضع أنماط سطر العنوان الفرعي تحت العنوان. تحصل لون النص, الطباعة، ونفس الشيء الحشو و هامش عناصر التحكم. قم بإسقاط اللون إلى اللون الرمادي الناعم للحصول على ترجمة عادية، أو قم بمطابقته مع أحد ألوان العناوين لربط الكتلة معًا.
الخطوة 6: صمم الأيقونة #
إذا قمت بتشغيل الأيقونة، فإن نمط الأيقونة يتحكم فيه القسم. تعيين حجم الأيقونة في وحدات البكسل باستخدام شريط التمرير، واختر لون الأيقونة لكليهما عادي و تحوم تنص على. يعد لون التمرير المنفصل لمسة لطيفة عندما يكون العنوان بأكمله عبارة عن رابط.
عندما يبدو العنوان صحيحًا، انقر فوق ينشر (أو تحديث) لحفظ الصفحة.
حيث تساعد أداة العنوان المزدوج #
- أقسام البطل، حيث يجذب عنوان ذو لونين العين إلى الجزء المهم.
- عناوين الأقسام وهذا يحتاج إلى كلمة واحدة مميزة، مثل “لدينا أفضل العمل”.
- الصفحات المقصودة، إقران عنوان غامق مع عنوان فرعي داعم في عنصر واجهة مستخدم واحد.
- التسعير أو كتل الميزات، حيث يؤطر النمط ذو اللونين العنوان الرئيسي.
الأسئلة المتداولة #
ما هي أداة العنوان المزدوج في Elementor؟
إنها أداة Master Addons التي تقسم العنوان إلى جزأين يمكنك تصميمهما بشكل منفصل. يحصل كل جزء على لونه وخلفيته وطبعه الخاص، بحيث يمكنك إنشاء عنوان بلونين دون كتابة أي CSS.
كيف يمكنني عمل عنوان بلونين في Elementor؟
أضف عنصر واجهة المستخدم Master Addons Dual Heading، واكتب النص الخاص بك في العنوان الأول والعنوان الثاني، ثم افتح علامة التبويب "النمط" وقم بتعيين لون نص أو خلفية مختلفة لكل جزء. وهذا يمنحك عنوانًا بلونين.
هل يمكنني إضافة عنوان فرعي وأيقونة إلى العنوان؟
نعم. يضيف حقل العنوان الفرعي سطر وصف أسفل العنوان، ويضع مفتاح تمكين الأيقونة رمزًا فوقه. كلاهما لهما عناصر تحكم خاصة بالنمط في علامة التبويب "النمط" للون والحجم والطباعة.
ما هي علامة العنوان التي يجب أن أستخدمها؟
قم بتعيين علامة العنوان على H1 للعنوان الرئيسي للصفحة وH2 لعناوين الأقسام. تؤدي مطابقة العلامة لدور العنوان إلى الحفاظ على نظافة بنية صفحتك، مما يساعد القراء ومحركات البحث على حد سواء.
هل أحتاج إلى Elementor Pro لعنصر واجهة المستخدم ثنائي العنوان؟
رقم تعمل أداة Dual Heading مع الإصدار المجاني من Elementor، لذا فإن جميع إعدادات المحتوى والأسلوب الخاصة بها متاحة بدون Elementor Pro.
