تبديل القائمة

كيفية إنشاء الرؤوس والتذييلات باستخدام Beaver Themer

نشرت: 2024-10-03

خصم 25% على جميع منتجات Beaver Builder... سارع إلى انتهاء التخفيضات قريبًا! يتعلم أكثر

how to create headers and footers using beaver themer
  • سمور ثامر

كيفية إنشاء الرؤوس والتذييلات باستخدام Beaver Themer

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

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

في هذا الدليل، سنستكشف أربع خطوات مباشرة لإنشاء الرؤوس والتذييلات باستخدام Beaver Themer. دعونا الغوص في!

جدول المحتويات

  • مقدمة إلى سمور Themer
  • كيفية إنشاء رؤوس باستخدام Beaver Themer (في 4 خطوات)
  • كيفية إنشاء تذييلات باستخدام Beaver Themer (في 4 خطوات)
  • الأفكار النهائية
  • أسئلة ذات صلة

مقدمة إلى سمور Themer

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

سمور Themer موضوع منشئ البرنامج المساعد

مع سمور Themer، يمكنك:

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

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

احصل على إمكانية الوصول إلى Beaver Themer مع الخطط المميزة

والخبر السار هو أن Beaver Themer متضمن في أي خطة Beaver Builder المتميزة:

تسعير بيفر بيلدر الجديد 2024

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

الآن بعد أن اكتشفنا فوائد Beaver Themer، دعنا ننتقل إلى عملية إنشاء الرؤوس خطوة بخطوة باستخدام Beaver Themer.

كيفية إنشاء رؤوس باستخدام Beaver Themer (في 4 خطوات)

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

للبدء، تأكد من تثبيت أداة إنشاء الصفحات Beaver Builder المتميزة ومكونات Beaver Themer الإضافية وتنشيطها وترخيصها. قم أيضًا بإنشاء قائمة لموقعك من خلال الانتقال إلى Appearance > Menus في لوحة تحكم WordPress.

الخطوة 1: إنشاء تخطيط موضوع جديد

لإنشاء تخطيط Themer جديد، انقر فوق Beaver Builder > Themer Layouts من منطقة إدارة WordPress الخاصة بك. ثم اختر إضافة جديد :

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ الخطوة 1: إنشاء تخطيط موضوع جديد

هنا، يمكنك إعطاء التصميم الخاص بك عنوانًا :

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ أضف رأسًا إلى WordPress باستخدام Beaver Themer

بالنسبة للنوع ، حدد تخطيط الموضوع . بالنسبة للتخطيط ، استخدم القائمة المنسدلة لاختيار الرأس . انقر فوق إضافة تخطيط Themer للمتابعة.

الخطوة 2: تكوين الإعدادات

بعد ذلك، في صفحة الإعدادات، حدد مكان وكيفية عرض الرأس:

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

انقر فوق نشر لحفظ هذه الإعدادات.

الخطوة 3: تخصيص تخطيط رأسك

الآن بعد أن تم تكوين إعداداتك، انقر فوق Launch Beaver Builder لفتح رأسك الجديد في المحرر:

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ قم بالوصول إلى محرر Beaver Builder لتخصيص رأس Beaver Themer الخاص بك

هنا، يوفر لك Beaver Builder تلقائيًا قالب رأس افتراضي يحتوي على عدة وحدات بما في ذلك تلك الخاصة بتفاصيل الاتصال والأيقونات الاجتماعية والعنوان والقائمة:

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ الخيارات الافتراضية المتوفرة مع رأس Beaver Themer

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

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ اختر من بين قوالب تخطيط رأس Beaver Themer المتوفرة

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

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ قم بتحرير عنوان موقع الويب الخاص بك باستخدام Beaver Builder

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

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ احذف الاتصال الميداني في رأس Beaver Themer الخاص بك

بعد ذلك، اكتب ببساطة عنوانك المفضل في حقل نص العنوان :

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ أضف عنوانًا جديدًا إلى رأس Beaver Themer الخاص بك

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

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ تخصيص عنوان رأس Beaver Themer الخاص بك

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

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ نقل وحدات Beaver Builder في رأسك

لتحديث لون خلفية الصف الخاص بك، انقر فوق رمز مفتاح الربط . في القائمة المنبثقة "إعدادات الصف"، انتقل إلى علامة التبويب "النمط"، ثم قم بالتمرير إلى "لون الخلفية" واختر الظل المطلوب:

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ تغيير لون خلفية رأسك

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

الخطوة 4: إضافة محتوى إلى رأسك

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

لإعداد اتصالات الحقول الخاصة بك، ما عليك سوى النقر على أيقونة + الموجودة بجوار المربع لعرض الحقول المتاحة:

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ إنشاء اتصال ميداني باستخدام Beaver Builder

ثم انقر فوق "اتصال" لإنشاء المحتوى الديناميكي الخاص بك.

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

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ فتح الشريط الجانبي لـ Beaver Builder

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

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ استخدام وحدة محرر النصوص Beaver Builder

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

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ تحرير محرر النصوص الخاص بك في Beaver Builder

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

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

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ وحدة زر Beaver Builder

في علامة تبويب النمط، يمكنك ضبط العرض واختيار ألوان النص والخلفية - بما في ذلك ألوان التمرير - وتعديل المحاذاة والحشو:

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ تخصيص الزر في رأسك

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

كيفية إنشاء تذييلات باستخدام Beaver Themer (في 4 خطوات)

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

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

لإنشاء تذييلك المخصص، ستتبع عملية مماثلة كما هو الحال عند إنشاء رأسك، باستخدام المكوّن الإضافي المتميز لإنشاء الصفحات Beaver Builder بالإضافة إلى Beaver Themer.

الخطوة 1: إعداد تخطيط Themer جديد

تمامًا كما هو الحال مع رأسك، ستبدأ بإنشاء تخطيط لتذييلك. انتقل إلى Beaver Builder > Themer Layouts وانقر على "إضافة جديد" .

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ قم بإعداد تخطيط موضوع جديد

الخطوات هي نفسها تقريبًا كما كانت من قبل — قم بتسمية التذييل الخاص بك، وحدد Themer Layout للنوع ، ثم اختر Footer للتخطيط :

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ أضف تذييلًا جديدًا باستخدام Beaver Themer

ثم، انقر فوق إضافة تخطيط Themer .

الخطوة 2: تكوين إعدادات التذييل

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

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

إنشاء رؤوس وتذييلات باستخدام موضوع القندس؛ قم بتحرير تخطيط التذييل الخاص بك باستخدام Beaver Themer

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

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

الخطوة 3: تخصيص تخطيط التذييل الخاص بك

الآن، حدد Launch Beaver Builde r لفتح المحرر:

قم بتشغيل Beaver Builder لتحرير التذييل الخاص بك

كما هو الحال مع الرأس، قدم Beaver Builder قالب تخطيط افتراضي للتذييل الخاص بك:

وحدات تذييل Beaver Builder الافتراضية

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

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

إعدادات الرأس في Beaver Builder

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

قم بتحرير العناوين الموجودة في تذييل Beaver Themer الخاص بك

انقر على حفظ لتطبيق التغييرات الخاصة بك.

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

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

أضف روابط إلى تذييل Beaver Themer الخاص بك

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

يتضمن Beaver Builder إشعارًا بحقوق النشر بشكل افتراضي. اضبطه من خلال النقر على الوحدة وإضافة البيان الخاص بك:

قم بتحرير إشعار حقوق الطبع والنشر في Beaver Themer

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

الخطوة 4: إضافة محتوى إلى تذييل الصفحة

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

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

أضف نموذج الاشتراك إلى تذييل الصفحة الخاصة بك

يتكامل Beaver Builder مع العديد من موفري خدمات التسويق عبر البريد الإلكتروني، مما يسمح لك باختيار الخدمة المفضلة لديك من القائمة المنسدلة:

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

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

قم بالتبديل إلى علامة تبويب الزر لتحرير نص الزر وضبط الألوان وإضافة الحشو والمزيد:

قم بتحرير زر الاشتراك الخاص بك في نموذج الاشتراك الخاص بك

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

فكر في إضافة روابط إلى حساباتك الاجتماعية أيضًا. استخدم وحدة Icon Group واسحبها إلى تذييل الصفحة:

إضافة وحدة مجموعة الأيقونات في Beaver Builder

ثم، في علامة التبويب "الأيقونات" في النافذة المنبثقة، انقر فوق "تحرير الأيقونة" :

قم بتحرير وحدة مجموعة أيقونات Beaver Builder

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

أضف أيقوناتك الاجتماعية إلى تذييل الصفحة

انقر فوق "حفظ" للعودة إلى حيث يمكنك إضافة بقية روابطك الاجتماعية:

إضافة أيقونات وسائل التواصل الاجتماعي إلى تذييل الصفحة

استمر في إضافة وحدات إلى تذييل الصفحة. عندما تصبح راضيًا عن التخطيط، انقر فوق تم > نشر .

الأفكار النهائية

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

فيما يلي ملخص سريع لكيفية إنشاء الرؤوس والتذييلات باستخدام Beaver Themer:

  1. قم بإنشاء تخطيط Beaver Themer جديد.
  2. قم بتكوين الإعدادات الخاصة بك.
  3. تخصيص تخطيطات رأس وتذييل الصفحة الخاصة بك.
  4. أضف محتوى إلى رأسك أو تذييلك.

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

أسئلة ذات صلة

ما هي فوائد استخدام Beaver Themer للرؤوس والتذييلات؟

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

كيف يمكنك استخدام سمور Themer؟

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

كيف أجعل رأسي متوافقًا مع الهاتف المحمول؟

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

نبذة عن ويل موريس

ويل موريس كاتب في WordCandy. عندما لا يكتب عن WordPress، فإنه يحب أن يقدم عروضه الكوميدية الروتينية على الدائرة المحلية.

النشرة الإخبارية لدينا

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

انضم إلى النشرة الإخبارية

جرب Beaver Builder اليوم

Beaver Builder