كيفية إنشاء صفحة صفقات لطيفة باستخدام CSS و HTML مخصصين فقط على أي موقع WordPress؟

نشرت: 2019-01-10

كيفية إنشاء صفحة صفقات لطيفة على موقع WordPress

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

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

هل قمت بفحص صفحة الصفقات؟ https://crunchify.com/deals/.
لقد قمنا مؤخرًا بتحديث صفحة الصفقات الخاصة بنا بتنسيق مختلف ولكن هذا البرنامج التعليمي لا يزال ينشئ صفحة صفقات لطيفة ويعمل بشكل مثالي.

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

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

هيا بنا نبدأ:

الخطوة 1 CSS (style.css)

افتح ملف style.css الخاص بموضوع WordPress وأضف الكود أدناه إليه.

/* For Deals Box */

div . crunchify - panel {

float : left ;

width : 43 % ;

margin : 25px ;

padding : 35px 30px 30px 30px ;

border : 1px solid #ececec;

font - size : 15px ;

position : relative ;

box - shadow : 0 1px 4px rgba ( 0 , 0 , 0 , . 3 ) , 0 0 40px rgba ( 0 , 0 , 0 , . 1 ) inset ;

height : 420px

}

div . crunchify - panel img {

border : 1px solid #e8e8e8

}

/* For Rectangle Dotted box */

. crunchify - deals - coupon {

border : 2px dashed #dd7127;

padding : 3px 3px 5px 8px ;

border - radius : 5px ;

color : #464646;

font - size : 13px ;

display : inline - block ;

margin - bottom : 15px ;

width : 100 % ;

}

. crunchify - deals - coupon : : before {

font - size : 18px ;

vertical - align : top ;

content : "\f0a4" ;

font - family : "Font Awesome 5 Free" ;

color : #b11f24;

margin : 5px 10px ;

}

. crunchify - deals - coupon : hover {

border : 2px solid #dd7127;

text - decoration : none

}

أعلاه رمز CSS سيخلق تخطيطًا لطيفًا لقسم الصفقات الخاصة بك.

نحن نستخدم خطوط FontAwesome في Crunchify. لهذا السبب يأتي رمز سهم اليد من. إذا كنت ترغب في إضافة Font Awesome إلى قالب WordPress الخاص بك ، فاتبع البرنامج التعليمي المفصل FontAwesome.

الخطوة 2 (صفحة HTML)

انتقل إلى Pages
انقر فوق Add New
إنشاء صفحة Full width جديدة
ضع الكود أدناه في قسم HTML بالصفحة
احفظ الملف

< div class = "crunchify-panel" >

< a href = "https://crunchify.me/genesis" target = "_blank" rel = "noopener noreferrer" > < img class = "size-full aligncenter" src = "https://cdn.crunchify.com/wp-content/uploads/2017/08/GenesisWP-Crunchify-Deals.png" alt = "Genesis WordPress Framework Logo" width = "100" height = "100" / > < / a >

< h3 style = "text-align: center;" > < a href = "https://crunchify.me/genesis" target = "_blank" rel = "noopener noreferrer" > Genesis WP < / a > < / h3 >

< p style = "text-align: center;" > Best WordPress design frameworks . Quickly and easily build incredible websites - < a href = "https://crunchify.com/crunchify-co-moved-to-genesis-framework-thesis-vs-genesis/" target = "_blank" rel = "noopener noreferrer" > Details < / a > < / p >

< / div >

< div class = "crunchify-panel" >

< a href = "https://crunchify.me/wp-engine" target = "_blank" rel = "noopener noreferrer" > < img class = "aligncenter size-full" src = "https://cdn.crunchify.com/wp-content/uploads/2017/08/WP-Engine-Crunchify-Deals.png" alt = "WP Engine" width = "100" height = "100" / > < / a >

< h3 style = "text-align: center;" > < a title = "Premium WordPress Themes that Work" href = "https://crunchify.me/wp-engine" target = "_blank" rel = "noopener noreferrer" > WP Engine < / a > < / h3 >

< p style = "text-align: center;" > Crunchify and WP Engine have teamed up to give you a special offer . Vibrant and Fully Managed WordPress Hosting < / p >

< div class = "crunchify-deals-coupon" > < b > 25 % < / b > off Coupon : < a href = "https://crunchify.me/wp-engine" target = "_blank" rel = "noopener noreferrer" > crunchify25 < / a > < / div >

< / div >

< div class = "crunchify-panel" >

< a href = "https://www.stackpath.com/products/cdn/" target = "_blank" rel = "noopener noreferrer" > < img class = "size-full aligncenter" src = "https://cdn.crunchify.com/wp-content/uploads/2017/08/MaxCDN-Crunchify-Deals.png" alt = "MaxCDN Logo" width = "100" height = "100" / > < / a >

< h3 style = "text-align: center;" > < a href = "https://www.stackpath.com/products/cdn/" target = "_blank" rel = "noopener noreferrer" > MaxCDN < / a > < / h3 >

< p style = "text-align: center;" > One of the best CDN for WordPress & used at Crunchify . MaxCDN speeds up your website - < a href = "https://crunchify.com/maxcdn-content-delivery-network-and-crunchify-exclusive-coupon-code-crunchify/" target = "_blank" rel = "noopener noreferrer" > Steps < / a > < / p >

< div class = "crunchify-deals-coupon" > < b > 25 % < / b > off Coupon : < a href = "https://www.stackpath.com/products/cdn/" target = "_blank" rel = "noopener noreferrer" > CRUNCHIFY < / a > < / div >

< / div >

< div class = "crunchify-panel" >

< a href = "https://crunchify.me/bluehost" target = "_blank" rel = "noopener noreferrer" > < img class = "size-full aligncenter" src = "https://cdn.crunchify.com/wp-content/uploads/2017/08/BlueHost-Crunchify-Deals.png" alt = "Bluehost Logo" width = "100" height = "100" / > < / a >

< h3 style = "text-align: center;" > < a href = "https://crunchify.me/bluehost" target = "_blank" rel = "noopener noreferrer" > Bluehost < / a > < / h3 >

< p style = "text-align: center;" > One of the largest and most trusted web hosting services powering millions of site - < a href = "https://crunchify.com/bluehost-wordpress-hosting/" target = "_blank" rel = "noopener noreferrer" > Steps < / a > < / p >

< div class = "crunchify-deals-coupon" > Upto < b > 40 % < / b > off link : < a href = "https://crunchify.me/bluehost" target = "_blank" rel = "noopener noreferrer" > Click here < / a > < / div >

< / div >

سيضيف الرمز أعلاه 4 أقسام صفقات مختلفة لك. فقط استبدل الرابط والصورة حسب الحاجة.

اسمحوا لي أن أعرف إذا كنت تواجه أي مشكلة في وضع رمز أعلاه لموضوعك.