יש כמה התאמות נפוצות לדף המאמר של הבלוג –
שינוי רוחב הטקסט לקריאה: (רוחב הבלוג המומלץ לקריאה הוא החל מ-600 (נקי) ועד 800 פיקסלים)
רפרנסים לזה:
https://socialtriggers.com/perfect-content-width/
https://9clouds.com/blog/15-blog-formatting-tips-increase-readers-time-on-page/
דוגמא:
https://zenhabits.net/
.single-post #Content .section.the_content .section_wrapper { max-width:800px; padding-top:30px; padding-bottom:50px; }
שינוי גודל טקסט + כותרות למאמרים בלבד באתר:
.single-post #Content p, .single-post #Content li { font-size:20px; line-height:25px; } .single-post #Content h2 { font-size:30px; }
שינוי צבע טקסט של רשימות והכנסה שלהן פנימה:
.single-post #Content li { color:#333; } .single-post #Content ul { margin-left:0px !important; margin-right:30px !important; }
התאמות נפוצות ל"יכול לעניין אותך גם":
.section-post-related .image_links { display:none; } .section-post-related .date_label { display:none; } .section-post-related .post-related .image_frame { margin-right:0px; }
הגבלת גובה משבצות:
.section-post-related .post-related .image_wrapper { max-height:150px; }
מירכוז הטקסט:
.section-post-related h4 { text-align:center; }
גובה קבוע לכותרות:
.section-post-related .section-related-ul h4 { min-height:60px; max-height:60px; overflow:hidden; }
עיבוי פס, מירכוז והוספת רווח:
.section-post-related .hr_color { height:6px; margin:0 auto !important; margin-bottom:20px !important; }
התאמות ומירכוז כפתור קרא עוד:
.section-post-related .post-related a.button { margin:0; color:white; background-color:#00aad9; } .section-post-related .desc { text-align:center; } .section-post-related .post-related a.button .icon-layout:before { content:'e8b7'; } .section-post-related .post-related a.button .button_icon { padding-right:0px; }
בנוסף, המבנה של הבלוג, ואורך התקציר – ניתן לערוך תחת BeTheme Options > Blog, Portfolio & Shop > Blog.
באופן כללי, הדבר הראשון להגדיר זה את דף הבלוג (ולהקפיד על הגדרה תחת אפשרויות ה-BeTheme ותחת הגדרות > קריאה)
להתאמות נוספות, יש להשתמש בקודים הבאים:
הוספת מרווח עליון בדף הבלוג:
.blog #Content { margin-top:30px; }
התאמות לגודל הכותרות:
.blog h2.entry-title { font-size:32px; line-height:40px; font-weight:600; margin-bottom:0px !important; }
מרווח מינימום לכותרות:
.posts_group .post-title h2 { min-height:2.5em; }
מרווח בין פוסטים (מטה):
.blog .post-item { margin-bottom:60px; }
הסתרת האייקונים שמופיעים מעל הפוסטים:
.blog .image_frame .image_wrapper .image_links.double { display:none; }
הסתרת הקטגוריה בפירורי הלחם:
.single-post .breadcrumbs li:nth-child(3) { display:none !important; }
ביטול אפקט ה-Hover בעמוד פוסט:
.if-overlay.single-post .image_frame:hover .image_wrapper img, .if-overlay.single-post .image_frame.hover .image_wrapper img { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
למקרים בהם התמונות בבלוג אינן בגודל אחיד, אפשר להגדיר גובה מקסימלי, כך:
.blog .posts_group .image_wrapper { max-height:230px; }
מירכוז הכותרת והכיתוב של הבלוג (וצמצום המרווח לקרא עוד):
.post-title,.post-excerpt { text-align:center; margin-bottom:5px !important; } .post-links { float:none !important; text-align:center; padding-right:0px !important; } .post-footer { margin-top:0px !important; }