كيفية إنشاء صفحة ويب infographic مع Elementor
نشرت: 2025-02-10من خلال القصص والمعلومات على بعد بضع نقرات ، يعتمد الناس بشكل متزايد على الإحصاءات والبيانات العددية حول الروايات المجردة لاتخاذ قرارات مستنيرة. هذا هو المكان الذي تتألق فيه صفحات الويب الرسم البياني. لا يجذبون الزوار فحسب ، بل إنهم يأسرون ويحظى بالاهتمام ، مما يجعل المعلومات المعقدة في متناول الجميع وجذابة.
علاوة على ذلك ، يمكن أن تقدم صفحات الويب الرسم البياني بيانات معقدة بطرق مقنعة وسهلة القراءة. عندما ترافق الرسوم البيانية أي دراسات حالة أو قصص/أفكار افتراضية ، يمكنها إنشاء قيم قوية لجماهير السوق. ومع ذلك ، ليس من الصعب إنشاء صفحات ويب infographic.
مع Elementor و HappyAddons ، يمكنك إنشاء أي نوع من تصميم صفحات الويب الرسم البياني على WordPress. في هذا المنشور التعليمي ، سنعرض دليلًا خطوة بخطوة حول كيفية إنشاء صفحة ويب infographic مع Elementor. لنبدأ!
ما هي صفحة ويب infographic؟
تم تصميم صفحة ويب infographic لتقديم المعلومات باستخدام تمثيلات رسومية لتوضيح المفاهيم. فهو يجمع بين العناصر المرئية المختلفة مثل الصور والمخططات والأرقام الإحصائية والرموز ، وما إلى ذلك ، مع الحد الأدنى من النصوص لتبسيط البيانات الشاملة.
تعطي صفحات الويب الرسم البياني الأولوية للمحتوى المرئي لتحسين قابلية القراءة حتى يتمكن الأشخاص من فهم المفهوم بأكمله بسهولة من النظرة الأولى. عادة ما يتم إنشاء هذا النوع من الصفحة لأغراض سرد القصص وتصور البيانات والأغراض التعليمية. لا شك أن صفحات الويب الرئوية لديها معدلات احتباس ومشاركة أعلى.
لماذا ومتى تحتاج إلى صفحات ويب infographic
دعونا الآن نلقي نظرة سريعة على السبب ومتى تحتاج إلى تصميمات صفحات الرسم البياني على موقع الويب الخاص بك قبل الغوص في قسم البرنامج التعليمي. دعونا نستكشف.
- يبسط المعلومات المعقدة
تساعد العناصر المرئية للمستخدمين على فهم موضوعات البيانات المعقدة دون أن تغمرها تحطيم رؤى رئيسية.
- يبقي الزوار على موقع الويب الخاص بك لفترة أطول
تحفز صفحة الرسم البياني الفعالة للزائرين على البقاء على موقعك لفترة أطول عن طريق تقليل معدلات الارتداد وتعزيز إمكانات التحويل.
- يقوي سلطة العلامة التجارية
من خلال عرض البيانات المهيكلة والرؤى القيمة بصريًا ، يمكنك إنشاء موقع الويب الخاص بك كمزود معلومات موثوق به.
- للتسويق والمحتوى الترويجي
تبرز صفحات الرسم البياني كوسيلة فعالة لعرض مقارنات المنتج إلى جانب أبرز الأحمال. يمكنك أيضًا عرض شهادات العملاء لجذب انتباه العملاء.
- مشاركة المشاركات على وسائل التواصل الاجتماعي
من السهل مشاركة المحتوى الرسم البياني على منصات الوسائط الاجتماعية. إلى جانب ذلك ، في الآونة الأخيرة ، يحب الناس عرض الرسوم البيانية والمعلومات الإحصائية أكثر من القصص النصية.
كيفية إنشاء صفحة ويب infographic مع Elementor
إذا كنت تستخدم WordPress لبضعة أسابيع على الأقل ، فقد تكون قد سمعت عن Elementor . إنه مكون إضافي قوي لشراء صفحات السحب والإفلات والذي يمكنك من خلاله تصميم صفحات الويب دون الترميز. كل ما عليك فعله هو اختيار مصادر التصميم ، وسحبها وإسقاطها على الصفحة ، وتخصيصها.
Happyaddons هو ملحق معروف لمكوّن الإله. إنه يأتي مع العديد من مصادر وميزات التصميم الإضافية. إذا شعرت أن Elementor لا يكفي ، فيمكنك تجربة Happyaddons معها. باستخدام المكونات الإضافية معًا ، يمكنك القيام بالسحر في مجال تصميم الويب.
احصل على المكونات الإضافية بالنقر فوق الروابط أدناه.
- عنصر
- Happyaddons
- Happyaddons Pro
يمكنك إنشاء صفحات infographic باستخدام الإصدارات المجانية فقط من Elementor و HappyAddons. لكن النسخة الممتازة تأتي مع بعض الموارد الأكثر إثارة. لذلك ، سنستخدم النسخة الممتازة من Happyaddons في هذا البرنامج التعليمي.
بمجرد تثبيت المكونات الإضافية وتفعيلها على موقع الويب الخاص بك ، ابدأ باتباع البرنامج التعليمي كما هو موضح أدناه.
الخطوة 01: افتح منشورًا أو صفحة مع Elementor
افتح منشورًا أو صفحة مع Elementor. على اليسار هي لوحة Elementor ، حيث ستجد جميع مصادر التصميم والميزات. على اليمين يوجد Canvas Elementor ، حيث يتعين عليك سحب وإسقاط العناصر المستخدمة لتصميم صفحة الويب الرسم البياني.
الخطوة 02: قم بإنشاء أعمدة لوضع واجهة المستخدم
قبل وضع أي عنصر واجهة مستخدم ، يجب إنشاء أعمدة. للقيام بذلك ، انقر فوق أيقونة (+) زائد . ثم ، حدد خيار حاوية Flexbox . بعد ذلك ، حدد بنية عمود تحتاجها للتصميم.
تحقق من كيفية إضافة Lightbox في WordPress مع Elementor.
الخطوة 03: ابدأ في إضافة عناصر واجهة مستخدم مناسبة إلى الأعمدة
وفقًا لتفضيلات التصميم الخاصة بك ، ضع أجهزة واجهة المستخدم في الأعمدة التي أنشأتها. دعونا نرى كيف نقوم بتصميم هذا القسم.
# أضف أداة الصورة
اكتب " صورة " في مربع البحث. بمجرد ظهور أداة الصورة أدناه ، اسحبه وإسقاطه إلى قسم مناسب في منطقة بنية العمود.
قم بتحميل صورة أو إضافة واحدة من مكتبة الوسائط إلى منطقة عنصر واجهة المستخدم من القسم المحدد في الصورة أدناه.
# أضف عنصر العنوان
ابحث عن أداة العنوان ووضعها في العمود الأيمن.
اكتب عنوانًا لصفحة الرسم البياني. كما سأقوم بإنشاء هذه الصفحة لمرض السكري ، لقد كتبتها لعنوان الصفحة.
تعال إلى علامة التبويب النمط . ستحصل على خيارات لتغيير المحاذاة والطباعة ولون النص والمزيد.
# أضف عنصر واجهة تحرير النصوص
بعد ذلك ، أضف عنصر واجهة تحرير النص أسفل العنوان. سيسمح لك بإضافة نصوص وفقرات عادي إلى قماش.
الآن ، بنفس الطريقة ، أضف النص المطلوب إلى عنصر واجهة تحرير النصوص. ثم ، قم بزيادة خطها ، وتغيير عائلة الخط ، وحدد لونًا كما أظهرناه أعلاه.
إذا كنت ترغب في تقليل الفجوة بين اثنين من القطاعين ، يمكنك تخصيص إعدادات الهامش .
بالطريقة نفسها ، أضف نصًا وصورًا إضافية إلى قماش باستخدام أجهزة التشغيل المعنية.
باستخدام خيار الهامش ، يمكنك نقل ووضع أي عنصر واجهة مستخدم إلى مكان آخر ، مثل الخريطة الموجودة على الصورة أدناه. أتمنى أن تفهم ذلك.
تعلم كيفية إنشاء تقويم حدث في WordPress.
الخطوة 04: إنشاء قسم جديد لإضافة مخططات إحصائية
صفحة موقع الويب هي مزيج من عدة أقسام. لذلك ، لإنشاء قسم جديد ، يجب عليك إضافة منطقة بنية عمود جديدة إلى الصفحة.
باستخدام أداة محرر النصوص ، أضف نسخة إلى قسم الرسم البياني الجديد ، كما فعلنا أدناه.
# أضف عنصرًا مخططًا إلى اللوحة القماشية
يأتي HappyAddons مع ستة أجهزة تعاملات مخططات مفيدة حقًا لتصميم صفحة الويب الرمزية. ما عليك سوى استكشاف أجهزة تشغيل المخططات وحدد تلك التي تحبها في تصميم صفحة الويب الرسم البياني.
سنستخدم أداة Bars Pars لإظهار بعض البيانات الإحصائية.
المسبقة تأتي مع قوالب مصممة مسبقا. يمكنك تحديد أي إعداد مسبق لعنصر الأشرطة المهارات أو البقاء مع الافتراضي.
من قسم المهارات ، يمكنك إضافة معلومات إلى جميع الحانات واحدة تلو الأخرى بالنقر فوق علامات التبويب المعنية. يمكنك أن ترى أننا قمنا بإعادة تسميتها وضبط النسب المئوية لكل منها.
انتقل إلى علامة التبويب النمط ، مع محددة عنصر واجهة مستخدم أشرطة المهارات. يمكنك تغيير لون النص ، والطباعة ، والإعدادات الأخرى المختلفة للعناصر واجهة المستخدم.
باستخدام كتلة محرر النصوص ، يمكنك إضافة المزيد من المعلومات إلى الجانب الأيسر لاستخدام المساحة البيضاء.
الخطوة 05: إنشاء بنية عمود جديدة لمزيد من المعلومات
لإضافة قسم آخر ، قم بإنشاء بنية عمود جديدة مرة أخرى. ثم ، أضف صورة ووصفًا نصيًا كما فعلنا في الصورة أدناه.
ثم ، على الجانب الأيمن ، املأ المساحة البيضاء بمعلومات مناسبة. لقد أضفنا نصين باستخدام أداة محرر النصوص. بينهما ، احتفظنا بقسم باستخدام حاوية Flexbox.
يمكنك إنشاء هذه الأقسام الفرعية باستخدام حاوية Flexbox هذه.
الآن ، أضف أداة الأيقونة إلى أقسام الحاويات.
يأتي أداة الأيقونة مع مجموعة شاملة من الرموز في المكتبة. يمكنك تغيير الرمز واحدًا تلو الآخر لجميع الأقسام. افعل ذلك كما فعلنا.
لتغيير لون الأيقونة ، انتقل إلى علامة تبويب النمط> اللون الأساسي .
لتغيير موقفهم ، انتقل إلى علامة تبويب التخطيط> الهامش . آمل أن تتمكن من القيام بالباقي بنفسك.
الخطوة 06: قم بإنشاء القسم الأخير لتصميم صفحة الويب الرسم التوضيحية
مثل أعلاه ، قم بإنشاء قسم جديد وبنية عمود باستخدام حاوية Flexbox. إضافة أيضا عنوان للقسم.
# أضف مخطط فطيرة
كما ذكر أعلاه ، يأتي Happyaddons مع العديد من أجهزة المصادر الرسم البياني المفيدة. سنستخدم مخطط الفطيرة في هذا القسم. اسحبه وإسقاطه إلى القسم المعني.
من قسم مخطط الفطيرة من عنصر واجهة المستخدم ، حدد معلومات عن مخطط الفطيرة باستخدام جميع علامات التبويب واحدة تلو الأخرى.
قم بتوسيع قسم الإعدادات . من هنا ، يمكنك تخصيص العديد من الأشياء. لكن أبرزها يمكنك القيام به هو كتابة عنوان وتغيير موقف الأسطورة .
انتقل إلى علامة التبويب النمط . يمكنك تخصيص الطباعة وحجم الخط وتأثيرات الألوان المختلفة للعناصر واجهة المستخدم.
# أضف مخطط شريط
بالطريقة نفسها ، أضف عنصر واجهة مستخدم الرسم البياني إلى اللوحة القماشية.
مثل قضبان المهارات وأدوات المخططات الشريطية ، قم بتخصيص عنصر واجهة مستخدم مخطط الشريط ، وإعداد المعلومات والأسلوب كما تريد. آمل أن تتمكن من فعل ذلك بنفسك. افعل ذلك.
فيما يلي دليل حول كيفية عرض تصوير المنتج الدوار بزاوية 360 درجة في WordPress.
الخطوة 07: اضبط لون الخلفية لتصميم صفحة الويب الرسم البياني
يمكن أن يجعل إعداد لون الخلفية في جميع أنحاء الصفحة تصميم صفحة الويب الرسم البياني أكثر روعة. للقيام بذلك ، انقر فوق أيقونة ثلاثة أسطر في الزاوية اليسرى.
ستنقل إلى لوحة جديدة. انقر فوق خيار إعدادات الموقع .
ستُنقل مرة أخرى إلى لوحة جديدة. اضغط على خيار الخلفية .
من خيار اللون ، حدد لونًا. سترى اللون يتم تطبيقه من خلال خلفية الصفحة.
وبالتالي ، يمكنك إنشاء وتصميم تصميم صفحة الويب الخاصة بك.
الخطوة 08: معاينة تصميم صفحة الويب الرسم البياني
انتقل إلى صفحة المعاينة وتحقق مما إذا كان كل شيء يعمل بشكل جيد. إنه يعمل بشكل جيد في نهايتك.
إغلاق!
في الواقع ، يمكّنك Elementor ، المقترن بـ Happyaddons ، من إنشاء صفحات ويب مذهلة تبسيط المعلومات المعقدة. ومع ذلك ، لتحقيق أفضل النتائج ، يجب النظر بعناية النقاط الرئيسية.
حافظ على تصميمك نظيفًا ومرتبًا عن طريق تجنب النص والمرئيات المفرطة. استخدم لوحة ألوان تتماشى مع هوية علامتك التجارية ، وضمان استجابة الهاتف المحمول للحفاظ على مظهر ثابت في جميع الأجهزة. إذا كان ذلك ممكنًا ، فأضف آثار الرسوم المتحركة وتحوم ، حيث يمكن أن تجعل المحتوى الخاص بك تفاعليًا.
نسعى للحصول على توازن متناغم بين المحتوى النصي وعناصر التصميم. إعطاء الأولوية لاستخدام الرسوم البيانية والمخططات ، لأنها تتماشى تمامًا مع الغرض من صفحات الرسم البياني. أخيرًا ، قم بتحسين صفحتك للتأكد من تحميلها بسرعة دون المساس بالأداء.
وبالتالي ، من خلال اتباع كل هذه الممارسات الأفضل ، يمكنك إنشاء صفحات ويب رائعة من الرسم البياني تضيف قيمة وتحقيق تحويلات.