إنشاء صفحة على ووردبريس [من الألف إلى الياء]

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

قم بإنشاء صفحة على WordPress

لذلك قمت بعمل سريع لك العرض التقديمي، وهكذا في PowerPoint لتقديم العناصر المختلفة التي وجدتها:

لماذا من المهم تصميم كل صفحة من صفحات موقع الويب الخاص بك بشكل صحيح؟

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

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

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

ضع في اعتبارك أيضًا أن 57٪ من الزوار الذين يزورون موقعًا إلكترونيًا بتصميم سيئ التصميم لا يوصون به. بينما يمكن أن يزيد معدل التحويل الخاص بك إلى 5.5 بفضل التوصيات الشخصية. [fusion_menu_anchor name = “2” class = “”] [/ fusion_menu_anchor]

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

الممارسات الجيدة للحصول على أفضل صفحات الويب

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

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

قم بعمل عرض لصفحاتك

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

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

اجعلها بسيطة

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

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

إعداد تسلسل هرمي مرئي

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

لذا ، تعامل مع جوانب مثل الأحجام والألوان والتخطيط والأزرار والعبارات التي تحث المستخدم على اتخاذ إجراء … للنجاح في التسلسل الهرمي والتنظيم.

قدم نظام تنقل

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

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

يجب أن يكون موقعك “متماسكًا”

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

يتعلق هذا بشكل أساسي بالعناصر الرسومية لموقعك على الويب ، وهي:

• الخطوط المستخدمة ؛
• الألوان ؛
• الرسوم التوضيحية.
• إلخ …

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

تحسين إمكانية الوصول إلى الوسائط المختلفة

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

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

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

احترام الاتفاقيات أو معايير الويب

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

• وضع الشعار في أعلى اليسار أو في وسط الصفحة وإضافة الارتباط إلى الصفحة الرئيسية ؛
• ضع قائمة التنقل الرئيسية في الجزء العلوي أو على الجانب الأيسر من الصفحة ؛
• قم بتكوين الروابط لتغيير اللون عندما يقوم المستخدمون بتمرير الماوس فوقها.
• إلخ …

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

إنشاء صفحات ذات صلة

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

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

ضع نفسك مكان زوارك

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

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

• اسأل عن رأي أقاربك ؛
• اطلب تعليقات من زوارك ؛
• قم بتحليل سلوك زوار موقعك باستخدام أدوات مثل Crazy Egg ؛
• إلخ … [fusion_menu_anchor name = “3” class = “”] [/ fusion_menu_anchor]

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

إنشاء صفحة Twaino SEO Agency: خطوات إنشاء صفحة wordpress الخاصة بك

قبل إنشاء الصفحة الثانية من موقع Twaino.com الخاص بوكالة تحسين محركات البحث (SEO) الخاصة بي ، أتيحت لي الفرصة للقيام بأمرين ، بما في ذلك:

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

• الصفحة الرئيسية لموقع الويب الخاص بي.

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

بالإضافة إلى ذلك ، أستخدم سمة “Avada” التي تتيح لي الحصول على المكون الإضافي “Fusion Builder” والذي سيكون مفيدًا بالنسبة لي من أجل تعديل الصفحة الجديدة في موقع الويب الخاص بي. لاحظ أيضًا أنه بالنسبة لهذه العملية ، أحسب ثلاث خطوات رئيسية بما في ذلك:

• إنشاء نموذج من الصفحة الرئيسية  
• إنشاء كتل للعرض على الشاشات المتوسطة والكبيرة
• إنشاء كتل للعرض على الشاشات الصغيرة

ومع ذلك ، يجب عليك أولاً تسجيل الدخول إلى لوحة التحكم الخاصة بك.

قم بتسجيل الدخول إلى لوحة تحكم موقع الويب الخاص بك

لإنشاء الصفحة الثانية من موقع الويب الخاص بك ، تحتاج إلى الوصول إلى وحدة تحكم WordPress.

للقيام بذلك ، أكمل ببساطة في المستعرض الخاص بك الإدخال “…. / wp-admin” على عنوان URL لموقع الويب الخاص بك. لذا فإن منعي هو “https://twaino.com/wp-admin”.

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

1) قم بإنشاء قالب من الصفحة الرئيسية

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

1-1) قم بالوصول إلى مكونات صفحتك الرئيسية  

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

ثم انقر فوق “تعديل” الذي يظهر بمجرد تحريك الماوس فوق عنوان الصفحة.

لديك في الصفحة التالية ، جميع مكونات أو مجموعات صفحتك الرئيسية ، وهذا ، في المكون الإضافي “Fusion Builder”.

1-2) قم بإنشاء نموذج من الصفحة الرئيسية

تأكد من أن نافذة “Builder” نشطة وانقر على الأيقونة الثالثة الموجودة على نفس الخط وعلى الجانب الأيمن.

ثم لديك خمس نوافذ على هذه الواجهة الجديدة ، وهي:

• Demos؛
• القوالب.
• حاويات
• أعمدة
• العناصر.

حدد “قوالب” ، إذا لم يكن قد تم بالفعل وأنشئ نموذجًا جديدًا من هذه الصفحة.

يجب عليك تسمية هذا النموذج في المربع المخصص لهذا الغرض والنقر فوق “حفظ النموذج”.

أنا ، اسمي “صفحة Twaino الرئيسية” وأنا أحفظها.

1-3) إنشاء صفحة جديدة

لإنشاء صفحة جديدة ، يمكنك النقر فوق نافذة “+ إنشاء” الموجودة بالكامل في الجزء العلوي وبجوار “عرض الصفحة”.

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

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

ستجد أنه افتراضيًا ، “Fusion Builder” غير نشط. لتنشيطه ، انقر على الزر الأزرق “Edit With Fusion Builder” وستظهر خياراته المختلفة.

1-4) قم بتحميل النموذج المحفوظ في الصفحة الجديدة

انقر فوق الرمز الثالث الموجود في نفس السطر مثل نافذة “Builder”. في قسم “النموذج” ، لديك النموذج الذي قمت بحفظه واضغط على خيار “تحميل”.

تظهر قائمة تسمح لك باختيار كيفية تحميل النموذج المعني. هذه هي:

• استبدال محتوى الصفحة بالكامل: والذي يحل محل كل المحتوى الموجود بالفعل في الصفحة ؛
• إدراج فوق المحتوى الحالي: أدخل المحتوى فوق المحتوى ؛  
• إدراج أسفل المحتوى الحالي: أدخل المحتوى أسفل المحتوى.

أتخذ الخيار الأول لقالب “Twaino Home Page” ، والذي يستبدل بالتالي كل المحتوى ويقدم لي جميع الأجزاء التي كان عليّ إنشاؤها في صفحتي الرئيسية.

ثم أنشره لأرى كيف يبدو. للقيام بذلك ، انقر فوق الزر “نشر” الأزرق الموجود في الزاوية اليمنى السفلية ، ثم انقر فوق “معاينة”.

على مستواي ، لدي صفحة “وكالة تحسين محركات البحث” بعنوان URL https://www.twaino.com/agence-seo/، والتي تبدو تمامًا مثل الصفحة الرئيسية لموقع الويب الخاص بي.

2) إنشاء الكتل للعرض على الشاشات المتوسطة والكبيرة

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

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

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

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

2-1) تعديل الكتلة الأولى

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

أقوم بفتح محتوى كتلة “الوكالة” الثانية بالنقر فوق السهم الصغير الموجود تمامًا على اليمين.  

2-1-1) تعديل النص

لتعديل النص ، انقر فوق أيقونة التحرير التي تظهر عند سحب المؤشر فوق خلية النص.

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

ثم انقر فوق “حفظ” لحفظ النص الجديد.

2-1-2) أدخل صورة

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

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

في الواجهة التي تظهر ، انقر فوق الزر “تعديل” الموجود أسفل الصورة القديمة مباشرةً.

لديك بعد ذلك “مكتبة الوسائط” الخاصة بك حيث يمكنك تحديد صورة مباشرة.

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

اضغط على زر “تحديد الملفات” وتصفح جهاز الكمبيوتر الخاص بك لالتقاط الصور التي تريدها.

في هذا المستوى ، أعد تسمية صورك ، وأطلق عليها اسمي:

• Twaino the SEO gardeners ؛
• المراجع الطبيعية لكبار المسئولين الاقتصاديين ؛
• عملاء

• خبرة جوجل

• الكسندر ماروتيل
• ماريانا سيكو ساكورادا
• انضم إلينا.

بعد ذلك ، أقوم بإدخال صورة “Twaino les jardiniers du SEO” وأقوم بحفظها ثم أدخل الصورة الثانية في الخلية الثالثة الموجودة في السطر الثاني. 

أنتقل أيضًا إلى إدخال النص الثاني “إشارة إلى الامتياز” مع الحرص على إجراء التنسيق اللازم.

2-1-3) إدراج أسطر أخرى من النص والصور

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

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

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

• النص: وكالة تحسين محركات البحث (SEO) تستمع إلى عملائها ؛
• الصورة المقابلة.

ما زلت أقوم بإنشاء سطر رابع باستخدام:

• النص: خبرة Google ؛
• الصورة المقابلة.

احفظ التعديلات وانقر على “معاينة” لرؤية العرض. العرض جيد باستثناء صورة “Google” التي تكون كبيرة جدًا.

2-1-4) ضبط حجم الصور الخاصة بك

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

 

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

على مستواي ، اخترت الحجم “400 * 265” من Avada. العرض أفضل بكثير وأغتنم هذه الفرصة لتوسيط الصورة.

للقيام بهذا الإجراء الأخير ، انقر فوق رمز التحرير وانتقل إلى خيار “محاذاة” ثم حدد “مركز” ثم احفظ.

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

2-2) أضف الكتلة الثانية

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

سأقوم الآن بإدراج الصورتين اللتين تتبعان بعضهما البعض عموديًا مع نصهما.

2-2-1) أدخل صورة

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

ثم قمت بتعيين نسبته على “1/3” بالضغط على الرمز الأول في الزاوية اليمنى العليا للخلية.

  

لإضافة الصورة ، انقر فوق “+ عنصر” الموجود في الخلية وفي الصفحة الجديدة ، ابحث عن عنصر “صورة”. ثم انقر على زر “صورة” الذي سيظهر واضغط على زر “تحديد صورة” الذي يظهر على الواجهة الجديدة. يتم عرض “مكتبة الوسائط” ويمكنك اختيار الصورة التي تريدها.

2-2-2) إدراج نص

لإدراج النص الذي يلي هذه الصورة ، قم بتكرار الخلية ومنحها نسبة “2/3”. ثم انقر فوق “+ عنصر” وهذه المرة ابحث عن الزر “نص”.

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

بالنسبة للصورة التالية ونصها ، ما عليك سوى نسخ الصور السابقة وإجراء التغييرات.

في هذا المستوى ، لدي:

• صورتي ونص يصفني: “ألكسندر ماروتيل ، ………”
• صورة ماريانا ونص يصفها: “ماريانا سيكو ساكورادا ، …”.

احفظ التعديلات وقم بإجراء معاينة لرؤية العرض.

2-3) تعديل كتلة مع لون الخلفية والزر

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

لذلك أختار تعديل كتلة “BLOG” وحذف الكتل الوسيطة التي لم أعد بحاجة إليها. هذه على سبيل المثال:

• الخدمات.
• خدمات المحمول؛
• فاصل.

2-3-1) أدخل النص والصورة في

“انضم إلينا” ، هناك ثلاثة عناصر لإدراجها:

• صورة؛
• نص مع العنوان ؛
• زر.

في البداية ، أحذف الخلايا التي لست بحاجة إليها.

أقوم بإدخال النص الخاص بي بتعديل المحتوى القديم بنفس المبدأ.

أقوم أيضًا بتغيير الصورة وأحرص على إعطاء نسبة “” لكل من الخليتين.

ثم أقوم بترتيب خلية الصورة على اليسار وخلية النص على اليمين.

2-3-2) إدراج زر

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

بشكل افتراضي ، لديك خيارات النافذة “العامة” وإذا كان لديك بالفعل رابط الزر الخاص بك ، فيمكنك وضعه في المربع المخصص لهذا الغرض ، بالقرب من خيار “Button URL”.

أدخل النص الذي سيظهر على الزر مع خيار “نص الزر”.

في “محاذاة” حدد “وسط” بحيث يتم توسيط النص على الزر.

2-3-3) أضف مسافة بين الزر والنص.كون

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

لذا اضغط على “+ Element” وابحث عن العنصر “Separator” ، ثم اضغط على الزر الخاص به. على الواجهة التي تأتي ، حدد خيار “النمط” ، قائمة “بلا نمط” في النافذة “عام”.

ثم حدد نافذة “التصميم” وعلى مستوى “الهامش” ، ضع المسافة التي تريدها. أنا ، أدخل قيمة 5٪ وأضع الفاصل بين الزر والنص.

ثم أتحقق مما إذا كان العرض رائعًا من خلال النقر على “معاينة” ، وهذا هو الحال.

3) إنشاء الكتل للعرض على الشاشات الصغيرة

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

للتحقق من عرض الصفحة على الهاتف المحمول ، يمكنك:

• استخدام هاتفك المحمول لترى مباشرة كيف يبدو ؛
• قم بتقليص علامة تبويب المتصفح إلى حوالي “2/3” عرض شاشة الكمبيوتر.

3-1) قم بتكرار وتعديل الكتلة الأولى لتعمل   

بشكل أسرع ، ببساطة قم بتكرار الكتل التي أنشأتها للعرض الافتراضي.

في حالتي ، أقوم بنسخ مجموعة “Agency” وأعد تسمية “وكالة الجوّال” الثانية.

ثم أقوم بإعادة تنظيم نصوص وصور الكتلة من خلال فصل كل صورة بالنصوص.

أيضًا ، أنقر على أيقونة تحرير الخلايا النصية لتقليل أحجامها.

للقيام بذلك ، قمت بتعيين حجم العنوان على “40 بكسل” بدلاً من “50 بكسل”.

3-2) تنشيط شاشة الهاتف المحمول

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

• شاشة صغيرة: للعرض على شاشات صغيرة تدعم مثل الهواتف ؛
• الشاشة المتوسطة: للوسائط ذات الشاشات المتوسطة مثل الأجهزة اللوحية ؛
• شاشة كبيرة: للوسائط ذات الشاشات الكبيرة مثل أجهزة الكمبيوتر.

حدد الأول وتأكد من إلغاء تحديد الاثنين الآخرين. لذلك سيكون لديك الخيار الأول الذي يصبح أزرق والآخران باللون الرمادي.

يعرض هذا الإجراء هذا التكوين فقط على الشاشات الصغيرة بما في ذلك الهواتف.

ثم احفظ ومعاينة لمشاهدة العرض.

3-3) أنشئ كتلة الهاتف المحمول الثانية

التي أرغب في إنشاء كتلة جوال جديدة لـ “فريقنا”. للقيام بذلك ، قمت بنسخه ووضعه في وضع الهاتف بنفس الطريقة كما كان من قبل.

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

لذا انقر فوق رمز تحرير الخلية النصية وفوق حقل النص مباشرةً ، اضغط على الزر “إضافة وسائط”.

ثم اختر الصورة التي تريدها وسألتقط صورتي وقم بمحاذاتها إلى اليسار مع الحرص على تقليل حجمها إلى “80 بكسل”.

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

بالإضافة إلى ذلك ، فإن الكتلة الأخيرة “التوظيف عبر الجوال” لها بالفعل تخطيط جيد ولم أعد بحاجة إلى تعديلها. كل ما عليك فعله هو تشغيل عرض الجوال.

4) تحقق من تعديلاتك

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

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

الخاتمة

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

نراكم قريبا لمقال آخر!