الدليل النهائي لمخصص Divi Theme

يعد Divi Theme Customizer أداة قوية ومريحة لإجراء التخصيصات على Divi Theme. مثل Visual Builder ، يسمح Divi Theme Customizer بالتخصيصات المرئية للواجهة الأمامية وتغييرات التصميم التي تخرج لعبة التخمين من عملية التخصيص. إذا تم استخدامها بكفاءة ، يمكن أن تكون هذه الأداة مدخرًا رائعًا للوقت وقويًا للمشاريع المستقبلية.

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

لدينا الكثير لتغطيته ، لذلك دعونا نبدأ من البداية.

بنيت مع WordPress في الاعتبار

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

فيما يلي مثال على خيارات مُخصص القوالب حول موضوع TwentySeventeen:

كما ترى ، يمكن الآن الوصول إلى العديد من ميزات WordPress التي كانت موجودة في صفحات مختلفة في الواجهة الخلفية لـ WordPress (هوية الموقع ، والقوائم ، والأدوات ، وما إلى ذلك ...) في أداة تخصيص الواجهة الأمامية كلها في مكان واحد.

من ناحية أخرى ، تم تصميم Divi Theme Customizer كإصدار محسّن من أداة تخصيص السمات هذه مع جميع أنواع خيارات Divi المحددة. بالنسبة للمستخدمين ، هذا يجعل عملية تخصيص Divi أسهل كثيرًا. وحقيقة أنه يمكنك بالفعل رؤية التخصيصات أثناء التحرير (في وقت واحد) تجعل هذا أداة تصميم ملائمة.

لا يزال لدى Divi Theme Customizer العديد من خيارات WordPress Customizer القياسية ، ولكنه يحتوي أيضًا على الكثير.

كما ترى ، هناك الكثير من الإعدادات التي تمت إضافتها إلى Divi Theme Customizer. الآن دعونا نبدأ في استكشاف هذه بمزيد من العمق.

الاعدادات العامة

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

هوية الموقع

هذا القسم ليس فريدًا لـ Divi. هذا مكان مناسب لتغيير عنوان الموقع والشعار لموقعك. يمكنك أيضًا إدخال رمز موقع يُستخدم للمتصفحات والتطبيقات ، يختلف عن رمز favicon الذي يمكنك إضافته في Divi Theme Options.

إعدادات الشكل الظاهري

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

تمكين التخطيط الصندوقي

هنا يمكنك تغيير موقعك إلى تخطيط مربع يؤطر محتوى موقعك ويكشف خلفية يمكن تخصيصها.

عرض محتوى الموقع

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

الإعداد الافتراضي هو 1080 بكسل. هذا عرض جيد لمعظم أجهزة الكمبيوتر المحمولة وأجهزة الكمبيوتر المكتبية القياسية.

عرض موقع الويب

يتوافق عرض هامش التوثيق مع مقدار المسافة الأفقية (الهامش) بين الأعمدة في كل صف.

تتراوح القيم الاختيارية لعرض هامش التوثيق من 1 إلى 4.

1 يمثل صفر هامش بين الأعمدة.
2 يمثل 3٪ هامش أيمن بين الأعمدة.
3 يمثل 5.5٪ هامش أيمن بين الأعمدة.
4 يمثل 8٪ هامش أيمن بين الأعمدة.

استخدم عرض الشريط الجانبي المخصص

هذا يحدد عرض الشريط الجانبي الافتراضي لموضوعك. ينطبق هذا على جميع الصفحات الموجودة في السمة الخاصة بك والتي تحتوي على شريط جانبي ولم يتم إنشاؤها باستخدام Divi Builder.

المقطع وارتفاع الصف

تعمل هذه الخيارات على ضبط مقدار التباعد الرأسي (المساحة المتروكة العلوية والسفلية) لكل قسم وصف.

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

على سبيل المثال ، يمثل "0" 0٪ من المساحة المتروكة العلوية والسفلية ، ويمثل "1" 1٪ من المساحة المتروكة العلوية والسفلية ، ويمثل "2" 2٪ ، وهكذا. تعتمد النسبة المئوية للحشو على عرض الحاوية (المقطع أو الصف). لذلك إذا كان العرض الفعلي للقسم هو 1080 بكسل وقمت بتعيين ارتفاع القسم على 1 ، فهذا يعني أنه سيكون لديك ...

1080 بكسل × 0.01 = 10.8 بكسل

... 10.8 بكسل من المساحة المتروكة في الأعلى والأسفل.

تتراوح الخيارات من 0 إلى 10 بحيث يمكنك الحصول على ما يصل إلى 10٪ من المساحة المتروكة.

لون لهجة الموضوع

قبل أن تبدأ في تغيير ألوان عناصرك الأخرى ، يجب عليك تغيير هذا أولاً . بمجرد تغييره ، احفظ إعداداتك وانشرها وقم بتحديث صفحتك. الآن يجب أن يقوم Theme Accent Color المحدث بتعبئة العناصر الأخرى تلقائيًا.

سيؤدي تحديث Theme Accent Color أيضًا إلى تحديث ما يلي:

• لون رابط الجسم
• لون رأس القطعة
• القطعة رصاصة اللون
• لون الرموز الاجتماعية التذييل
• اللون الافتراضي للرموز
• لون الارتباط النشط لقائمة التذييل
• لون خلفية القائمة الثانوية
• لون خلفية نمط رأس التمرير للداخل وملء الشاشة
• رمز قائمة همبرغر للون قائمة الجوال
• لون الارتباط النشط للقائمة الأساسية
• لون خط القائمة المنسدلة
• لون خلفية القائمة الثانوية
• لون خلفية القائمة المنسدلة الثانوية
• لون خلفية القائمة الثانوية
• لون ارتباط القائمة الأساسي النشط
• لون الارتباط النشط لقائمة التذييل

الطباعة

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

حجم نص الجسم

هذا يغير النص الأساسي الافتراضي لموضوعك. الحجم الافتراضي هو 14 بكسل.

نصيحة التصميم: يبدو أن 14 بكسل صغيرة جدًا بالنسبة إلى حجم نص أساسي قياسي. يجب ألا تقل عن 16 بكسل لحجم خط الجسم الأساسي. سوف يشكركم من هم منا في سن الأربعين فما فوق. حتى أن معظم المتصفحات تستخدم 16 بكسل كحجم خط أساسي قياسي.

ارتفاع خط الجسم

ارتفاع السطر لكل سطر نص فردي.

نصيحة التصميم : يُقاس ارتفاع الخط بقيمة الطول "em". الافتراضي ديفي هو 1.7em للنص الأساسي. قيمة em هذه أفضل من قيمة البكسل (px) لأنها تستند إلى حجم الخط الحالي للعنصر ، وبالتالي فهي تتناسب مع القيمة المضمنة الأصلية (أو في حالتنا ، حجم الخط الحالي). تمثل القيمة "1.7em" بشكل أساسي 1.7 ضعف حجم الخط الحالي. لذلك إذا كان حجم الخط الحالي 16 بكسل ، فسيكون ارتفاع الخط 27.2 بكسل. يمنحك هذا 5.6 ​​بكسل مساحة إضافية في الأعلى و 5.6 بكسل في الأسفل. يبدو أن هذه بداية جيدة (المسافة بين سطور النسخ) لسهولة القراءة.

حجم نص الرأس

تسمح لك Divi بتعيين حجم نص رأس h1 الافتراضي هنا. يؤثر هذا على عناصر Divi مثل عناوين Fullwidth Header Module. إذا كنت ترغب في ضبط حجم مستويات الرأس الأخرى (h2 ، h3 ، إلخ ...) ، فأقترح إضافة تلك الموجودة في CSS الإضافية (يتم تناول هذا لاحقًا في المنشور).

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

القيمة الافتراضية لحجم نص الرأس هي 30 بكسل. هذا حجم آمن جيد لتبدأ به. خاصة وأن بعض العناوين تتطلب نسخًا أطول. ومع ذلك ، فإنني أميل إلى الانجذاب إلى حجم رأس أكبر لاستيعاب الحجم المتزايد لشاشات العرض. بالإضافة إلى ذلك ، يحتاج معظم العملاء إلى مواقع ويب تحتوي على عناوين بسيطة وقصيرة مثل "نبذة عنا" و "اتصل بنا" والتي تبدو أفضل مع أحجام الخطوط الكبيرة. أود تعيين رؤوس h1 الخاصة بي على 48 بكسل على الأقل .

تباعد حرف الرأس

تباعد الأحرف يضبط المسافة الأفقية بين الأحرف. تؤثر قيمة Header Letter Spacing على جميع مستويات الرأس (h1 ، h2 ، h3 ، h4 ، h5 ، h6) ، علامات الاقتباس ، وعناوين الشرائح.

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

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

ارتفاع خط الرأس

تمامًا مثل قيمة تباعد الأحرف ، تؤثر قيمة ارتفاع خط الرأس على جميع مستويات الرأس (h1 ، h2 ، h3 ، h4 ، h5 ، h6) ، علامات الاقتباس ، وعناوين الشرائح. نظرًا لحجم الخط الأكبر ، فإن 1em هي الإعدادات الافتراضية. أعتقد أن ارتفاع السطر في مكان ما بين 1em و 1.3em يبدو جيدًا ، خاصةً عندما ينتقل الرأس إلى سطرين أو أكثر.

نمط رأس الخط

استخدم هذه الخيارات لتغيير نمط خط الرؤوس.

خط الرأس والجسم

الخط الافتراضي في Divi هو Open Sans ، لكن لدى Divi Theme Customizer ما يقرب من مائة خط للاختيار من بينها! استفد من هذه الخطوط المضمنة واختبر أيها يعمل بشكل أفضل لموضوعك.

نصيحة التصميم: للحصول على مصدر إلهام لأزواج الخطوط ، يمكنك التحقق من fontpair.co الذي يساعد على إقران خطوط Google معًا. لن تدعم Divi كل هذه الخطوط خارج الصندوق ، ولكن يمكنك البحث عن تلك التي تدعمها Divi لرؤية الأزواج التي تعمل بشكل جيد معًا.

لون رابط الجسم

يتم توريث لون ارتباط النص بواسطة لون تمييز المظهر الخاص بك. لكن يمكنك دائمًا تغييره هنا.

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

لون نص الجسم

هنا يمكنك تغيير لون النص الأساسي الخاص بك. تستخدم المدونات الشهيرة مثل New York Times و Smashing Magazine # 333333 للون نص جسمها. يميل هذا إلى القراءة بشكل أفضل على خلفية بيضاء في رأيي.

لون نص الرأس

هنا يمكنك تغيير لون الرؤوس. إذا كنت تلتصق بظل أسود ، فسأكون أغمق قليلاً من النص الأساسي لإبرازه قليلاً. شيء مثل # 121212 سيعمل.

خلفية

يضبط هذا الخيار الخلفية لموضوعك. بالنسبة إلى Divi Theme ، ينطبق هذا الخيار حقًا فقط على تخطيط الصندوق . لون الخلفية الافتراضي هو الأبيض (#ffffff) ما لم تقم بتغييره هنا. يمكنك أيضًا إضافة صورة خلفية إذا أردت.

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

العنوان والتنقل

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

تنسيق الرأس

نمط الرأس

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

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

شريط القوائم الأساسي

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

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

جعل العرض الكامل

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

إخفاء صورة الشعار

إذا كنت تريد ، يمكنك هنا إخفاء صورة الشعار تمامًا من قائمتك.

ارتفاع القائمة

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

أقصى ارتفاع للشعار

هنا يمكنك زيادة أو تقليل نسبة العرض القصوى لشعارك لتكبيره أو تصغيره.

حجم النص ، تباعد الأحرف ، الخط ، نمط الخط ، لون النص ، لون الارتباط النشط

تتيح لك هذه الخيارات تخصيص روابط القائمة بالطريقة التي تريدها.

لون الخلفية

هذا يسمح لك بتغيير لون الخلفية لقائمتك الأساسية.

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

إعدادات القائمة المنسدلة

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

شريط القوائم الثانوية

هنا يمكنك تخصيص شريط القوائم الثانوي الخاص بك باستخدام الخيارات المتوفرة.

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

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

إعدادات الملاحة الثابتة

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

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

عناصر الرأس

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

الرموز الاجتماعية

يعرض Divi افتراضيًا رموزًا لـ Facebook و Twitter و Google+ و RSS. يمكنك تحرير هذه الملفات الشخصية في خيارات سمة Divi.

تذييل

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

تخطيط

هنا يمكنك الاختيار من بين 5 تخطيطات لقسم التذييل الخاص بك.

يمكنك أيضًا تعيين لون خلفية التذييل الذي تم تعيينه على # 222222 افتراضيًا.

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

الحاجيات

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

الحاجيات ليست فريدة من نوعها لديفي. تم تضمينها في Wordpress ويمكن العثور عليها في لوحة معلومات WordPress ضمن Appearance> Widgets . هناك يمكنك رؤية أربع مناطق تذييل حيث يمكنك إضافة عناصر واجهة مستخدم. ستظهر أي أدوات تضيفها إلى هذه الأقسام في منطقة التذييل.

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

عناصر التذييل

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

قائمة التذييل

إذا كانت لديك قائمة تذييل ، فيمكنك تصميمها هنا.

شريط أسفل

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

تحرير اعتمادات التذييل

يمكنك أيضًا استبدال اعتمادات التذييل الافتراضية بأي لغة html تريدها داخل هذا المربع.

أزرار

يتحكم هذا القسم في الشكل الذي تريده لأنماط الزر الافتراضية.

نمط الأزرار

هنا يمكنك تخصيص نمط الأزرار لموضوعك. لن أخوض في تفاصيل كبيرة حول كل خيار هنا. يمكنك الانتقال إلى وثائقنا الخاصة بوحدة الأزرار للحصول على مزيد من المعلومات حول كيفية تصميم الأزرار.

لون الخط

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

نصيحة التصميم: اسمح لـ Theme Accent Color بتعيين لون نص الأزرار حتى تتمكن من الاحتفاظ بالقدرة على إضافة إصدارات داكنة وخفيفة من الزر الخاص بك في الوحدات النمطية الخاصة بك.

أزرار تحوم النمط

هذا هو المكان الذي يمكنك فيه تخصيص نمط حالة التمرير لأزرارك.

من المهم أن يفهم المستخدمون أن ما هم على وشك النقر عليه هو في الواقع زر. تعمل إضافة تأثير التمرير على ترسيخ هذا الأمر في العقول وتشجعهم على التفاعل. تضيف ميزة Be default Divi خلفية فاتحة وتحرك رمز سهم إلى اليمين. لكن يمكنك تغييره إلى ما تريد.

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

مدونة او مذكرة

بريد

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

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

أنماط المحمول

أنا أحب هذا القسم. هنا يمكنك ضبط كيفية ظهور موقعك على الأجهزة المحمولة ومشاهدة النتائج في الوقت الفعلي.

أنماط الجهاز اللوحي والهاتف

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

نصيحة التصميم رقم 1: أحد التخصيصات التي أرغب في إجرائها لتخطيطات الهاتف هو ضبط ارتفاع الصف على "0". يؤدي هذا إلى إنشاء تدفق أفضل للمحتوى عند التمرير على الهاتف لأنه يزيل هذا التباعد بين الصفوف.

نصيحة التصميم رقم 2: ابحث عن مقياس خط يناسب موقعك. إليك فكرة جيدة أحب أن أتبعها في رؤوسي:

سطح المكتب: 48 بكسل

الجهاز اللوحي: 40 بكسل

الهاتف: 32 بكسل

قائمة المحمول

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

الألوان

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

في رأيي ، من الأفضل ترك هذه المجموعة على الوضع الافتراضي.

القوائم والأدوات

لم يعد عليك تعديل القوائم أو عناصر واجهة المستخدم الخاصة بك بشكل أعمى في لوحة معلومات WordPress. يمكنك الآن إضافة هذه العناصر وتخصيصها ورؤيتها تنبض بالحياة على صفحتك في الوقت الفعلي. أنا أحب الراحة!

الصفحة الأمامية الثابتة

بشكل افتراضي ، يعرض WordPress آخر منشور لك على صفحتك الأولى (الصفحة الرئيسية). يمكنك تغيير هذا ليكون أي صفحة ثابتة تريدها في هذا القسم. ويمكنك أيضًا تعيين صفحة المنشورات الخاصة بك (أو صفحة المدونة).

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

CSS إضافية

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

أمثلة CSS إضافية

المثال رقم 1: ضبط حجم كل الرؤوس

أحد الأمثلة الجيدة على CSS الإضافية هو تصميم علامات الرؤوس المتبقية. يتيح لك Divi تخصيص الإعداد لخط العنوان الخاص بك ، ولكن هذا مخصص فقط لرؤوس h1. يمكنك استخدام مربع CSS الإضافي لإدخال باقي علامات الرأس (h2 ، h3 ، h4 ، إلخ ...). أحب استخدام المقياس التالي: 16 ، 18 ، 21 ، 24 ، 36 ، 48.

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

المثال رقم 2: تطابق حشوة الفقرة السفلية مع ارتفاع خط النص

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

p { padding-bottom: 1.7em}

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

المثال رقم 3: أضف خاصية التسطير إلى الروابط الخاصة بك

إضافة سمة التسطير إلى روابط الجسم.

a {
    text-decoration: underline;
}

تصدير واستيراد إعدادات أداة تخصيص Divi لمشروعك التالي

لدى Divi Theme Customizers خيار قابلية النقل الذي يسمح للمستخدمين بتصدير أو استيراد إعدادات Customizer. يقدم هذا فرصة رائعة للمطورين لعمل نوع من قالب إعداد أداة التخصيص لاستخدامه في مشاريعهم المستقبلية.

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

لتصدير الإعدادات الخاصة بك ، انقر فوق رمز قابلية النقل في الجزء العلوي مخصص Divi Theme.

منحك اسمًا لتصدير الملف والنقر فوق الزر "تصدير إعدادات Divi Customizer"

يمكنك الآن استخدام ملف .json هذا في المستقبل عن طريق النقر فوق رمز قابلية النقل نفسه في أداة تخصيص سمة Divi واختيار استيراد بدلاً من التصدير. ثم كل ما عليك فعله هو تحميل ملف .json والنقر على "استيراد إعدادات Divi Customizer".

وهذا كل شيء.

ماذا تتضمن إعدادات أداة تخصيص Divi؟

تتضمن إعدادات أداة التخصيص بشكل أساسي كل شيء في الأقسام السبعة الأولى.

1. الاعدادات العامة
2. العنوان والتنقل
3. تذييل
4. أزرار
5. مدونة او مذكرة
6. أنماط المحمول
7. الألوان

الأقسام الأربعة الأخيرة خاصة بـ WordPress ولن تنتقل إلى تثبيتات Divi الأخرى. تشمل هذه الأقسام:

1. القوائم
2. الحاجيات
3. الصفحة الأمامية الثابتة
4. CSS إضافية

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

كيف يتم تخزين أنماط Divi Customizer

بالنسبة لـ Divi Customizer (جنبًا إلى جنب مع خيارات Divi و Divi Builder) ، يقدم Divi موارد CSS ثابتة يمكن تخزينها مؤقتًا بواسطة المتصفحات لتقليل وقت تحميل الصفحة. هذا يعني أن الأنماط لا تتم طباعتها على الصفحة ولكن يتم تخزينها في ملف CSS ثابت منفصل. في كل مرة تحفظ فيها إعدادات Customizer ، يتم تحديث ملف CSS الثابت. يتضمن هذا أي CSS إضافية أضفتها أيضًا.

خواطر ختامية

يأتي برنامج Divi Theme Customizer مع بعض الخيارات القوية جدًا وعملية التخصيص ملائمة وممتعة للعمل معها. واكتساب فهم أعمق لما يمكن أن تفعله هذه الخيارات سيؤدي بالتأكيد إلى تحسين كيفية إنشاء مواقع الويب باستخدام Divi. إذا لم تكن قد قمت بذلك بالفعل ، فاستغرق بعض الوقت لاستكشاف الإعدادات الأساسية المثلى لمشروع ما ، وقم بتوصيلها في Customizer ، وقم بإنشاء ملف تصدير. ستندهش من الدفعة (والثقة) التي سيمنحك ذلك عند بدء مشروع جديد.

أتطلع إلى الاستماع منك في التعليقات.

هتافات!