ووردبرس

كيف تجعل حروف الكلمات شفافة في الخلفية

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

مثال على ذلك صورة الخلفية  الموجودة في الصفحة الرئيسية فقد قمت بتصميمها باستخدام قالب Divi
و جعلت كلمة Worpress  تبدو و كأنها شفافة

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

أو مثل هذه الصورة فهي صورة خلفية و عليها حرف  O و سأشرح كيف يمكنك تصميم مثل هذه الخلفية
باستخدام قالب Divi الرائع

ادخل إلى لوحة التحكم الخاصة بموقك الإلكتروني في الووردبرس ثم انقر على صفحات ثم مرر بالفأرة فوق الصفحة التي تريد تصميمها  وانقر على الخيار Edit with Divi
ثم قم بإضافة صف من عمود واحد

انقر على زر الإعدادات الخاص بالسكشن و ستظهر لك نافذة الإعدادات الخاصة بالسكشن

إقرأ أيضا:أدوات تصميم المواقع في قالب Divi

انقر  على  Design   ثم في الإعداد  spacing  قم بتحديد القيم هكذا
Top Padding:  0px
Bottom Padding: 0px
ثم انقر على زر الحفظ

انقر على زر الإعدادات الخاص بالصف

انقر على Design  ثم في الخيار  Sizing قم بإعداد التالي
Width :100%
Max Width :100%

ثم فيي الخيار Spacing قم بتحديد القيم هكذا
Top Padding:  0px
Bottom Padding: 0px

ثم انقر على Content  وانقر على زر الإعدادات الخاص بالعمود

 قم بإضافة لون للخلفية من خلال الخيار  Background

ثم قم بإضافة صورة للخلفية من خلال التبويب الخاص بإضافة الصورة

ثم انزل الى أسفل نافذة الإعدادات وقم بضبط الإعداد التالي (مهم جدا)
Background Image Blend  :     Multibly  ثم انقر على زر الحفظ

إقرأ أيضا:أدوات تصميم المواقع في قالب Divi

ستلاحظ أن صورة الخلفية لم تظهر
لا تقلق قم بإضافة أداة النصوص وستظهر صورة الخلفية

اكتب حرف O  داخل أداة النصوص و اجعله في المنتصف و قم بإضافة اللون الأسود لخلفية أداة النصوص

انقر على التبويب Design  و قم بإعداد الإعدادات التالية :

داخل الخيار Text  قم بتغيير الإعدادات التالية
Text Font:   Poppins   (تغيير نوع الخط)

Text Color :  White ( تغيير لون الخط إلى أبيض)

Text Size :   94vw (تغيير حجم الخط )
تأكد من حجم الخط في جميع الاجهزة من خلال النقر على تبويب كل جهاز

أيضا داخل الخيار  Filters  قم بإعداد الخيار التالي
Blend Mode:  Multibly

الآن هكذا أصبح شكل الحرف

إضافة صف جديد يحتوي على عمود واحد فقط و إضافة أداة النصوص و كتابة ”  مدونة تصميم المواقع”  وإعداد الإعدادات التالية

إقرأ أيضا:ما هو جوجل تاج مانجر و لماذا هو مهم ؟

Text Color :   White ( تغيير لون الخط إلى الأبيض)
Text Size:  5vw

Spacing   :  Top:   -110vw

إضافة Divider  وإعداد الإعدادات التالية
Link Color :   ًWhite
Sizing  :    Divider weight :   7px
Width :   50%
Module Alignment:  Middlie (لتجعل الخط في المنتصف)

إضافة أداة النصوص  وكتابة معلومات عن الموقع و إعدادا الإعدادات التالية

Text Color : White
:Spacing
Margin Top: 100px
Margin Right: 104px
Margin Left:  104Px

إضافة زر (Button )   لمقال يشرح كيفية تصميم المواقع

إعداد الإعدادت التالية داخل الخيار Content  :
Button  : الكلام المكتوب على الزر  وهو “معرفة المزيد”
Link:   إضافة رابط للزر

أيضا داخل التبويب  Design  إعداد الإعدادات التالية
Alignment:   middle
:Button
Use custom style for button  : Yes
Button Text color:  White
Show Button Icon :  Yes
Only Show Icon on Hove For Button :   No

:Spacing

Padding Left:  30px
Padding Right:   19px

الآن هكذا أصبح التصميم النهائي

السابق
كيف تقوم بالتعديل على ال Header في قالب Divi
التالي
استخدامات الكربون الأسود

اترك تعليقاً