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

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

مقدمة لأكواد Beaver Builder المختصرة

إذا كنت قد عملت مع مواقع WordPress من قبل ، فقد تكون بالفعل على دراية بالرموز القصيرة. هذه مقتطفات صغيرة من التعليمات البرمجية التي تضيف وظائف إلى موقعك.

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

في هذا المثال ، نضيف صفًا محفوظًا إلى وحدة HTML:

عندما نضغط على Save ، يقوم Beaver Builder تلقائيًا بتحويل الرمز القصير إلى الصف المحفوظ الذي يتوافق مع:

لاحقًا في المنشور ، سنوضح لك كيفية إضافة الرموز القصيرة في المحرر. في الوقت الحالي ، دعنا نناقش فوائد استخدام الرموز القصيرة لـ Beaver Builder.

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

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

يمكنك إضافة رموز قصيرة إلى أي وحدة Beaver Builder مع حقل نصي ، بما في ذلك:

• لغة البرمجة
• نص
• رأس
• صرخ
• أيقونة
• نوافذ التبويب

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

5 أمثلة على أكواد Beaver Builder المختصرة المفيدة

هناك العديد من حالات الاستخدام لأكواد Beaver Builder المختصرة. لنلقِ نظرة على بعض الأمثلة المفيدة.

1. أزرار الحث على اتخاذ إجراء في جدول التسعير

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

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

تذكر تخصيص زر الحث على الشراء ليلائم علامتك التجارية المرئية.

2. نموذج الاتصال في علامة تبويب

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

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

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

انه من السهل! الآن يمكن للعملاء الاتصال بك دون الحاجة إلى مغادرة الصفحة.

3. الصور داخل مربع نص

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

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

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

4. أي وحدة نمطية في محرر القوالب

يمكنك أيضًا استخدام الرموز المختصرة لـ Beaver Builder عند العمل مع Block Editor. قد يكون هذا مفيدًا بشكل خاص إذا كنت تكتب منشور مدونة وتريد إضافة عناصر تفاعلية إلى مقالتك.

يمكنك بسهولة إسقاط وحدة Beaver Builder في الصفحة دون مغادرة Block Editor. ما عليك سوى إدخال كتلة رمز قصير ولصق الكود الخاص بك بالداخل:

بمجرد نشر المنشور ، سيعرض الرمز القصير المحتويات في الواجهة الأمامية:

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

5. The Date (سمة Beaver Builder فقط)

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

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

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

كيفية إضافة الرموز القصيرة باستخدام Beaver Builder (في خطوتين)

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

الخطوة 1: قم بإنشاء الرمز القصير الخاص بك

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

• الوحدات
• صفوف
• الأعمدة
• القوالب

على سبيل المثال ، لنفترض أنك تريد تصميم وحدة نموذج جهة اتصال مخصصة. يمكنك القيام بذلك عن طريق الانتقال إلى Beaver Builder> Saved Modules> Add New :

سيُطلب منك بعد ذلك تسمية الوحدة النمطية الخاصة بك واختيار نوعها:

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

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

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

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

يمكنك الآن استخدام الكود التالي لإنشاء رمز قصير لهذه الوحدة:

 [fl_builder_insert_layout slug="my-post-slug"]

تذكر استبدال "my-post-slug" بقطعة وحدة Beaver Builder الخاصة بك. في مثالنا ، سيبدو كالتالي:

 [fl_builder_insert_layout slug="contact-form"]

هذا كل شيء - أنت تعرف الآن كيفية إنشاء رموز قصيرة لوحدات Beaver Builder النمطية.

الخطوة 2: أدخل الرمز القصير في صفحتك

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

إليك مثال جدول الأسعار الخاص بنا من وقت سابق. كما ترى ، أضفنا الرمز المختصر لزر CTA في مربع النص Feature 5 :

نظرًا لأن Beaver Builder يستخدم محررًا للواجهة الأمامية ، فستتمكن من رؤية الوحدة المحفوظة على الفور. في بعض الحالات (مثل عند استخدام وحدة HTML) ، قد تحتاج إلى حفظ التغييرات قبل أن يتحول الرمز القصير إلى العنصر المرئي.

استنتاج

تمكنك الرموز المختصرة لـ Beaver Builder من إضافة وحدات أو صفوف أو أعمدة أو تخطيطات محفوظة بسرعة إلى أجزاء مختلفة من صفحاتك. يمكنك استخدامها لتسريع عملية التصميم وإنشاء صفحات WordPress جميلة.

للتلخيص ، يمكنك استخدام الرموز القصيرة Beaver Builder باتباع الخطوات البسيطة التالية:

1. احفظ عنصرًا (وحدة نمطية أو صفًا أو عمودًا أو تخطيطًا) وابحث عن الرمز المختصر أو الرابط الثابت.
2. أدخل الرمز القصير في حقل نصي داخل وحدة Beaver Builder أو في كتلة Shortcode في Block Editor.

هل أنت مستعد لبدء إنشاء صفحات مذهلة لموقعك؟ تحقق من القائمة الكاملة لميزات Beaver Builder سهلة الاستخدام!

أسئلة ذات صلة

هل يستخدم Beaver Builder الرموز القصيرة؟

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

هل تحتاج إلى سمة Beaver Builder لاستخدام الرموز القصيرة؟

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

ما هو الفرق بين Beaver Builder و Beaver Themer؟

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