العنصر: كيفية إضافة reCAPTCHA إلى النموذج الخاص بك

العنصر: كيفية إضافة reCAPTCHA إلى النموذج الخاص بك

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885px {margin-bottom: 0 ! important؛ border-bottom-width: 0px! important؛ padding-bottom: 0px! important؛} "] [vc_column_text]

Divi: أسهل طريقة لاستخدام WordPress

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

هل تريد إضافة reCAPTCHA إلى نموذج Elementor الخاص بك؟

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

لا ، لست بحاجة إلى تثبيت مكون إضافي إضافي. يدعم Elementor بالفعل التكامل مع reCAPTCHA. كل ما عليك فعله هو توصيل موقع الويب الخاص بك بـ reCAPTCHA وإضافة حقل reCAPTCHA إلى النموذج الخاص بك.

ربط موقع الويب الخاص بك مع reCAPTCHA

قبل أن نبدأ ، نفترض أنك قمت بترقية إصدارك المجاني من Elementor إلى الإصدار Pro نظرًا لأن تكامل reCAPTCHA متاح فقط في Elementor Pro.

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

انقر فوق زر علامة الجمع لتسجيل موقع ويب جديد.

أضف reCAPTCHA إلى نموذج Elementor الخاص بك

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

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

بعد النقر فوق الزر خلق، سترى مفتاح الموقع والمفتاح السري. انسخ هذه المفاتيح.

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

أضف reCAPTCHA إلى نموذج Elementor الخاص بك

أضف reCAPTCHA إلى نموذج Elementor

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

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

حدد الحجم والنمط (فاتح أو غامق).

أضف reCAPTCHA إلى نموذج Elementor الخاص بك

وبالتالي. النموذج الذي اقترحه reCAPTCHA جاهز الآن للنشر. انقر فوق الزر النشر / التحديث بمجرد الانتهاء من تخصيص النموذج الخاص بك.

احصل على Elementor Pro الآن!

الخلاصة

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...

Elementor: كيفية إضافة فاصل لإنشاء قسم

Elementor: كيفية إضافة فاصل لإنشاء قسم

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885px {margin-bottom: 0 ! important؛ border-bottom-width: 0px! important؛ padding-bottom: 0px! important؛} "] [vc_column_text]

Divi: أسهل طريقة لاستخدام WordPress

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

هل تحتاج إلى إضافة فاصل لإنشاء قسم في Elementor؟

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

في Elementor ، يمكنك إضافة قسم جديد بالنقر فوق زر علامة الجمع في مربع تحرير Elementor.

إضافة حاجز لإنشاء قسم في Elementor

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

في هذه المقالة ، سوف نوضح لك كيفية إضافة فاصل في Elementor.

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

يستخدم Elementor ملفات SVG للأشكال ، مما يجعلها قابلة للتعديل بدون تقليل جودة الصورة (الحدة).

كيفية إضافة مقسم شكل في Elementor

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

اكتشف أيضًا دليلنا على: العنصر: كيفية استخدام منتقي الألوان

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

إضافة حاجز لإنشاء قسم في Elementor

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

إضافة حاجز لإنشاء قسم في Elementor

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

اقرأ أيضا العنصر: كيفية إضافة صورة إلى أداة جدول الأسعار

يمكنك أيضًا ضبط ارتفاع الحاجز وعرضه. لتعيين لون الشكل ، انقر على منتقي الألوان في القسم اللون.

حاجز لإنشاء قسم في Elementor

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

إضافة حاجز لإنشاء قسم في Elementor

احصل على Elementor Pro الآن!

الخلاصة

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...

العنصر: كيفية إضافة صورة إلى أداة جدول الأسعار

العنصر: كيفية إضافة صورة إلى أداة جدول الأسعار

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885px {margin-bottom: 0 ! important؛ border-bottom-width: 0px! important؛ padding-bottom: 0px! important؛} "] [vc_column_text]

Divi: أسهل طريقة لاستخدام WordPress

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

هل ترغب في إضافة صورة إلى أداة جدول الأسعار في Elementor؟

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

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

لكن الوظيفة التي تفتقر إليها هذه الأداة هي القدرة على إضافة صورة.

اقرأ أيضا: كيفية إنشاء معرض صور مبوب في Elementor

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

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

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

كيفية إضافة صورة إلى أداة جدول الأسعار في Elementor

في الخيار يكرر، ضبط ل عدم التكرار. في الخيار يقطع، ضبط ل يحتوي. في الخيار موضع، ضبط ل تخصيص وقم بتعيين موضع X وموضع Y.

ثم انتقل إلى علامة التبويب ستايل وافتح الخيار التسعير. قم بفك تجميع الحشوات وضبط الحشوة العلوية على حوالي 170 (يمكنك تعيين أي قيمة تناسب احتياجاتك).

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

انظر أيضا: كيفية إنشاء معرض صور باستخدام Elementor

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

كيفية إضافة صورة إلى أداة جدول الأسعار في Elementor

احصل على Elementor Pro الآن!

الخلاصة

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...
العنصر: كيفية إنشاء نموذج تحميل ملف

العنصر: كيفية إنشاء نموذج تحميل ملف

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885px {margin-bottom: 0 ! important؛ border-bottom-width: 0px! important؛ padding-bottom: 0px! important؛} "] [vc_column_text]

Divi: أسهل طريقة لاستخدام WordPress

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

هل ترغب في معرفة كيفية إنشاء نموذج تحميل ملف في Elementor؟

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

في هذه المقالة ، سنوضح لك كيفية إنشاء نموذج يتكون من حقل تحميل ملف.

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

اقرأ دليلنا على: كيفية تثبيت Elementor على WordPress

أولاً ، قم بإنشاء صفحة جديدة أو قم بنشرها وتحريرها باستخدام Elementor.

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

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

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

كيفية إنشاء نموذج في Elementor

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

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

اقرأ أيضا: كيفية إضافة reCAPTCHA إلى نموذج Elementor الخاص بك

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

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

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

كيفية إنشاء نموذج تحميل ملف في Elementor

تعريف العمل

سيكون من الرائع أن تتمكن من ربط نموذج Elementor بـ شكل خدمات الخلفية مثل getform ou فورماري. لسوء الحظ ، لا يدعم Elementor التكامل مع أي خدمة خلفية للنموذج.

اكتشف كيف: كيفية إضافة فاصل لإنشاء قسم في Elementor

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

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

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

كيفية إنشاء نموذج تحميل ملف في Elementor

دائما تحت الخيار البريد الإلكتروني، تعيين نص البريد الإلكتروني على الخيار رسالة.

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

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

كيفية إنشاء نموذج تحميل ملف في Elementor

ستظهر البيانات الوصفية نفسها أسفل نص البريد الإلكتروني.

في الحقول من البريد الإلكتروني, من الاسم والرد على، يمكنك تركها فارغة.

تخصيص النموذج

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

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

  • حدد المسافة بين الخطوط وطباعة الملصقات

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

تعيين مساحة الخط في القسم فجوة الصفوف. لتحديد طباعة الملصقات (حجم الخط ونمط الخط وعائلة الخط) ، يمكنك النقر فوق رمز القلم الرصاص الخاص بـ طباعة في القسم التسمية

  • حدد طباعة الحقل ولون الخلفية ولون الحدود وعرض الحدود ونصف قطر الحد

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

كيفية إنشاء نموذج تحميل ملف في Elementor

  • زر التخصيص

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

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

خطأ محتمل

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

كيفية إنشاء نموذج تحميل ملف في Elementor

يحدث الخطأ أعلاه عادةً إذا كنت تستخدم خدمة استضافة ويب مشتركة. يقوم معظم مزودي استضافة الويب المشتركين بتعطيل الميزة php send_mail ، الذي تستخدمه وظيفة WordPress wp_mail لإرسال رسائل البريد الإلكتروني.

احصل على Elementor Pro الآن!

الخلاصة

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...

العنصر: كيفية إضافة جدول محتويات

العنصر: كيفية إضافة جدول محتويات

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885px {margin-bottom: 0 ! important؛ border-bottom-width: 0px! important؛ padding-bottom: 0px! important؛} "] [vc_column_text]

Divi: أسهل طريقة لاستخدام WordPress

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

هل تحتاج إلى إنشاء أو إضافة جدول محتويات في Elementor؟

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

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

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

تتيح لك أداة Elementor Table of Contents اختيار علامات الرأس الدقيقة لعرضها على جدول المحتويات الخاص بك. يمكنك أيضًا استخدام رؤوس من حاوية معينة على الصفحة.

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

كيفية استخدام عنصر واجهة مستخدم جدول المحتويات في Elementor

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

اقرأ أيضا: كيفية إنشاء نموذج تحميل ملف في Elementor

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

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

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

للبدء ، قم بتسجيل الدخول إلى لوحة معلومات WordPress الخاصة بك وانتقل إلى القوالب -> مُنشئ القوالب. في صفحة Theme Builder ، انتقل إلى علامة تبويب واحدة وانقر على زر أضف قطعة واحدة لإنشاء قالب.

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

سننشئ قالب المنشور الفردي من البداية ؛ أغلق مكتبة القوالب.

انظر أيضا: كيفية إضافة reCAPTCHA إلى نموذج Elementor الخاص بك

أضف قسمًا جديدًا بالنقر فوق زر علامة الجمع في مربع تحرير Elementor وحدد بنية الأعمدة الثلاثة.

قم بتعيين عرض الأعمدة بمقارنة بحوالي 28٪: 61٪: 10٪.

كيفية إضافة جدول محتويات في Elementor

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

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

إذا كانت لديك معرفة بـ CSS ، فيمكنك استبعاد محددات CSS لمنعها من الظهور في قائمة المحتويات.

اقرأ أيضا: كيفية إضافة فاصل لإنشاء قسم في Elementor

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

فتح إضافي الخيارات لعرض خيارات الإعداد الأخرى وتحديد الإعدادات المطلوبة.

كيفية إضافة جدول محتويات في Elementor

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

أثناء تعيين لون الرأس وطباعة الرأس ونص الرأس ، يمكنك الانتقال إلى القسم الرأس.

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

أنظر أيضا: كيفية تثبيت Elementor على WordPress

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

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

فيما يلي مثال لجدول محتويات أنشأناه.

كيفية إضافة جدول محتويات في Elementor

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

في النهاية

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

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

احصل على Elementor Pro الآن!

الخلاصة

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...

العنصر: كيفية إضافة ترقيم الصفحات

العنصر: كيفية إضافة ترقيم الصفحات

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885px {margin-bottom: 0 ! important؛ border-bottom-width: 0px! important؛ padding-bottom: 0px! important؛} "] [vc_column_text]

Divi: أسهل طريقة لاستخدام WordPress

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

هل تحتاج إلى إضافة ترقيم الصفحات في Elementor؟

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

انظر أيضا: كيفية تثبيت Elementor على WordPress

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

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

اقرأ أيضا: كيفية إضافة جدول محتويات في Elementor

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

ملاحظة: لا تتوفر عناصر واجهة المستخدم منشورات ومنشورات الأرشيف إلا في Elementor Pro.

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

للبدء ، يمكنك إنشاء صفحة / منشور جديد وتحريره باستخدام Elementor. يمكنك أيضًا تحرير صفحة موجودة.

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

كيفية إضافة ترقيم الصفحات في Elementor

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

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

انظر أيضا: كيفية إضافة reCAPTCHA إلى نموذج Elementor الخاص بك

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

سيقوم WordPress (أو Elementor بشكل أكثر دقة) بإخفاء المشاركات القديمة بخلاف آخر 50 مشاركة.

كيفية إضافة ترقيم الصفحات في Elementor

من أجل جعل ترقيم الصفحات قصيرًا وأنيقًا ، يمكنك تنشيط الخيار تقصر.

تخصيص ترقيم الصفحات

لتخصيص ترقيم الصفحات ، يمكنك فتح الخيار ترقيم الصفحات تحت علامة التبويب "النمط" من اللوحة اليسرى.

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

لتعيين لون ترقيم الصفحات ، يمكنك النقر فوق منتقي الألوان في القسم الألوان. هناك 3 ألوان يمكنك ضبطها: عادي ، وتحوم ، ونشط (الصفحة النشطة). يمكنك ضبط المسافة بين أرقام ترقيم الصفحات في القسم الفضاء بين.

بمجرد الانتهاء ، يمكنك النقر فوق الزر للنشر لنشر صفحتك. أو ، إذا كنت تقوم بتحرير صفحة ، يمكنك النقر فوق الزر تحديث لتطبيق التغييرات الجديدة.

كيفية إضافة ترقيم الصفحات في Elementor

الكلمات الأخيرة

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

اقرأ أيضا: كيفية إنشاء نموذج تحميل ملف في Elementor

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

احصل على Elementor Pro الآن!

الخلاصة

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...