تحسين صورة شعار موقع Divi الخاص بك باستخدام الإعدادات المسبقة العالمية

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

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

دعنا نقفز!

قم بتنزيل مخطط الإعدادات المسبقة لصورة الشعار مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

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

1. انتقل إلى Divi> Divi Library.
2. انقر فوق الزر استيراد / تصدير في الجزء العلوي من الصفحة.
3. حدد علامة التبويب استيراد في نافذة قابلية النقل المنبثقة
4. حدد استيراد الإعدادات المسبقة
5. انقر فوق زر الاستيراد

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

مقاسات الشعار

قبل أن نصل إلى تحسين صورة الشعار باستخدام Divi ، من المهم التفكير في تحسين حجم صورة الشعار قبل تحميلها إلى وحدة الصورة. لا تريد تحميل صورة شعار مقاس 1920 × 1080 بكسل على موقعك عندما تخطط لعرض هذا الشعار بدقة 100 × 50 بكسل. بالتأكيد ، هناك طرق لتغيير حجم صورة الشعار بعد الحقيقة (على سبيل المثال ، ملحقات srcset وتحسين الصورة). لكن هذه ليست أفضل ممارسة لأن هذا قد يؤدي إلى إبطاء أوقات تحميل الصفحة. ودعنا نواجه الأمر ، فإن شعارك مهم جدًا لتسوية الاختصارات الفوضوية.

فيما يلي قائمة بأحجام صور الشعار الشائعة التي يجب وضعها في الاعتبار:

للتخطيط الأفقي:

• 250 بكسل × 150 بكسل
• 350 بكسل × 75 بكسل
• 400 بكسل × 100 بكسل

للتخطيط العمودي (المربع):

• 160 بكسل × 160 بكسل (كبير)
• 60 بكسل × 60 بكسل (صغير)

قد تحتاج إلى حجم شعار أكبر مما تعتقد.

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

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

تحرير شعار الرأس العالمي الخاص بك

للبدء ، انتقل إلى Divi Theme Builder بالانتقال إلى Divi> Theme Builder. ثم انقر لإنشاء رأس عام جديد داخل قالب موقع الويب الافتراضي.

ثم حدد خيار "البناء من الصفر".

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

أضف تخطيط الصف والعمود

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

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

أضف وحدة الصورة لعرض صورة الشعار

أضف وحدة صورة إلى العمود الأيسر.

استخدام وحدة الصورة للشعارات

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

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

مثال 1: إنشاء شعار محاذي لليسار الإعداد العام المسبق

في هذا المثال الأول ، نحن بصدد إنشاء إعداد مسبق بسيط لشعار محاذي لليسار بحجم 60 بكسل × 60 بكسل.

افتح إعدادات وحدة الصورة وقم بتحميل صورة شعار 60 بكسل × 60 بكسل إلى وحدة الصورة.

قم بتحديث إعدادات تصميم الصورة كما يلي:

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

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

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

لاحظ أنه تم تغيير محاذاة الوحدة النمطية إلى المركز على الكمبيوتر اللوحي لأن الأعمدة ستتكدس على الهاتف المحمول.

إنشاء إعداد مسبق جديد من الأنماط الحالية

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

امنح صورة الشعار المعينة مسبقًا اسمًا فريدًا. في هذه الحالة ، يمكننا إعطائها الاسم "Logo Left (60px x 60px)" لإعلامنا بالضبط بحجم الصورة التي يجب استخدامها وكيف سيتم محاذاة الشعار عند اختيار استخدام الإعداد المسبق.

مثال 2: إنشاء شعار بمحاذاة لليمين إعداد عالمي مسبق

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

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

ثم قم بتحديث إعدادات التصميم لتغيير محاذاة الوحدة إلى اليمين.

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

أعط اسم الإعداد المسبق "Logo Right (60 بكسل × 60 بكسل)".

مثال 3: إنشاء شعار مركزي إعداد عالمي مسبق

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

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

قم بتحميل صورة شعار جديدة بحجم 250 × 150 بكسل.

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• العرض الأقصى: 250 بكسل
• محاذاة الوحدة: المركز

ثم قم بإضافة إعداد مسبق عالمي جديد من الأنماط الحالية.

وأعطها اسم "Logo Center (250 x 150px).

مثال 4: إنشاء إعداد عام مسبق لشعار كبير بمحاذاة اليسار

في هذا المثال التالي ، سننشئ إعدادًا مسبقًا لشعار أكبر محاذي لليسار (400 بكسل × 100 بكسل).

نظرًا لأن عرض الشعار سيكون 400 بكسل ، فنحن نريد هيكل عمود يمنح الشعار المساحة التي يحتاجها.

دعنا نعود إلى هيكل من عمودين مع الشعار على اليسار والقائمة على اليمين. ومع ذلك ، فلنغير الهيكل إلى ثلث وثلثين.

سيعطينا هذا عمودًا بعرض 320 بكسل تقريبًا إذا احتفظنا بالعرض الأقصى الافتراضي للصف 1080 بكسل.

افتح إعدادات وحدة الصورة وأضف صورة شعار بحجم 400 × 100 بكسل.

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• العرض الأقصى: 400 بكسل
• محاذاة الوحدة (سطح المكتب): يسار
• محاذاة الوحدة (الكمبيوتر اللوحي): المركز

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

أصبح الشعار الآن أكبر قليلاً على الجهاز اللوحي بالإضافة إلى كونه في المنتصف.

ثم أضف إعدادًا مسبقًا عالميًا جديدًا من الأنماط الحالية.

أعطه الاسم "Logo Left (400px x 100px)" واحفظ الإعداد المسبق.

مثال 5: إنشاء شعار بمحاذاة لليسار مع إعداد عالمي مسبق لتأثيرات التحويم

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

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

في هذا المثال ، سنستخدم صورة شعار 60 بكسل × 60 بكسل مع الإعداد المسبق "الشعار الأيسر (60 بكسل × 60 بكسل)". افتح إعدادات الصورة وحدد الإعداد المسبق من القائمة.

الآن يمكننا تعديل الإعداد المسبق ببعض أنماط تأثير التمرير قبل حفظه كإعداد مسبق جديد.

قم بتحديث ما يلي:

• زوايا دائرية: 50٪

• Box Shadow: انظر لقطة الشاشة
• مربع الظل الوضع الأفقي: 0 بكسل
• Box Shadow Vertical Position: 0 بكسل (سطح المكتب) 5 بكسل (تحوم)
• لون الظل: # ac3cf7

ثم أضف تدوير التحويل التالي عند التمرير:

• تحويل تدوير المحور Z (تحوم): 90 درجة

ثم قم بإنشاء إعداد مسبق جديد من الأنماط الحالية وقم بتسميته "Logo Left w / Hover (60 بكسل × 60 بكسل)".

ها هي النتيجة.

إضافة شعار موقع ديناميكي إلى وحدة الصورة

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

ضع في اعتبارك حجم الشعار الذي تختاره.

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

الآن ستعمل وحدة صورتك على سحب شعار موقعك ديناميكيًا.

لا تنس إضافة رابط ديناميكي للصفحة الرئيسية للشعار أيضًا.

افكار اخيرة

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

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

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

هتافات!