עיצוב דף הבלוג הראשי והכתבות

מבנה דף הבלוג הראשי קבוע:
תמיד יחולק לשני חלקים - בימני יופיע התוכן ובטור השמאלי (כ-20% מרוחב אזור התוכן) יופיעו קיצורי הדרך: לכתבות האחרונות, לארכיון ולתגיות.

הכתבות בבלוג הראשי יופיעו תמיד במבנה של אחת בשורה, לא ניתן לשנות לכמה כתבות בשורה (כמו בקטלוג המוצרים).
גם כאן, המבנה קבוע: כותרת, כותרת משנה (אם הוכנסה), שם הכותב, תאריך (אם לא הוסתר), תקציר, קישור "קרא עוד" וקישורים למדיה חברתית (אם נבחרה אפשרות התצוגה בבלוג הראשי).

גם דפי הכתבות הינם בעלי עיצוב קבוע: כותרת, כותרת משנה, שם המחבר, תאריך. מדיה חברתית (מעל או מתחת לכתבה). תוכן הכתבה עצמה (כפי שנקבעה בפורטל: טקסט בלבד, תמונה, וידאו או גלריה).

מה שניתן לשינוי בעיצוב הבלוג והכתבות הם הצבעוניות והריווחים.

חלקי הבלוג השונים, מופיעים בלשונית העיצוב בפאנל הניהול הימני (הלשונית האמצעית, בעלת אייקון המברשת).

לפירוט והדגמה - לחצו על כל אחת מאפשרויות העיצוב.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

1. External panel - מעטפת כל אזור הבלוג:
ניתן לקבוע רוחב, צבע רקע ובורדר, margin, padding.
כאן מודגם צבע רקע צהבהב.
Blog - Design

2. blog-container - מעטפת אזור תוכן הבלוג בלבד (החלק הימני, ללא קיצורי הדרך: כתבות אחרונות, ארכיון ותגיות):
ניתן לקבוע רוחב, צבע רקע ובורדר, margin, padding.
כאן מודגם בורדר שחור בעובי 1 פיקסל ו-padding (דיפון פנימי) של 20 פיקסל מכל הכיוונים.

Blog - Design

3. blog-title - כותרת הבלוג הראשי
ניתן לשנות את גודל הפונט, הצבע, padding ו-margin.
כאן מודגם צבע פונט כחול כהה וגודל פונט 30 פיקסל (ברירת המחדל שואבת מהגדרות כותרת H1 באתר).
Blog - Design

4. article-container - האזור המכיל את תקצירי הכתבות
ניתן לשנות צבע רקע, בורדר, padding ו- margin.
כאן מודגם צבע רקע לבן לאזור הכתבות, בעוד צבע הרקע ב external panel נותר צהבהב.
Blog - Design

5. article-container-summary - צבע תקצירי הכתבות
אמור להשפיע על צבע אזור התקציר בלבד. לא פעיל כרגע.
כאן מודגם צבע רקע תכלת, אשר משפיע בדיוק על האזור שעליו משפיע article container (סעיף 4 לעיל).
Blog - Design

6. article-author-and-date - שם המחבר ותאריך
ניתן להשפיע על גודל וצבע הפונט, padding ו-margin, בורדר תחת כל הרוחב.
כאן מודגם צבע טקסט אדום וגודל טקסט 13 פיקסל (ברירת המחדל היא 11px בצבע אפור).
Blog - Design

7. article-title - כותרת הכתבה
ניתן להשפיע על גודל הטקסט, צבע הטקסט, padding, margin ובורדר.
כאן מודגם צבע תכלת וגודל טקסט 23px (ברירת המחדל שואבת מהגדרות H2 באתר).
** ההגדרות משפיעות גם על עמוד הכתבה.
Blog - Design

8. sub-Title - כותרת משנה
ניתן להשפיע על גודל הטקסט, צבע הטקסט, padding, margin ובורדר.
כאן מודגם צבע כחול כהה וגודל טקסט 16px.
** ההגדרות משפיעות גם על עמוד הכתבה.
Blog - Design

9. Read more - קראו עוד
ניתן להשפיע על גודל הטקסט, צבע הטקסט, padding, margin ובורדר.
כאן מודגם צבע תכלת, גודל טקסט 15px והטיית טקסט איטליקס.
Blog - Design

10. Main Image - תמונה מקדימה בדף בלוג ראשי
תמונה זו תופיע רק בכתבות מסוג Imgae, Gallery, ואם יוגדר בהגדרות הרכיב Extended Summary ב-Summary Type.
ניתן לקבוע גודל תמונה (תמיד באחוזים, הגדרות בפיקסלים עלולות לשבש את התצוגה בפלטפורמות), בורדר, padding, margin.
כאן הודגם בורדר בצבע כחול ובעובי 2px ו-margin (שוליים) בגודל 15px מלמעלה ו-20px משמאל.
** ההגדרות משפיעות גם על התמונה בעמוד הכתבה.
Blog - Design

11. Pagination - דפדוף בדף הבלוג הראשי
אפשרות זו תוצג רק כאשר נקבע בהגדרות הרכיב לאפשר דפדוף וקביעת מספר הכתבות שיופיעו בכל דף.
את הדפדוף לא ניתן לראות בממשק, אלא רק בתצוגה באתר.
ניתן לקבוע צבע וגודל טקסט, יישור הטקסט, padding, margin ובורדר.
כאן הודגם צבע טקסט אדום.
Blog - Design

12. Text - הטקסט בתקציר ובדף הכתבה
ניתן להגדיר צבע, יישור וגודל טקסט, ריווח בין שורות, padding, margin, בורדר.
כאן הודגם טקסט בצבע תכלת ובגודל 15px.
** ההגדרות משפיעות גם על הטקסט בעמוד הכתבה.
Blog - Design

13. Video - וידאו
משפיע רק בכתבות מסוג וידאו, וכאשר ואם יוגדר בהגדרות הרכיב Extended Summary ב-Summary Type.
ניתן לקבוע גודל תצוגת הווידאו (תמיד באחוזים, הגדרות בפיקסלים עלולות לשבש את התצוגה בפלטפורמות), בורדר, padding, margin.
כאן הודגם בורדר בצבע אדום ובעובי 3px.
* הווידאו לא נראה בממשק, אלא רק בתצוגה באתר.
** ההגדרות משפיעות גם על הווידאו בעמוד הכתבה.
*** כאשר בוחרים בכתבות מסוג וידאו, רצוי לא להגדיר Extended Summary בדף הבלוג הראשי, כדי שהווידאו לא יוצג בו. תצוגת הווידאו עלולה לפגוע בנראות העמוד.
Blog - Design

14. navigation-panel - פאנל הניווט בתוך הבלוג (הטור השמאלי)
ניתן להגדיר צבע רקע, padding, margin, בורדר, גודל וצבע פונט גורף לכל הטקסטים הנמצאים בו.
כא הודגם צבע רקע אפור.
Blog - Design

15. navigation-panel-bottom - תחתית פאנל הניווט
ההגדרות כאן אינן משפיעות. יושלם כאשר יתוקן.

16. Archive - ארכיון
פעיל רק כאשר אפשרות זו תויגה בהגדרות הרכיב. יוצגו בה חודשים לפי התאריך שנקבע בשדה התאריך בהגדרות הכתבות.
ניתן להגדיר צבע רקע, בורדר, padding ו-margin, צבע טקסט, גודל טקסט, ריווח שורות.
כאן הודגם גודל טקסט 15px וריווח בין שורות 15px.
** החודשים מוצגים רק באנגלית, לכן מומלץ להסתיר את הארכיון עד שהנושא יסודר.
Blog - Design - Archive

17. Recent posts - כתבות אחרונות
פעיל רק כאשר אפשרות זו תויגה בהגדרות הרכיב, והוגדר כמה כתבות אחרונות יוצגו.
ניתן להגדיר צבע רקע, בורדר, padding ו-margin, צבע טקסט, גודל טקסט, ריווח שורות.
כאן הודגם צבע טקסט כחול וגודל 17px.
Blog - Design - recent posts

18. navigation-panel-titles - הכותרות בפאנל הניווט
ההגדרות אינן משפיעות כרגע. יושלם כשהבעיה תתוקן.


19. navigation-panel-buttons - כפתורים (קישורים) מפאנל הניווט
ההגדרות משפיעות על הקישורים ב"כתבות אחרונות" וב"ארכיון". אינן משפיעות על התגיות.
ניתן להגדיר צבע רקע, בורדר, padding ו-margin, צבע טקסט, גודל טקסט, ריווח שורות.
כאן הודגם צבע רקע לבן, בורדר אפור בעובי 1px ו-padding (דיפון תא) בגודל 5px מכל הצדדים.
Blog - Design

20. share-buttons-summary - כפתורי שיתוף מדיה חברתית
פעיל רק כאשר הוגדר שכפתורי השיתוף יופיעו בדף הבלוג הראשי.
ניתן להגדיר יישור, גודל, padding, margin.
כאן הודגם יישור לשמאל.
** ההגדרות אינן משפיעות על כפתורי השיתוף בדף הכתבה.
Blog - Design - Share buttons