איך לעצב ווידג'ט קטגוריות באלמנטור באמצעות CSS (מדריך היררכיה ויזואלית)

שדרגו את חוויית המשתמש והניווט באתר וורדפרס שלכם בעזרת עיצוב מתקדם, כפתורים דינמיים ואפקטים מזמינים ללחיצה לתתי-קטגוריות

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

במדריך זה נלמד כיצד לשדרג את ווידג'ט הקטגוריות של אלמנטור באמצעות קוד CSS קצר וממוקד. נהפוך את הרשימה הרגילה לכפתורים מודרניים, נוסיף אפקט ריחוף דינמי, וניצור הפרדה היררכית ברורה ומזמינה ללחיצה.

למה היררכיה ויזואלית בקטגוריות חשובה ל-SEO ולחוויית המשתמש?

מנועי חיפוש שמים דגש עצום על חוויית המשתמש (UX). אתר שבו הניווט מסורבל גורם לגולשים לנטוש במהירות, מה שמגדיל את "אחוז הנטישה" (Bounce Rate) ופוגע בדירוג האתר.

כאשר אתם מעצבים קטגוריות נספחות בצורה שונה – עם הזחה פנימה וקו מקשר – אתם משיגים שני דברים במקביל:

1. שיפור ה-UX: הגולש מבין בשבריר שנייה מה הנושא הראשי ומהו תת-הנושא המשוייך אליו.

2. הגדלת אחוז ההקלקות (CTR): כפתורים ברורים עם אפקטי תנועה מניעים לפעולה ומזמינים את הגולש להמשיך לחקור את האתר.

קוד ה-CSS המשולב לווידג'ט קטגוריות באלמנטור

כדי להחיל את העיצוב, אין צורך להוסיף תוספים כבדים שיאטו את האתר. כל מה שצריך זה להעתיק את קוד ה-CSS הבא, לגשת באלמנטור אל הגדרות הווידג'ט של הקטגוריות, ולעבור ללשונית מתקדם > CSS מותאם (Custom CSS).

/* 1. ניקוי וסידור רשימת הקטגוריות הכללית */
selector .elementor-widget-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

selector .elementor-widget-container ul li {
    margin: 0;
    padding: 0;
    position: relative;
}

/* 2. עיצוב הקישורים (שורות הטקסט) - הפיכתם לכרטיס עצמאי */
selector .elementor-widget-container ul li a {
    display: block;
    padding: 12px 20px 12px 40px; /* מרווח משמאל בשביל החץ */
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.25s ease;
    position: relative; /* המיקום של החץ יתבסס אך ורק על הקישור עצמו! */
}

/* הוספת אייקון החץ - מוצמד כעת ל-a ולא ל-li */
selector .elementor-widget-container ul li a::after {
    content: '\2190';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%); /* ממרכז את החץ אנכית במדויק לשורה */
    font-size: 1.1rem;
    color: #007bff;
    transition: all 0.25s ease;
}

/* אפקט ריחוף (Hover) לקטגוריות הראשיות */
selector .elementor-widget-container ul li a:hover {
    background-color: #007bff;
    color: #ffffff !important;
    border-color: #007bff;
}

selector .elementor-widget-container ul li a:hover::after {
    color: #ffffff;
    left: 12px;
}


/* 3. עיצוב אוטומטי מחוזק לקטגוריות נספחות (בנות) */
selector .elementor-widget-container ul .children {
    margin-top: 8px !important;
    margin-bottom: 4px !important;
    padding-right: 25px !important; /* הזחה שמפרידה ויזואלית */
    border-right: 2px solid #e0e0e0 !important; /* קו אנכי מקשר */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* עיצוב כפתורי הקטגוריות הנספחות */
selector .elementor-widget-container ul .children li a {
    padding: 9px 15px 9px 35px !important;
    background-color: #f9f9f9 !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    border-color: #ededed !important;
}

/* אפקט ריחוף ייעודי לקטגוריות הנספחות */
selector .elementor-widget-container ul .children li a:hover {
    background-color: #555555 !important;
    border-color: #555555 !important;
    color: #ffffff !important;
}

צעד קריטי: הפעלת אפשרות "הצג היררכיה" באלמנטור

כדי שקוד ה-CSS יעבוד בצורה אוטומטית ויזהה מי היא קטגוריה ראשית ומי היא קטגוריה נספחת, עלינו לוודא שוורדפרס פולטת את המבנה הנכון אל ה-HTML.

1. לחצו על ווידג'ט הקטגוריות באלמנטור כדי לערוך אותו.

2. בפאנל הניהול הצידי, תחת לשונית תוכן (Content), חפשו את אפשרות הצג היררכיה (Show hierarchy).

3. ודאו שאפשרות זו מוגדרת כפעילה (ON).

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

סיכום

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