كيفية تضمين زر في منشور موضوع

مطور
1

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

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

معاينة

image
image964×520 36.4 KB


كيفية التمكين

  1. أضف CSS المخصص إلى السمة الحالية الخاصة بك.
[data-wrap="button"] a {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: #FFF !important;
    background-color: #007bff;
    border-color: #007bff;
}

// الجزء #1 يسمح بعرض النص على يمين الزر.
[data-wrap="button"] {
    display: inline-block;
}

// الجزء #2 يسمح بعرض النص على يمين الزر.
[data-wrap="text-after-button"] {
    display:inline-block;
}
  1. في منشوراتك، انسخ
[wrap="button"][ابدأ الآن](https://example.com)[/wrap]

أو إذا كنت تريد نصًا بجوار زرّك، جرب هذا…

[wrap="button"][سجل الآن](https://YourDiscourseURL.com/signup)[/wrap]
[wrap="text-after-button"]<-- انقر هنا للتسجيل في منتدياتي![/wrap]
14 إعجابًا
2

جميل جداً، شكراً لك.

إعجابَين (2)
4

أهلاً @UnitedFreedom!

لقد ألهمتني موضوعك لإنشاء موضوع مناسب حول مثل هذه التعديلات :+1:
يمكنكم قراءته هنا يا رفاق: Customize posts' contents with your own styles

إعجابَين (2)
5

يسرني أنني تمكنت من إلهامك. لقد قدمت موضوعًا سهل المتابعة مع صور. أحببته :slight_smile:

إعجابَين (2)
6

تحسين سريع لواجهة CSS من جانبنا:

نظرًا لأن مخرجات HTML تختلف قليلاً داخل منشور مُعالج لـ “wrap-buttons”، فقد قمنا بتعديل ترميز CSS حيث أن وسم a داخل التسلسل الهرمي div > p يحتوي على الرابط، وبالتالي فإن النقر على الزر أعلى أو أسفل الرابط قليلاً لا يؤدي إلى تشغيل الرابط.

تمكنا من تجاوز ذلك لإضافة المزيد من الهوامش حول وسم a وتجاوز ترميز margin-block لوسم <p>.

كان يجب أيضًا تعديل لون الرابط.

[data-wrap="btn-primary"] {
    display: inline-block;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-weight: normal;
    color: var(--d-button-primary-text-color);
    background-color: var(--d-button-primary-bg-color);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    border-radius: var(--d-button-border-radius);
    transition: var(--d-button-transition);
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0);
    font-size: var(--font-0);
    line-height: normal;
    box-sizing: border-box;
    padding: 0;
    border: var(--d-button-border);
    padding: .5em .65em;
}
[data-wrap="btn-primary"] a,[data-wrap="btn-primary"] a:hover, [data-wrap="btn-primary"] a:active, [data-wrap="btn-primary"] a:visited {
    color: var(--d-button-primary-text-color);
        padding: .5em .65em;
}
[data-wrap="btn-primary"] p {
    margin-block-start: 0;
    margin-block-end: 0;
}