اذا كنت جديدا هنا ، قد ترغب في الاشتراك في بلادي آر إس إس. شكرا لزيارتك!
جونسون مربعات هي واحدة من تلك الأشياء التي تشير إلى الجميع ، ويفترض أن يعلم الجميع عن كل منها وكيفية القيام بها -- ولكن في تجربتي لم يفعلوا ذلك. في أعقاب 'صفحة نظيفة' الخيار في الاسبوع الماضي والتي رصدت معظم الناس بوصفها والمبيعات المحتملة / ضغط على الصفحة يبدو من المنطقي لمتابعة هذا الامر مع قليلا عن مربعات جونسون.
لمن لا يعرف ، فهي تلك المربعات الملونة مع خط الصلبة أو كسر من حولهم أن التركيز بعض النصوص ، وعادة ما يعود بالفائدة على المنتج ، أو سعر البيع -- كل ما تريد لفت الانتباه إلى. فهي أسلوب ناجح لزيادة التحويلات. لذا كيف تجعل لهم؟
بادئ ذي بدء ، كنت في حاجة إلى شيء من رمز للذهاب في بلدكم custom_css.php الذي يحدد أسلوب ونوع من المربع الخاص بك ، ثم حمل على وضع شيء ما في نصك صفحة الذي يستدعي أن يصل مربع.
وهناك نسخة بسيطة تعطى هنا -- يمكنك توضيح ذلك كما تريد ولكن هذا سوف اعطيكم مربع الأساسية
/*--Johnson-Box--*/
div#johnson-box{
display: center;
background: #YOUR-COLOR-CHOICE-HERE;
border: YOUR-BORDER-WIDTH-HEREpx solid #YOUR-COLOR-CHOICE-HERE;
width: YOUR-WIDTH-HEREpx;
height:YOUR-HEIGHT-HEREpx;
text-align: center;
}
/*--End Johnson-Box*/
هذا وسوف اعطيكم مربع مركزه مع توسيط النص وخط متصل الجولة. خط صلبة لا تريد أن تكون أكثر بكثير من 4px وغالبا ما تكون أقل من ذلك. إذا كنت تريد كسر الحدود مجرد استبدال 'متينة' مع 'متقطع'. إذا كنت تريد ارتفاع السوائل لديك مربع ، فقط تفوت على خط الطول.
لاستخدام مربع مكان ما يلي النص الخاص بك في الصفحة (باستخدام محرر أتش تي أم أل ، وليس واحدة البصرية في الفسفور الابيض)
<div id="johnson-box">
YOUR TEXT AND IMAGES HERE
</div>
هذا هو ما كنت تستخدم لتوليد المربع أدناه على الرغم من أن اللون أكثر من المعتاد بالنسبة للحدود هو # cc0000
/*--Johnson-Box--*/
div#johnson-box{
display: block;
background: #f3edfc;
border: 4px dashed #cc99ff;
width: 600px;
height:60px;
text-align: center;
}
/*--End Johnson-Box*/
وهذا هو ما أضع في صفحتي : --
<div id="johnson-box">
This is a Johnson Box
</div>
إذا كنت تريد أكثر من نمط واحد من جونسون مربع فقط ، ثم نعطي كل انشاء اسم div مختلفة.
يمكنك أيضا استخدام النمط المضمن ولكن أجد نسخة المغلق أسهل وأنا عندما وضع قوالب ولكن من اجل اكتمال هنا هي رمز ، والتي سوف تستخدم في محرر أتش تي أم أل.
<div style="display: center; background: #YOUR-COLOR-CHOICE-HERE; border: 1px solid #YOUR-COLOR-CHOICE-HERE; width: YOUR-WIDTH-HEREpx; height:YOUR-HEIGHT-HEREpx; text-align: center;">
YOUR TEXT AND IMAGES HERE
</div>
قد يكون هذا الشيء الأساسي بالنسبة لبعض ولكن كنت آمل أن يكون مفيدا لشخص هناك.
comment } (1 تعليق)
