وبالرغم من أن الإضافات السابقة لتصميم صفحات ديناميكية لموقع ووردبريس إلا أننا نقدم في تلك المقالة إضافة مميزة جداً ومجانية أيضاً بها ما يميزها عن الإضافات السابقة خصوصاً في عمل فقرات وبجانبها صور متحركة من نوع لوتي أنيميشن وهي تقنية جديدة تمكنك من إضافة صور متحركة رائعة للغاية معبرة عن الموقع وتوجهه بل وبخيارات للصورة المتحركة نفسها لمزيد من التخصيص وكذلك عداد النسبة المئوية الدائري المتحرك وهو مميز للغاية بعمل أنيميشن تحرك النسبة المئوية وإمتلائها حتى النسبة التي تحددها أنت.
نعم نحن نتحدث عن الإضافة الممتازة " Otter Blocks – Gutenberg Blocks, Page Builder for Gutenberg Editor & FSE " حيث يمكنك من خلال تلك الإضافة عمل صفحات ومواقع ديناميكية بصور متحركة من نوع جيسون الحديثة والتي سوف ترفع جداً من شكل وجمال موقعك ليس هذا وفقط بل بقية الإضافات ممتازة جداً ويجب عليك تجربتها حتى تتعرف على ما يناسب موقعك من إضافات بعد ذلك.
وبعد تركيب الإضافة بموقعك سوف تظهر لك اللوحة الرئيسية للإضافة أنصح بتفعيل كافة خياراتها المجانية للإستفادة بها بعد ذلك من خيارات تخصيص الكود بالسي إس إس وتفعيل خيارات الأنيميشن والمؤثرات المتحركة وكذلك شروط ظهور وإخفاء الإضافات على حسب مايناسبك فعلها جميعاً لأنك سوف تحتاج إليها بالفعل.
وكما ترى بعد عمل صفحة جديدة أو حتى بالدخول لتعديل صفحة قديمة ستجد أعلى يسار الشاشة في النسخة العربية للووردبريس علامة دب إضغط عليها ثم فعل كامل الخيارات للإضافة مرة أخرى لتستطيع إستخدامها في تصميم وبناء الصفحة.
وبالمرور بالماوس على الصفحة وظهور علامة زائد تضغط عليها وبعد ذلك تقوم بالضغط على زرار تصفح الكل لتظهر لك جميع إضافات البلجن تحت الإسم " OTTER " لتستطيع تجربة ماتريد من إضافات البلجن فكثير منها مميز وإحترافي جداً وسيساعدك على بناء وتصميم موقع عصري وأنيق يسعد الزائرين وبه تجربة مستخدم رائعة.
وكمثال بعد إضافة معرض الصور والضغط على علامة الإعدادات الموجودة أعلى يسار الشاشة بجانب زرار نشر بنسخة الووردبريس العربية تظهر لك إعدادات الإضافة والجديد هنا هي إعدادات الأنيميشن الإحترافية التي يمكنك من خلالها تحديد شكل المؤثر ومدة التأخير قبل تشغيل المؤثر وسرعة تشغيل المؤثر مما يجعلك قادر على تخصيص جميع خيارات المؤثرات الأنيميشن بكافة الخيارات لتصل لأفضل نتيجة وتصميم لصفحات موقعك.
ومن الخيارات " Block Tools " يمكنك تفعيل الخيار " Transform to Sticky " وهو خيار لجعل الإضافة تتحرك معك بداخل الصفحة في حدود القسم الموجودة به مثل تحرك الصورة للأعلى وللأسفل بجانب فقرة طويلة من أول بداية الفقرة وحتى نهاية أخر سطر بالفقرة بجانب الصورة فقط جربها وستتعرف عليها أكثر.
بالطبع إضافة عنوان مطور وفيه من المميزات الكثير عن الإضافات الأخرى حيث يمكنك بإعدادات وخيارات كثيرة تخصيص عنوان كل قسم حتى يصل معك للشكل الذي تفكر فيه بكل دقة وتميز.
ومن الخيارات التي أجدها مميزة للغاية هو إمكانية عمل ظل ملون للكتابة أو حتى للإطار العام للإضافة وهو ما أفضله ولا أحبذ كثيراً عمل ظل للكتابة ويمكنك من خلال هذا الخيار " Enable Text Shadow " أو " Enable Box Shadow " ليس فقط عمل ظل للإضافة بل التحكم الكامل في شكل الظل من حيث درجة الشفافية والوضوح وطول وعرض الظل مما يجعلك قادر على التحكم الكامل بهذا الخيار للخروج منه بنتائج رائعة جداً.
وأما عن إضافة " Flip Card " فيمكنك من خلالها عمل كارت له وجه وظهر بمجرد المرور بالماوس عليه يتحرك للظهر ويظهر مايخفيه من محتوى أخر جربه وستبهر بشكل وتصميم الإضافة ويمكنك من خلالها عمل مجموعة كروت كما يحلو لك يكون لها وجه وعند المرور عليها تظهر بيانات أخرى للزائر على الظهر مثل بقية البيانات وزرار إنتقال وخلافه فكر وإبدع كيف يمكنك الإستفادة القصوى من تلك الإضافة بل وتغيير إستخدامها بأكثر من شكل.
وكما ترى إعدادات الإضافة من تحديد نوع التأثيرات عند الظهور وكذلك بقية الإعدادات ويمكنك كتابة عنوان وفقرة وكذلك تحديد خلفية لون أو صورة أو حتى تدرج لوني كما يمكنك بالضغط على زرار " Flip to Back " أن تظهر لك ظهر الكارت لتبدأ في تصميمه وبنائه بالشكل المطلوب ويمكنك إستخدام تلك الإضافة وكأنها غلاف وبداية الموقع أو حتى يمكنك وضع عدة كروت بجانب بعضها البعض بها منتجات أو خدمات أو حتى أراء العملاء بشكل لطيف ومميز.
كذلك يمكنك بالمرور بالماوس في ظهر الكارت والإضافة أن تضيف أي إضافة وعنصر جديد بظهر الكارت مثلاً لوجو الموقع أو صورة بروفايل لشخص أو أزرار أو كما يحلو لك إبدع كما تريد وإبهر الزائرين بجمال وروعة موقعك والأفكار الجديدة التفاعلية المميزة به.
كذلك يمكنك بالضغط على إضافة " Flip Card " وبعد ظهور شريط إعدادت الإضافة أعلاها أن تقوم بالضغط منها على زرار سهم لأسفل وبالمرور عليه تظهر كلمة المزيد حيث يمكنك من خلاله إضافة المزيد من العناصر بوجه الكارت كذلك إبدع كما يحلو لك فالإضافة تمكنك من عمل أفكار لا حدود لها.
وهنا عليك أن تركز للغاية فتلك النقطة بها بعض الخطوات إن قمت بها بالشكل الصحيح أصبحت على قدر عالي جداً من إحتراف التعامل مع تلك الأداة " Flip Card " سوف تجد من إعدادات الإضافة الخيارات " Front Side " و " Back Side " وتلك من أهم الإعدادات حيث يمكنك إختيار منها خلفية وجه الإضافة والظهر حيث يمكنك جعل خلفية وجه وظهر الإضافة لون أو صورة وحتى تدرج لوني تختاره بنفسك ولكن عليك الإنتباه أن تلك الأداة تحتاج لمقاسات صورة مناسبة جداً للطول والعرض الخاص بالإضافة وإلا لن تظهر بالشكل المطلوب فالإتقان هنا بوضع صور بمقاسات مناسبة لمقاسات الإضافة وإلا لن تظهر الصور كما تريد بالشكل الإحترافي.
وبعد إختيار الصورة يمكنك من الخيار " Background Settings " أن تحدد خيارات الصورة وهي هامة جداً لظبط كامل إعدادات الصورة بالشكل المناسب وعليك تحديدها وإلا بالإعدادات الإفتراضية قد لا ينتج منها الشكل الذي تتمناه بالإضافة وهو ما لا نريده وعليك عمل تلك الإعدادات لوجه الإضافة والظهر كذلك.
الإضافة " Lottie Animation " وهي تعتبر من أميز الإضافات ببلجن Otter حيث يمكنك من خلالها إضافة صور متحركة من نوع جيسون وهي تقنية مميزة وجديدة للغاية وتقدم صور مبهرة بالفعل وليست مثل الصور المتحركة العادية بل ويمكنك كذلك تحديد خيارات حركة الصورة وهو أمر مميز ومتطور جداً.
ويمكنك البحث بجوجل عن العبارة " Lottie Animation " لتجد بعض المواقع بالفعل تقدم تلك النوعية من الصور كثير منها مجانية مثل موقع " IconScout " أو " LottieFiles " كذلك موقع " LottieLab " وبعد أن تختار الصور المناسبة لموقعك بجانب الفقرات على سبيل المثال عليك الضغط على الإضافة ومنها تقوم بالضغط على زرار رفع ثم تقوم برفع الصورة والتي تكون عادة من نوع JSON .
وتذكر دائماً أن تلك الإضافة مناسبة بأن تكون مجرد صورة متحركة بجانبها عنوان وفقرة تعبر عنها تلك الصورة وذلك يتم بأن تقوم بإضافة " أعمدة " وتحديد عمل عمودين إما بنفس المساحة أو الفقرة تأخذ مساحة أكبر مثل ثلثين مساحة عرض الشاشة وتضع إضافة لوتي للصور المتحركة وتحدد الصورة وترفعها وبجانبها بالعمود الأخر تضع عنوان وبعدها فقرة وتحدد شكل المؤثرات لهم جميعاً لتظهر الإضافات بأبهى وأجمل شكل ممكن.
ومن خيار " Loop " يمكنك جعل الصورة تتحرك مرة واحدة أو دائمة التحرك كما تريد إن فعلت الخيار من إضافة " Lottie Animation " وكذلك تجد خيار " SPEED " والذي يمكنك من خلاله تحديد سرعة الصورة والأنيميشن الخاص بها كما يحلو لك في تحكم كامل وخيارات متعددة.
ويمكنك عمل فقرة بمؤثرات متحركة من الإضافة " Advanced Heading " بأن تحدد من شريط إعدادات الإضافة بأن يكون حجم الخط " H6 " وهو الحجم المناسب لحجم خط لفقرة وبعدها تتمتع بمميزات إضافة عنوان متطور ولكن وأنت تكتب فقرة طويلة بعدد أسطر كثيرة.
ولكن في تلك الحالة يجب عليك ظبط إعدادات المسافة بين الأسطر وذلك بالضغط على الخيار " Font Size " ومن ثم تحديد الخيار " Line Height " لتحدد بعدها قيمة المسافة ولتجعلها px أي بالبكسل وتضع الرقم 30 وحتى 35 وهي المسافة التي أنصح بها أو كما يناسبك حتى تجد أن المسافة بين الأسطر أصبحت مناسبة جداً.
وأما عن إضافة " Circle Counter " أو النسبة المئوية فهي من أميز الإضافات المشابهة بالبلجنز الأخرى حيث تجدها متحركة وتعد وبالألوان والأرقام في شكل إحترافي للغاية وبالشكل الدائري ويمكنك من خلال تلك الإضافة وضع أرقام وبيانات إنجازات ومهارات كما يحلو لك وبالطبع من الخيارات يمكنك تحديد لون النسبة والمؤشر وكذلك عنوان المهارة أو المنتج وأيضاً عليك تحديد النسبة نفسها ونفس الأمر تحديد المؤثرات أثناء الظهور للإضافة.
بالطبع إضافة مثل تلك يمكنك وضع 3 أو أربع إضافات بجانب بعضها البعض وذلك يتم بأن تقوم بإضافة " أعمدة " وتحدد رقم الأعمدة 3 أو 4 وتضع أو تضيف بكل خانة إضافة نسبة مئوية حتى تظهر بالشكل المناسب والمطلوب كذلك يمكنك جعل كل إضافة بلون معين لمزيد من التنوع والتميز.
وبالإضافة " Tabs " يمكنك وضع تابات أو أزرار بالضغط عليها يتغير المحتوى بنفس المكان للمحتوى الذي تريده ويمكنك الكتابة على أزرار التاب ما تود ليتناسب كعنوان وقسم للمحتوى الذي تريد ظهوره بمجرد الضغط على زرار القسم أو العنوان ويمكنك تعديل الخيارات بها كما تشاء وكذلك تغيير ترتيب الأزرار والإتجاهات وكل ذلك وأكثر.
ومن الخيار " Colors " يمكنك إختيار كامل إعدادات الألوان للإضافة حتى تتناسب مع ألوان موقعك ويتم تخصيص الإضافة بالألوان المناسبة لك ولموقعك.
وأما عن الإضافة " Accordion Item " أو إضافة سؤال وجواب يمكنك وضع العدد الذي تريد من الأسئلة والإجابات الخاصة بها لتفتح لك الإجابة بالضغط على السؤال وهي إضافة مميزة بالفعل وأنصح بها جداً للمواقع الجدية والتعريفية والتي تقدم محتوى في شكل سؤال وجواب للأسئلة المتكررة والشائعة عن محتوى الموقع والتساؤلات التي قد تدور بعقل الزوار.
ويأتي البلجن Otter بالإضافة " Posts " بشكل جديد ومبهر جداً لتقديم إضافة أخر المقالات بشكل وإستايل بل وبخيارات فريدة من نوعها توفر لك شكل غير إعتيادي لتقدم أخر المقالات بالموقع وبالخيارات يمكنك تخصيص الإضافة لتتلائم مع موقعك بشكل أفضل.
ويجب عليك كذلك ظبط المسافات بين عناصر الإضافة وذلك بالضغط على خيار " Spacing " حتى تضمن أفضل شكل ممكن للإضافة وذلك يوضع مسافات مناسبة بين عناصر الإضافة وهو أمر مهم للغاية ويجب عليك ألا تهمله.
الخلاصة
إن كنت تريد تصميم موقع ديناميكي بصور متحركة بشكل مبهر فليس هناك أفضل من إضافة Otter المشروحة بالمقالة حيث يمكنك من خلالها عمل أقسام صورة متحركة وبجانبها عنوان وفقرة بشكل قمة في الروعة هذا غير بقية الإضافات الإحترافية التي ستمكنك من تصميم الصفحات بشكل رائع بالفعل ومتكامل وبخيارات كثيرة حتى تصل بموقعك وتصميمه لأعلى درجة ممكنة من الجمال والروعة دون أن تهمل السرعة والأداء بالطبع.
