בסליידר ההמלצות, יש כמה התאמות נפוצות:
אם הלקוח מבקש צמצום מרווחים, להלן קוד CSS לנושא: (ניתן להפעיל גם חלקית)
.testimonials_slider a.slider_prev,.testimonials_slider a.slider_next { display:none !important; } .testimonials_slider .testimonials_slider_ul li { padding:0 !important; } .testimonials_slider .testimonials_slider_ul li .bq_wrapper { padding-top:10px; padding:10px 30px; } .testimonials_slider blockquote { margin-right:0px; }
כדי להגדיל את הטקסטים + לשנות צבעים, ניתן להשתמש בקוד ה-CSS הבא:
blockquote, blockquote a, blockquote a:hover { color:white; font-size:120%; } .slick-dots li a { background-color:#8224e3; } .testimonials_slider h5 { color:white; }
כדי להסתיר את התמונות – אפשר לשנות את ההגדרה בסליידר עצמו (הגדרות האלמנט).
כדי להסתיר את הנקודות (Navigation) אפשר להשתמש בקוד הבא:
.testimonials_slider .slick-dots { display:none !important; }
כדי להוסיף 5 כוכבים מעל להמלצות, אפשר להשתמש בקוד הבא:
.testimonials_slider li:before { content: '\e929\e929\e929\e929\e929'; font-family: 'mfn-icons'; padding-left: 5px; letter-spacing: 0.2ex; font-size:30px; line-height:30px; color:white; }
או הקוד הבא (כוכבים מלאים):
.testimonials_slider li:before { content: '\e927\e927\e927\e927\e927'; font-family: 'mfn-icons'; padding-left: 5px; letter-spacing: 0.2ex; font-size:40px; line-height:30px; color:#8224e3; }
כדי להוסיף לוגואים, יש להיכנס לעיצוב > עריכת תבנית ושם ל-functions/theme-shortcodes.php, סביב שורה 6300 (לחפש Testimonials), אחרי ה-
$output .= '<div class="hr_dots"><span></span><span></span><span></span></div>';
יש לשבץ את הקוד הבא:
if (has_post_thumbnail()) { $output .= get_the_post_thumbnail(null, 'full', array('class'=>'scale-with-grid')); } else { $output .= '<img class="scale-with-grid" src="'. esc_url(get_theme_file_uri('/images/testimonials-placeholder.png')). '" alt="'. esc_attr(get_post_meta(get_the_ID(), 'mfn-post-author', true)) .'" />'; }
ולסגנן עם CSS כך:
.testimonials_slider img { max-height:120px; padding-bottom:10px; box-sizing:border-box; width:auto !important; }
כדי לסגנן צבעים + להוסיף תמונה של 5 כוכבים:
.testimonials_slider .company { color:#6834c7 !important; font-size:20px; } .testimonials_slider .company::after { display:block; content:url(https://masa.aitech.co.il/wp-content/uploads/2021/10/Stars.png); }