عندما بدأنا استخدام ووردبريس، بدا تغيير لون النص أمر بسيط. لكننا سرعان ما اكتشفنا أنه ليس سهل دائمًا، وذلك حسب إعدادات ووردبريس وإصدار المحرر.

بعد سنوات من مساعدة آلاف المبتدئين عبر DoctorMega، شهدنا تكرار هذا التحدي.

سواء كنت تستخدم المحرر الكلاسيكي أو محرر غوتنبرغ، فهناك طرق متعددة لتخصيص هذا العنصر من تصميم ووردبريس.

سواء كنت تستخدم محرر Classic أو محرر كتلة Gutenberg، هناك طرق متعددة لتخصيص عنصر تصميم ووردبريس هذا المحدد.

في هذا الدليل التفصيلي، سنوضح لك أسهل الطرق لتغيير لون النص في ووردبريس.

لماذا تغيير لون النص في ووردبريس؟

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

في بعض الأحيان، قد ترغب في تغيير لون النص في جميع أنحاء الموقع الكتروني. على سبيل المثال، قد يستخدم قالب ووردبريس لون خط رمادي، ولكنك تفضل استخدام اللون الأسود لتباين أفضل مع لون الخلفية.

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

مع ذلك، دعنا نتعرف على كيفية تغيير لون النص في ووردبريس. ما عليك سوى استخدام الروابط أدناه للانتقال إلى الطريقة التي تفضلها:

👀 هل تواجه صعوبة في تصميم موقع ووردبريس الخاص بك بالشكل الأمثل؟ دع فريق خدمات DoctorMega Pro يحول موقعك ليطابق رؤيتك تمامًا.

احجز استشارة مجانية مع فريقنا اليوم!

الطريقة 1: كيفية تغيير لون النص في محرر الكتل

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

للبدء، افتح المنشور أو الصفحة التي تريد تغيير لون النص فيها، أو أنشئ صفحة جديدة.

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

بمجرد أن يصبح لديك نص، تكون جاهز لتغيير لونه.

تغيير لون نص الكتلة

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

ما عليك سوى النقر فوق الكتلة ثم تحديد علامة التبويب “المكون” في القائمة الموجودة على الجانب الأيسر.

بمجرد الانتهاء من ذلك، ابحث عن قسم “اللون” وانقر فوق “نص”.

سيعرض المحرر المرئي الأن بعض الألوان التي تناسب قالب ووردبريس الخاص بك. يمكنك ببساطة النقر فوق أي لون لتغيير كل النص الموجود داخل تلك الكتلة.

لاستخدام لون مختلف، ما عليك سوى النقر فوق المربع الموجود في أعلى النافذة المنبثقة.

يؤدي هذا إلى فتح نافذة حيث يمكنك اختيار لون خط جديد.

خيار أخر هو كتابة كود سداسي عشري، وهو كود HTML للون معين. هذا مفيد إذا كنت ترغب في استخدام لون محدد للغاية، مثل درجة اللون الأحمر نفسها المستخدمة في شعار موقعك الإلكتروني.

إذا لم تكن متأكد من الكود السداسي العشري المناسب، فقد يكون من المفيد البحث في مواقع مثل HTML color codes. هنا، يمكنك استكشاف ألوان مختلفة والحصول على أكوادها السداسية العشرية.

بمجرد حصولك على الكود، قم بلصقه أو كتابته في مربع “Hex”.

إذا غيرت رأيك وأردت استعادة لون النص الافتراضي، فما عليك سوى النقر فوق الزر المنقط في القائمة الموجودة على الجانب الأيسر.

ستختلف الخيارات التي تراها اعتمادًا على ما إذا كنت قد قمت أيضًا بتغيير لون خلفية الكتلة، لذا قد تحتاج إلى النقر فوق “نص” أو “إعادة تعيين الكل”.

تغيير لون نص الكلمة أو العبارة

أحيانًا، قد ترغب فقط في تغيير لون كلمة أو عبارة أو جملة معينة، مثل دعوة العمل في صفحة الضغط.

للقيام بذلك، ما عليك سوى تحديد الكلمة أو العبارة التي تريد تغييرها في محرر كتل ووردبريس. ثم انقر على السهم الصغير المتجه لأسفل في شريط أدوات محرر المحتوى، ثم انقر على ’تمييز’.

سيؤدي هذا إلى فتح نافذة منبثقة تعرض بعض الألوان التي ستبدو متناسقة مع قالب موقعك الحالي.

يمكنك أيضًا اختيار لون يدويًا أو حتى استخدام كود سداسي عشري باتباع نفس العملية الموضحة أعلاه.

نصيحة احترافية: هل ترغب بتغيير لون روابطك؟ اطلع على دليلنا للمبتدئين حول كيفية تغيير لون الروابط في ووردبريس.

الطريقة الثانية: كيفية تغيير لون النص في أداة تخصيص القالب (للقوالب الكلاسيكية فقط)

قد يلفت اللون الانتباه إلى أهم محتوى في الصفحة، ولكن كثرة الألوان قد تسبب إرهاق. لذا، ينصح عادة باستخدام لون النص نفسه في معظم أجزاء موقع ووردبريس.

يستغرق تغيير كل صفحة ومنشور يدويًا باستخدام محرر الكتل وقت طويل، لذا نوصي بتغيير القالب نفسه باستخدام مخصص القالب.

ملاحظة: إذا لم يكن مخصص القالب موجود، فمن المرجح أنك تستخدم قالب كتل، ويمكنك الانتقال إلى الطريقة الثالثة.

للبدء، انتقل إلى المظهر » تخصيص.

تحتاج الأن إلى العثور على إعدادات نص القالب. يختلف كل قالب عن الأخر، ولكن عادة ما ستحتاج إلى البحث عن خيار ‘Typography’

في صورنا، نستخدم OceanWP.

انقر على ‘Typography’ أو أي خيار مشابه. عند هذه النقطة، ستظهر لك عادة جميع أنواع النصوص المستخدمة في القالب، مثل العنوان 1 وعنوان الصفحة.

لتغيير النص داخل منشوراتك وصفحاتك، انقر فوق ‘Body’ أو قسم مشابه.

لتخصيص لون النص، ابحث عن قسم ‘Font Color’.

ثم انقر على ‘Select Color’.

سيؤدي هذا إلى فتح نافذة الاختيار. يمكنك استخدام أحد الألوان الجاهزة، أو اختيار لون جديد باستخدام الإعدادات، أو كتابة كود سداسي عشري.

إذا كنت ترغب في استعادة اللون الافتراضي للقالب في أي وقت، فانقر ببساطة على ‘افتراضي’.

يمكنك أيضًا استخدام هذه الإعدادات لتغيير حجم الخط ونمطه وتباعد الأحرف وغير ذلك.

عندما تكون راضي عن مظهر النص، انقر على زر “نشر” أعلى الشاشة.

الطريقة 3: كيفية تغيير لون النص في محرر الموقع الكامل (قوالب الكتل فقط)

إذا كنت تستخدم قالب قائم على الكتل مثل Inspiro Blocks Pro أو Twenty Twenty-Three، فستختلف عملية تغيير لون نص القالب قليلًا.

لتخصيص النص باستخدام محرر الموقع الكامل، انتقل إلى القوالب » المحرر.

ستظهر لك الأن عدة قوائم لتخصيص مظهر موقعك الإلكتروني.

هنا، اختر ‘الستايلات’. يحدد هذا القسم الألوان العامة، وأسلوب الطباعة، وتخطيط موقعك الإلكتروني.

في الشاشة التالية، سترى بعض مجموعات الأستايل للاختيار من بينها. إذا كنت تريد تغيير مظهر قالب الكتلة لديك بالكامل، فما عليك سوى اختيار أحد الخيارات المتاحة.

ولكن لأغراض العرض التوضيحي، سنمضي قدمًا ونضغط على زر القلم الرصاص “تحرير الستايلات”.

ستصل الأن إلى محرر الموقع الكامل وستجد تبويب الستايلات مفتوحة.

لننقر على “الألوان”.

سيعرض لك الشريط الجانبي بعض العناصر التي يمكنك تغيير إعدادات ألوانها، مثل النصوص والروابط والتسميات التوضيحية والأزرار والعناوين.

لكل منها إعدادات ألوان مختلفة، لذا تأكد من استكشافها لمعرفة إمكانياتها.

لنأخذ مثالاً بالنقر على “العنوان”.

لتغيير لون العنوان، يمكنك إما اختيار أحد ألوان القالب المحددة مسبقًا أو استخدام لون مخصص بالنقر على محدد الألوان.

بمجرد رضاك ​​عن مظهر ألوان نصك، انقر على زر “حفظ”. سيتم تطبيق جميع التغييرات التي تجريها على جميع صفحاتك ومنشوراتك.

لمزيد من المعلومات، اطلع على دليل المبتدئين لتحرير موقع ووردبريس بالكامل.

الطريقة الرابعة: كيفية تغيير لون النص باستخدام كود CSS (أكثر قابلية للتخصيص)

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

الخبر السار هو أنه يمكنك تخصيص النص في موقعك بالكامل عن طريق إضافة CSS مخصص. والأفضل من ذلك، أن هذه الطريقة تتيح لك تحديد ألوان مختلفة لأنواع محددة من النصوص، مثل العنوان 1 (h1) أو نص الفقرة (p).

نظرًا لأن تعديل وتخصيص قالب ووردبريس يختلف من قالب لأخر، نوصي باستخدام WPCode لإضافة CSS مخصص إلى موقعك.

WPCode هو أفضل إضافة لمقتطفات الكود، ويستخدمه أكثر من مليون موقع ووردبريس. فهو يسهل إضافة CSS وPHP وHTML وغيرها دون الحاجة إلى تعديل أي ملفات ووردبريس أساسية.

أول ما عليك فعله هو تثبيت وتفعيل إضافة WPCode المجانية. لمزيد من التفاصيل، راجع دليلنا خطوة بخطوة حول كيفية تثبيت إضافة ووردبريس.

عند التنشيط، توجه إلى Code Snippets » Add Snippet.

هنا، سترى جميع مقتطفات WPCode الجاهزة التي يمكنك إضافتها إلى موقعك.

مرر مؤشر الماوس فوق خيار ‘Add Your Custom Code’، ثم اختر ‘Use snippet’ عند ظهوره.

للبدء، اكتب عنوان لمقتطف الكود المخصص. يمكنك استخدام أي شيء يساعدك في تحديد المقتطف في لوحة تحكم ووردبريس.

بعد ذلك، افتح القائمة المنسدلة ‘Code Type’ واختر ‘CSS Snippet’.

بعد ذلك، يمكنك إضافة CSS المخصص إلى محرر الأكواد الصغير. ستحتاج إلى كتابة محدد نوع النص الذي تخصصه، متبوع بالكود السداسي عشر للون الذي تريد استخدامه.

على سبيل المثال، يمكنك تغيير لون نص الفقرة بإضافة ما يلي:

p { color:#ff002a; }

إذا كنت ترغب في استخدام لون مختلف لعناوين موقعك، فستحتاج إلى استخدام محددات h1 أو h2 أو h3 أو ما شابهها.

يمكنك رؤية ذلك في الصورة أدناه.

إذا لم تكن متأكد من كود الست عشري المناسب، فيمكنك استخدام موقع مثل HTML color codes.

عندما تكون راضي عن المقتطف، انتقل إلى قسم ‘Insertion’. يمكن لـ WPCode إضافة CSS إلى مواقع مختلفة، مثل بعد كل منشور، أو في الواجهة الأمامية فقط، أو في لوحة الإدارة فقط.

لتغيير النص في مدونة ووردبريس بأكملها، انقر على ‘Auto Insert’ إذا لم يكن محدد مسبقًا. ثم افتح قائمة ‘Location’ المنسدلة واختر ‘Site Wide Header’.

بعد الانتهاء، انتقل إلى أعلى الشاشة وانقر على زر ‘Inactive’ ليتغير إلى ‘Active’.

وأخيرًا، انقر على ‘Save Snippet’ لتفعيل مقتطف CSS.

الأن، عند زيارة موقعك، سيظهر النص المخصص.

إذا كنت ترغب في استخدام لون نص مختلف في أي وقت، أو إضافة المزيد من CSS إلى هذا المقتطف، فما عليك سوى الانتقال إلى Code Snippets » Code Snippets. هنا، مرر مؤشر الماوس فوق المقتطف الذي أنشأته للتو، وانقر على ‘Edit’ عند ظهوره.

يمكنك الأن تعديل مقتطف الكود لاستخدام اللون الجديد، ثم النقر على ‘Save Snippet’ لتطبيق التغيير على موقعك الإلكتروني.

بالإضافة إلى لون النص، يمكنك أيضًا استخدام WPCode لتغيير اللون الافتراضي عند تحديد نص أو تفعيل تمييز النص على الصفحة ومحتوى المنشور.

الطريقة 5: كيفية تغيير لون النص في منشئ الصفحة

في كثير من الأحيان، سترغب في أن تبدو صفحات الهبوط الخاصة بك مختلفة عن بقية موقعك الإلكتروني. هذا يجعلها مميزة، مما قد يزيد من معدل التحويلات.

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

إذا كنت ترغب في إنشاء صفحة هبوط أو صفحة مبيعات، فننصحك باستخدام SeedProd. من بين جميع أدوات إنشاء الصفحة التي جربناها، يعد SeedProd الأفضل في السوق، ويتميز بسهولة استخدامه عبر السحب والإفلات.

يأتي SeedProd مع أكثر من 90 كتلة يمكنك سحبها وإفلاتها بسهولة على تصميم موقعك. يمكنك بعد ذلك ضبط هذه الكتل بطرق مختلفة، بما في ذلك تغيير لون النص.

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

تشمل هذه الخدمات أفضل خدمات التسويق عبر البريد الإلكتروني، وووكومرس، وجوجل أناليتكس، وغيرها.

أولاً، عليك تثبيت SeedProd وتفعيله. لمزيد من التفاصيل، راجع دليلنا خطوة بخطوة حول كيفية تثبيت إضافة ووردبريس.

ملاحظة: يتوفر أيضًا إصدار مجاني من SeedProd يتيح لك إنشاء صفحات مخصصة. ومع ذلك، بالنسبة لهذا الدليل، سنستخدم SeedProd Pro لأنه يحتوي على عدد أكبر بكثير من التمبلتات والكتل المتقدمة.

بعد تنشيط الاضافة، سيطلب SeedProd مفتاح الترخيص الخاص بك.

يمكنك العثور على هذه المعلومات في حسابك على موقع SeedProd. بعد إدخال مفتاح الترخيص، انقر على زر ‘Verify Key’.

بعد ذلك، انتقل إلى SeedProd » Pages وانقر على زر ‘Add New Landing Page’.

بعد ذلك، حان وقت اختيار التمبلت. يوفر SeedProd أكثر من 300 تمبلت مصمم باحترافية، يمكنك تخصيصه بالصور والنصوص والألوان وغيرها.

لاختيار تمبلت، ما عليك سوى تمرير مؤشر الماوس فوقه، ثم النقر على أيقونة “علامة الاختيار”.

نستخدم تمبلت “Ebook Sales Page” في جميع صورنا، ولكن يمكنك استخدام أي تصميم.

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

عندما تكون راضيًا عن المعلومات التي أدخلتها، انقر على زر ‘Save and Start Editing the Page’.

بعد ذلك، سيتم نقلك إلى منشئ الصفحة SeedProd الذي يعمل بالسحب والإفلات، حيث يمكنك تخصيص التمبلت الخاص بك.

يعرض محرر SeedProd معاينة مباشرة لتصميمك على اليسار وبعض إعدادات الكتل على اليمين.

تحتوي القائمة الموجودة على الجانب الأيمن أيضًا على كتل يمكنك سحبها إلى تخطيطك.

على سبيل المثال، يمكنك سحب وإفلات كتل قياسية مثل الأزرار والصور، أو استخدام كتل متقدمة مثل مؤقتات العد التنازلي، وشهادات متناوبة، وأزرار المشاركة على مواقع التواصل الاجتماعي، وغيرها.

يأتي SeedProd أيضًا مع ‘Sections’، وهي مجموعات من الكتل تستخدم غالبًا معًا. على سبيل المثال، يحتوي SeedProd على هيدر، وصورة رئيسية، دعوة لأتخاذ اجراء، وشهادات، ونموذج اتصال، وأسئلة شائعة، وميزات، وأقسام فوتر، وغيرها. يساعدك هذا في إنشاء صفحة مصممة باحترافية وبسرعة.

لاستعراض الأقسام المختلفة، انقر ببساطة على علامة تبويب ‘Sections’. لمعاينة أي قسم، مرر مؤشر الماوس فوقه، ثم انقر على أيقونة العدسة المكبرة.

لإضافة القسم إلى تصميمك، انقر ببساطة على ‘Choose This Section’.

سيتم إضافة القسم إلى أسفل صفحتك.

يمكنك نقل الأقسام والكتل داخل مخططك باستخدام السحب والإفلات.

لتخصيص كتلة، انقر عليها لتحديدها في تخطيطك. ستظهر الأن جميع الإعدادات التي يمكنك استخدامها لتكوين تلك الكتلة في القائمة اليمنى.

لتغيير لون النص، انقر ببساطة على أي بلوك يحتوي على نص.

في القائمة اليمنى، اختر علامة التبويب “خيارات متقدمة”. ضمن ‘Styles’، انقر على ‘Color’.

سيؤدي هذا إلى فتح نافذة منبثقة لاختيار لون نص جديد.

خيار آخر هو كتابة كود سداسي عشري في حقل ‘Hex’.

يمكنك الأن تغيير لون النص لأي كتلة أخرى باتباع نفس الخطوات الموضحة أعلاه.

عندما تكون راضي عن مظهر الصفحة، يمكنك نشرها بالنقر على زر ‘Save’. ثم اختر ‘Publish’.

إذا زرت متجرك الإلكتروني أو مدونتك أو موقعك الإلكتروني، فسترى الصفحة الجديدة تعمل، مكتملة بألوان نصك المخصصة.

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