كيفية إضافة وتحريك شعار SVG الخاص بك داخل رأسك العالمي مع Divi's Theme Builder & Anime.js

يعد شعارك جزءًا أساسيًا من هوية علامتك التجارية. لهذا السبب يتم تضمينه دائمًا تقريبًا في أي رأس موقع ويب تصادفه. عند إضافة شعار إلى رأسك ، يمكنك اختيار تحميل ملف PNG أو الانتقال إلى تكامل SVG بدلاً من ذلك. للحصول على نهج أكثر تخصيصًا ، يمكنك أيضًا تحريك شعار SVG الخاص بك. هذا بالضبط ما سنعرضه لك في هذا المنشور. سنوضح لك كيفية إضافته إلى العنوان العالمي المبني من Divi أولاً ، ثم تحريكه باستخدام مكتبة Anime JS. سنستخدم تصميمًا بسيطًا لمثالنا ، ولكن بمجرد أن تحصل على النهج ، يمكنك تحريك أي شعار!

دعنا نذهب اليها.

معاينة

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

سطح المكتب

متحرك

قم بتنزيل قالب Global Header مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. أنشئ شعار SVG في Adobe Illustrator واحصل على رمز SVG

افتح Illustrator وقم بإنشاء مستند جديد

في الجزء الأول من هذا البرنامج التعليمي ، سننشئ شعارًا بسيطًا داخل Adobe Illustrator. إذا كان لديك شعار SVG خاص بك بالفعل ، فلا تتردد في استخدام ذلك الشعار. بدلاً من ذلك ، يمكنك أيضًا الوصول إلى ملف نموذج الشعار في Illustrator في مجلد التنزيل أعلاه. إذا كنت تفضل إنشاء نموذج الشعار من البداية ، فابدأ بإضافة مستند جديد بنسبة 1: 1.

• العرض: 500 بكسل
• الارتفاع: 500 بكسل

أضف دائرة إلى الطبقة الحالية

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

• ملء: # 0C1019
• السكتة الدماغية: لا شيء

إنشاء طبقة جديدة وإضافة نص الشعار

بعد ذلك ، سنضيف طبقة جديدة.

سنستخدم هذه الطبقة لإضافة بعض نص الشعار.

• الخط: مونتسيرات
• وزن الخط: أسود
• حجم الخط: 110 نقطة

إنشاء مخططات للشعار

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

محاذاة مخططات النص

سوف نتأكد من محاذاة مخططات النص إلى المنتصف أيضًا.

تصدير كملف SVG

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

احصل على كود SVG

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

2. ابدأ في إنشاء رأس عام / مخصص داخل Divi Theme Builder

انتقل إلى Divi Theme Builder وابدأ في إنشاء رأس عالمي

الآن وقد مررنا بالجزء الأول من هذا البرنامج التعليمي ، وحصلنا على رمز SVG الخاص بشعارنا ، فقد حان الوقت للانتقال إلى Divi! سننشئ رأسًا عالميًا جديدًا من خلال الانتقال إلى Theme Builder داخل WordPress Backend.

إعدادات القسم

لون الخلفية

بمجرد إدخال قالب الرأس العام ، ستلاحظ قسمًا. افتح هذا القسم وقم بتطبيق لون الخلفية.

• لون الخلفية: #eaeaea

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 95٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة جميع الحشو الافتراضي العلوي والسفلي أيضًا.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

العنصر الرئيسي

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

display: flex;

العمود 1 العنصر الرئيسي

بعد ذلك ، سنتأكد من الاحتفاظ ببنية العمود (1/4 و 3/4) عبر أحجام شاشات أصغر عن طريق إضافة سطر واحد من كود CSS إلى كل عمود على حدة. ابدأ بالأول.

width: 25% !important;

العمود 2 العنصر الرئيسي

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

width: 75% !important;

3. إضافة شعار SVG (وحدة الشفرة الداخلية)

أضف وحدة التعليمات البرمجية إلى العمود 1

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

أضف كود SVG المنسوخ

هيكلها

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 465 465">
  
<defs>
  
<style>
.cls-1{
fill:#0c1019;  
}

.cls-2{
fill:#fff;
}
</style>
  
</defs>
  
<g id="Layer_1" data-name="Layer 1">
  
<circle class="cls-1" cx="232.5" cy="232.5" r="232.5"/>
  
</g>

<g id="Layer_2" data-name="Layer 2">
  
<path class="cls-2" d="M88,284.1a49.87,49.87,0,0,1-14.9-5.78l8.36-18.92a52.84,52.84,0,0,0,12.32,5.12,48.23,48.23,0,0,0,13.09,1.92c3.59,0,6.16-.34,7.7-1a3.36,3.36,0,0,0,2.31-3.14q0-2.42-3-3.63a66.69,66.69,0,0,0-9.95-2.64A111.94,111.94,0,0,1,89,252a25.32,25.32,0,0,1-10.34-7q-4.41-4.89-4.4-13.25a22.79,22.79,0,0,1,4.07-13.21q4.07-5.94,12.15-9.35t19.64-3.4a71.06,71.06,0,0,1,15.56,1.7,48.59,48.59,0,0,1,13.48,5l-7.81,18.8q-11.34-5.72-21.45-5.72t-10,4.84q0,2.31,3,3.47a62.92,62.92,0,0,0,9.79,2.47,101.06,101.06,0,0,1,14.85,3.8,25.9,25.9,0,0,1,10.5,7q4.46,4.84,4.46,13.2a22.59,22.59,0,0,1-4.07,13.15q-4.08,5.88-12.16,9.35t-19.63,3.46A80.82,80.82,0,0,1,88,284.1Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M204.13,227a27.32,27.32,0,0,1,10.56,11,36.64,36.64,0,0,1,0,32.94,27.42,27.42,0,0,1-10.56,10.89,28.9,28.9,0,0,1-14.57,3.79q-10,0-15.29-5.16v25.41H149.41V224.31h23.65v4.95q5.38-6,16.5-6A28.91,28.91,0,0,1,204.13,227Zm-13.47,36.14q2.75-3.09,2.75-8.69c0-3.75-.92-6.66-2.75-8.75a9.46,9.46,0,0,0-14.08,0c-1.84,2.09-2.75,5-2.75,8.75s.91,6.63,2.75,8.69a9.59,9.59,0,0,0,14.08,0Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M228,215.9a12.05,12.05,0,0,1,0-18.15q4.13-3.57,10.84-3.58t10.88,3.41a11,11,0,0,1,4.08,8.8,12.12,12.12,0,0,1-4.08,9.41q-4.07,3.69-10.88,3.69T228,215.9Zm-1.59,8.41h24.85v60.17H226.41Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M276.29,281.63a30.66,30.66,0,0,1-12.65-11.12,30.79,30.79,0,0,1,0-32.28,30.74,30.74,0,0,1,12.65-11.06,41.08,41.08,0,0,1,18.31-4q11,0,18.81,4.73A24.57,24.57,0,0,1,324.19,241l-19.25,9.46q-3.51-7.92-10.45-7.92a9.65,9.65,0,0,0-7.31,3.08c-1.95,2.06-2.92,4.95-2.92,8.69s1,6.75,2.92,8.81a9.65,9.65,0,0,0,7.31,3.08q6.93,0,10.45-7.93l19.25,9.46a24.49,24.49,0,0,1-10.78,13.09q-7.8,4.74-18.81,4.73A41.21,41.21,0,0,1,276.29,281.63Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M393.05,260.17h-41.8a10.13,10.13,0,0,0,4.4,5.23,15,15,0,0,0,7.7,1.81,19.75,19.75,0,0,0,6.66-1,23.5,23.5,0,0,0,5.88-3.42l13,13.09q-8.79,9.69-26.29,9.68a43.19,43.19,0,0,1-19.14-4,30.43,30.43,0,0,1-12.76-11.17,31.09,31.09,0,0,1-.05-32.17,30.46,30.46,0,0,1,12.21-11.06,40.22,40.22,0,0,1,34.1-.33,28.65,28.65,0,0,1,12,10.67,30.85,30.85,0,0,1,4.45,16.83Q393.38,254.9,393.05,260.17Zm-38.94-17.93a10,10,0,0,0-3.3,5.95h19.36a10.06,10.06,0,0,0-3.3-5.89,9.51,9.51,0,0,0-6.38-2.15A9.72,9.72,0,0,0,354.11,242.24Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M402,281.57a13.75,13.75,0,0,1-4.13-10.29A13.36,13.36,0,0,1,402,261.11a15.8,15.8,0,0,1,20.79,0,13.35,13.35,0,0,1,4.12,10.17,13.74,13.74,0,0,1-4.12,10.29,15.48,15.48,0,0,1-20.79,0Z" transform="translate(-17.5 -17.5)"/>
  
</g>
  
</svg>

أضف Stroke & Stroke Width إلى Elements في كود CSS

في Illustrator ، استخدمنا ألوان التعبئة فقط للعناصر التي أضفناها. والسبب في ذلك هو أننا نريد تجنب إنشاء مسارات إضافية. لا يمكن التنبؤ دائمًا برمز SVG كما تعتقد ، لذا فإن إجراء بعض التغييرات اليدوية في كود CSS يمكن أن يساعد غالبًا في الحفاظ على المسارات بسيطة. لإنشاء نفس النتيجة كما في معاينة هذا المنشور ، سنحتاج إلى إضافة حد لكل من العناصر لدينا. للقيام بذلك ، سنضيف إلى سطور كود CSS إلى الفئتين داخل الكود الخاص بنا. فئة CSS “cls-1” التي تم إنشاؤها في AI تعني الدائرة ، وتمثل فئة CSS “cls-2” الخطوط العريضة للنص.

stroke: #0c1019;
stroke-width: 3px;

تقليل نصف قطر الدائرة

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

• ص = "225 ″

تعديل إعدادات وحدة التعليمات البرمجية

تحجيم

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

• عرض:
  • سطح المكتب: 25٪
  • الجهاز اللوحي: 50٪
  • الهاتف: 80٪

تباعد

نقوم أيضًا بإنشاء تداخل سفلي عن طريق تعديل إعدادات التباعد.

• حشوة علوية: 5٪
• الحشوة السفلية:
  • سطح المكتب: -12٪
  • الجهاز اللوحي: -20٪
  • الهاتف: -35٪

4. استخدم Anime.js لتحريك شعار SVG الخاص بك

أضف وحدة رمز أخرى أدناه السابقة

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

أضف مكتبة الأنمي

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

• src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"

أضف رمز الرسوم المتحركة للخط الزمني لأنيمي

أسفله مباشرةً ، ستحتاج إلى إضافة رمز animé JS بين علامات البرنامج النصي كما هو موضح في شاشة الطباعة أدناه:

jQuery(function($){
$(document).ready(function(){  
  
anime.timeline({loop: false})

.add({
duration: 2000,
})
.add({
targets: ['path.cls-2', 'circle.cls-1'],
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
})
.add({
targets: 'path.cls-2',
duration: 10,
fill: ['rgba(0,0,0,0)', '#fff'],
}) 
.add({
targets: 'circle.cls-1',
duration: 2000,
fill: ['rgba(0,0,0,0)', '#0c1019'],
});

});  
});

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

5. إضافة وحدة قائمة إلى العمود 2

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

اختر قائمة

حدد قائمة من اختيارك.

إزالة لون الخلفية

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

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

انتقل إلى علامة تبويب التصميم وقم بتعديل إعدادات نص القائمة على النحو التالي:

• لون نص القائمة: # 000000
• حجم نص القائمة:
  • سطح المكتب: 0.7vw
  • الجهاز اللوحي: 2.2vw
  • الهاتف: 3vw
• محاذاة النص: صحيح

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

قم بتغيير لون خط القائمة المنسدلة أيضًا.

• لون خط القائمة المنسدلة: #ffffff

إعدادات الرموز

جنبًا إلى جنب مع لون رمز قائمة الهامبرغر.

• لون أيقونة قائمة همبرغر: # 0c1019

تحجيم

بعد ذلك ، انتقل إلى إعدادات التحجيم وتأكد من أن العرض "100٪".

• العرض: 100٪

موقع

أكمل إعدادات الوحدة عن طريق تغيير موضع الوحدة في علامة التبويب "خيارات متقدمة".

• الموقف: مطلق
• الموقع: يسار الوسط

6. حفظ جميع تغييرات منشئ السمات

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

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

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