تسليط الضوء على البرنامج المساعد Divi: المحتوى مكثف

يشتمل Divi Builder على وحدة مدونة لعرض المنشورات بناءً على الفئات إما في عرض كامل أو تخطيط الشبكة. هل سبق لك أن أردت المزيد من التحكم في تخطيط مدونتك؟ قد تكون مهتمًا بمكوِّن إضافي تابع لجهة خارجية يسمى Content Intense.

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

(المكوّن الإضافي متاح من موقع الويب الخاص بالمطور.)

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

تثبيت المحتوى المكثف

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

وحدة المحتوى مكثفة

تمت إضافة وحدة جديدة إلى Divi Builder تسمى Content Intense.

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

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

تتيح لك علامة التبويب Design تحديد أحد التخطيطات الخمسة ، وتمكين التراكب ، وضبط نص الرأس ، والنص الأساسي ، والنص التعريفي. اضبط أيضًا الحدود والزر والتباعد والرسوم المتحركة.

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

الإعدادات الافتراضية للمحتوى المكثف

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

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

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

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

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

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

هذا هو Rockies - تخطيط عمودي من 3 أعمدة مع تأثيرات التمرير. كما أنه يضع الصورة المميزة كخلفية. تكشف تأثيرات التمرير عن زر المقتطف الكامل وقراءة المزيد. سنجري بعض التعديلات لجعل النص أكثر قابلية للقراءة.

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

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

مثال - جبال الألب مع أطلس

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

مثال - جبال الألب

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

أنا في الواقع أحبه بشكل أفضل بدون الحدود. هذا واحد يظهر الزر على تحوم.

مثال - الأنديز

يستخدم هذا المثال 6 وحدات مختلفة من Content Intense - كل منها تستخدم Andes وكل منها يقابلها 1 أكثر من الوحدة السابقة. لقد أضفت خلفية إلى القسم مع تراكب. خط الرأس هو Comfortaa. تستخدم الوحدة الأخيرة التنقل. لقد غيرت الأزرار إلى نص.

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

مثال - جبال الهيمالايا

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

مثال - روكي

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

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

مثال - إضافي

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

الأنماط القابلة للتنزيل

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

الترخيص والتوثيق

اختر من بين ترخيصين (لا يسمح أي منهما بإعادة البيع):

• الترخيص القياسي: للاستخدام على موقع واحد. يتضمن 1 لمشروع التطوير و 1 لمشروع Live.
• ترخيص غير محدود: يمكن استخدامه في مواقع غير محدودة للاستخدام الشخصي والعميل.

التحديثات تلقائية. Content Intense متاح من موقع المطور.

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

افكار اخيرة

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

نريد أن نسمع منك. هل جربت Content Intense؟ أخبرنا بتجربتك معها في التعليقات أدناه.

صورة مميزة عبر LanKoga / shutterstock.com