كيفية استخدام حزمة تخطيط مخبز Cyber ​​Monday الحصرية لإنشاء صفحة مواقع لعملك

هذا العام ، الحصول على Cyber ​​Monday Deal يعني الحصول على الكثير من الأشياء المجانية أيضًا! إلى جانب التمتع بخصم 25٪ ، فإن كل من يشتري عضوية Elegant Themes الجديدة أو يقوم بترقية حسابه الحالي (أو لديه بالفعل عضوية مدى الحياة) سيحصل أيضًا على 6 حزم تخطيط مجانية وحصرية متاحة للتنزيل فقط أثناء بيع Cyber ​​Monday.

قم بتنزيل المخطط الحصري قبل أن يختفي!

بالفعل عضو مدى الحياة؟ يمكنك تنزيل الحزمة الآن ، لا داعي للمشاركة في تخفيض Cyber ​​Monday الخاص بنا!

نظرة داخل حزمة تخطيط مخبز Cyber ​​Monday الحصرية

واحدة من حزم التخطيط الحصرية التي نقدمها لك كأعضاء مدى الحياة وعملاء Cyber ​​Monday الجدد هي هذه الخاصة بالمخابز. يتكون من 5 صفحات لذيذة تجعل أي موقع للمخابز لا يقاوم.

تصميم الصفحة المقصودة

قم بتنزيل المخطط الحصري قبل أن يختفي!

بالفعل عضو مدى الحياة؟ يمكنك تنزيل الحزمة الآن ، لا داعي للمشاركة في تخفيض Cyber ​​Monday الخاص بنا!

وصفة تصميم الصفحة

قم بتنزيل المخطط الحصري قبل أن يختفي!

بالفعل عضو مدى الحياة؟ يمكنك تنزيل الحزمة الآن ، لا داعي للمشاركة في تخفيض Cyber ​​Monday الخاص بنا!

تصميم صفحة القائمة

قم بتنزيل المخطط الحصري قبل أن يختفي!

بالفعل عضو مدى الحياة؟ يمكنك تنزيل الحزمة الآن ، لا داعي للمشاركة في تخفيض Cyber ​​Monday الخاص بنا!

حول تصميم الصفحة

قم بتنزيل المخطط الحصري قبل أن يختفي!

بالفعل عضو مدى الحياة؟ يمكنك تنزيل الحزمة الآن ، لا داعي للمشاركة في تخفيض Cyber ​​Monday الخاص بنا!

تصميم صفحة الاتصال

قم بتنزيل المخطط الحصري قبل أن يختفي!

بالفعل عضو مدى الحياة؟ يمكنك تنزيل الحزمة الآن ، لا داعي للمشاركة في تخفيض Cyber ​​Monday الخاص بنا!

احصل على حزمة تخطيط مخبز Cyber ​​Monday الحصرية

قبل الدخول في حالة الاستخدام هذه ، ستحتاج إلى وضع يديك على حزمة Cyber ​​Monday Bakery Layout الحصرية التي يمكنك الحصول عليها من خلال أن تصبح عضوًا جديدًا في Elegant Themes أو ترقية حسابك الحالي أو من خلال كونك بالفعل عضوًا مدى الحياة معنا. إذا كنت بالفعل عضوًا مدى الحياة ، فيمكنك تسجيل الدخول إلى منطقة الأعضاء وتنزيل جميع حزم التخطيط الحصرية الخاصة بنا هنا. سيحتاج أي شخص آخر إلى استخدام الزر أدناه للشراء أو الترقية قبل أن يتمكنوا من المتابعة مع بقية البرنامج التعليمي الخاص بنا.

قم بتنزيل المخطط الحصري قبل أن يختفي!

بالفعل عضو مدى الحياة؟ يمكنك تنزيل الحزمة الآن ، لا داعي للمشاركة في تخفيض Cyber ​​Monday الخاص بنا!

كيفية استخدام حزمة تخطيط مخبز Cyber ​​Monday الحصرية لإنشاء صفحة مواقع لعملك

بالنسبة لبقية هذا المنشور ، سنفترض أنك إما استفدت من صفقة Cyber ​​Monday الخاصة بنا أو أنك بالفعل عضو مدى الحياة ولديك حق الوصول إلى Bakery Layout Pack.

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

الآن دعنا ندخل في حالة الاستخدام نفسها.

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

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

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

هيا بنا نبدأ.

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

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

إنشاء صفحة جديدة

أولاً ، ستحتاج إلى إنشاء صفحة جديدة ومنحها عنوانًا (شيء مثل "مواقعنا") والنقر لاستخدام divi Builder ثم المنشئ المرئي.

تحميل تخطيط صفحة جهة اتصال المخبز

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

ينشر.

إضافة أقسام لمعلومات موقعك المحددة

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

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

بعد ذلك ، قم بتغيير تخطيط عمود الصف إلى تخطيط ثلثي وثلث.

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

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

المقر الرئيسي
مدينة نيويورك

الآن قم بتحديث وحدة الصورة في العمود الأيمن لتضمين صورة لموقع شركتك.

سيكون هذا بمثابة قسم لطيف لكل من دعاية موقعك المحدد.

الآن كل ما عليك فعله هو تكرار هذا القسم لإضافة مواقع إضافية.

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

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

تصميم قسم تذييل نموذج الاتصال

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

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

انقر بعد ذلك لتعديل إعدادات الصف وتحديث ما يلي:

تحت علامة تبويب المحتوى ...

لون الخلفية: #ffffff

ضمن علامة التبويب "تصميم" ...

حشوة مخصصة: 5٪ أعلى ، 5٪ يمين ، 5٪ أسفل ، 5٪ يسار

ظل المربع: [حدد ظل المربع]

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

رائعة! الآن إلى وحدة الخريطة.

أضف مفتاح Google API الخاص بك

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

قم بتحديث وحدة الخريطة باستخدام دبابيس الموقع الجديدة

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

انقر لتحرير وحدة الخريطة وتحديث الإعدادات على النحو التالي:

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

العنوان: مخبز مدينة نيويورك
المحتوى: مزيد من المعلومات
عنوان دبوس الخريطة: مدينة نيويورك

انقر فوق الزر "بحث".

ثم أضف دبوسًا جديدًا وقم بتحديث الإعدادات على النحو التالي:

العنوان: مخبز سان فرانسيسكو
المحتوى: مزيد من المعلومات
عنوان دبوس الخريطة: سان فرانسيسكو

انقر فوق الزر "بحث".

ثم أضف دبوسًا جديدًا وقم بتحديث الإعدادات على النحو التالي:

العنوان: مخبز هيوستن
المحتوى: مزيد من المعلومات
عنوان دبوس الخريطة: هيوستن ، تكساس

انقر فوق الزر "بحث".

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

أضف روابط الربط إلى Pin Content Boxes

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

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

افعل نفس الشيء مع دبوس San Francisco (استخدم عنوان url "#sanfran") ودبوس Houston (استخدم عنوان url "#houston").

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

بالنسبة لقسم "مدينة نيويورك" ، قم بتحديث إعدادات القسم في علامة التبويب خيارات متقدمة باستخدام معرف CSS "newyork" واحفظ إعداداتك.

الآن عندما ينقر المستخدم على رابط "مزيد من المعلومات" (مع عنوان url #newyork) في دبوس نيويورك ، ستنتقل الصفحة إلى هذا القسم.

افعل الشيء نفسه لقسم سان فرانسيسكو (استخدم معرّف CSS "sanfran") وقسم هيوستن (استخدم معرّف CSS "houston")

هذا كل شيء. لقد انتهيت!