כפתור קרא עוד – אלמנטור

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

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

איך עושים כפתור קרא עוד באלמנטור?

מוסיפים לווידג'ט הטקסט את המחלקה ym-read-more, ומדביקים בעמוד ווידג'ט HTML עם הקוד שבמדריך. הקוד מקצר את הטקסט לגובה קבוע, מוסיף מעבר צבע עדין בתחתית ומציב מתחתיו כפתור שפותח וסוגר את שאר התוכן.

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

1. מתי כדאי להשתמש בכפתור קרא עוד

1.1 מקרים שמתאימים

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

1.2 מקרים שלא מתאימים

אל תסתירו מחירים, תנאים, פרטי קשר או את המשפט שמסביר למה לבחור בכם. מידע שמשפיע על ההחלטה צריך להיות גלוי. גם כפתור שמסתיר שתי שורות בלבד רק מוסיף לחיצה מיותרת. עוד על טעויות כאלה כתבנו במדריך 5 טעויות UX/UI נפוצות.

2. הכנת ווידג'ט הטקסט

• גוררים ווידג'ט "עורך טקסט" וכותבים בו את התוכן המלא.
• בלשונית "מתקדם", בשדה "מחלקות CSS", כותבים ym-read-more, בלי נקודה.
• מתחת לווידג'ט, או בכל מקום אחר באותו עמוד, גוררים ווידג'ט "HTML".

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

3. הקוד המלא

מדביקים את כל הקוד הבא בווידג'ט ה-HTML. מספיק פעם אחת בעמוד:

<style>
.ym-read-more {
  --ym-rm-height: 160px;
}
.ym-read-more .ym-rm-content {
  position: relative;
  overflow: hidden;
  max-height: var(--ym-rm-height);
  transition: max-height .4s ease;
}
.ym-read-more .ym-rm-content::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff);
  pointer-events: none;
  transition: opacity .3s ease;
}
.ym-read-more.is-open .ym-rm-content::after,
.ym-read-more .ym-rm-short::after {
  opacity: 0;
}
.ym-read-more .ym-rm-btn {
  display: block;
  margin: 12px auto 0;
  padding: 8px 22px;
  border: 0;
  border-radius: 999px;
  background: #1E2A5A;
  color: #ffffff;
  font: inherit;
  cursor: pointer;
}
.ym-read-more .ym-rm-btn:hover,
.ym-read-more .ym-rm-btn:focus-visible {
  background: #4F4FE5;
}
@media (prefers-reduced-motion: reduce) {
  .ym-read-more .ym-rm-content { transition: none; }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.ym-read-more').forEach(function (widget, i) {
    var box = widget.querySelector('.elementor-widget-container') || widget;
    if (box.querySelector('.ym-rm-content')) return;

    // עוטפים את התוכן הקיים בלי להעתיק או לחתוך אותו
    var content = document.createElement('div');
    content.className = 'ym-rm-content';
    content.id = 'ym-rm-' + i;
    while (box.firstChild) { content.appendChild(box.firstChild); }
    box.appendChild(content);

    // טקסט קצר לא צריך כפתור
    var collapsed = parseInt(getComputedStyle(content).maxHeight, 10);
    if (content.scrollHeight <= collapsed + 20) {
      content.style.maxHeight = 'none';
      content.classList.add('ym-rm-short');
      return;
    }

    var btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'ym-rm-btn';
    btn.setAttribute('aria-expanded', 'false');
    btn.setAttribute('aria-controls', content.id);
    btn.textContent = 'קרא עוד';
    box.appendChild(btn);

    content.addEventListener('transitionend', function () {
      if (widget.classList.contains('is-open')) content.style.maxHeight = 'none';
    });

    btn.addEventListener('click', function () {
      var open = !widget.classList.contains('is-open');
      if (open) {
        widget.classList.add('is-open');
        content.style.maxHeight = content.scrollHeight + 'px';
      } else {
        content.style.maxHeight = content.scrollHeight + 'px';
        content.offsetHeight;
        widget.classList.remove('is-open');
        content.style.maxHeight = '';
        widget.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
      }
      btn.setAttribute('aria-expanded', open ? 'true' : 'false');
      btn.textContent = open ? 'סגור' : 'קרא עוד';
    });
  });
});
</script>

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

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

4. איך הקוד עובד

4.1 הסתרה בעזרת גובה ולא בעזרת חיתוך

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

4.2 כפתור נגיש

הכפתור הוא תגית button אמיתית, ולכן אפשר להגיע אליו עם מקש Tab ולהפעיל אותו מהמקלדת. התכונה aria-expanded מודיעה לקוראי מסך אם התוכן פתוח או סגור, ו-aria-controls מקשרת בין הכפתור לתוכן. עוד כללים כאלה תמצאו במדריך נגישות אתרים עם וורדפרס ואלמנטור.

4.3 טקסט קצר לא מקבל כפתור

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

4.4 פתיחה וסגירה חלקות

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

5. התאמות

5.1 גובה הטקסט הגלוי

בראש הקוד מופיע המשתנה –ym-rm-height עם הערך 160px, בערך חמש או שש שורות. משנים אותו לגובה הרצוי. אם בלוק מסוים צריך גובה אחר, מוסיפים לו מחלקה נוספת ומגדירים עבורה ערך משלה.

5.2 צבעים

צבע הכפתור מוגדר ב-‎#1E2A5A, וצבע המעבר בעכבר ב-‎#4F4FE5. אם הרקע של האזור אינו לבן, חשוב להחליף גם את ‎#ffffff בשכבת מעבר הצבע לצבע הרקע, אחרת יופיע פס בהיר על הרקע.

5.3 טקסט הכפתור

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

6. למה החלפנו את הקוד הישן

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

• התנגשות עם אלמנטור: הקוד הישן חיפש את המחלקה elementor-text-editor, שבגרסאות מסוימות של אלמנטור קיימת בכל ווידג'ט טקסט. התוצאה הייתה כפתור קרא עוד שמופיע במקומות שלא התכוונו אליהם.
• חיתוך לפי תווים: הקוד חתך את 200 התווים הראשונים של ה-HTML. חיתוך כזה עלול לעצור באמצע תגית או קישור ולשבור את התצוגה.
• תוכן כפול: הטקסט הופיע פעמיים בקוד העמוד, פעם מקוצר ופעם מלא.
• נגישות: לכפתור לא היה מידע לקוראי מסך על מצב הפתיחה.

אם השתמשתם בקוד הישן, מומלץ להחליף אותו בקוד החדש ולשנות את המחלקה בווידג'ט ל-ym-read-more.

7. כפתור קרא עוד ו-SEO

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

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

8. חלופות בלי קוד

8.1 ווידג'ט אקורדיון או טוגל

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

8.2 תגית details

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

סיכום

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

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

שאלות נפוצות על כפתור קרא עוד באלמנטור

האם תוכן שמוסתר מאחורי כפתור קרא עוד נסרק על ידי גוגל?

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

האם הקוד עובד באלמנטור החינמי?

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

איך משנים את הגובה של הטקסט הגלוי?

משנים את הערך של המשתנה ‎–ym-rm-height בראש הקוד. ברירת המחדל היא 160px, בערך חמש או שש שורות טקסט. אפשר גם להגדיר גובה שונה לבלוק מסוים, על ידי הוספת CSS עם אותו משתנה לווידג'ט הספציפי, בלי לשנות את הקוד הכללי.

אפשר להשתמש בכמה כפתורי קרא עוד באותו עמוד?

כן. הקוד מחפש את כל הווידג'טים שקיבלו את המחלקה ym-read-more ומטפל בכל אחד בנפרד, עם מזהה משלו. מספיק להדביק את הקוד פעם אחת בעמוד, ולהוסיף את המחלקה לכל ווידג'ט טקסט שרוצים לקצר. טקסט קצר מהגובה שהוגדר לא יקבל כפתור בכלל.

מה ההבדל בין כפתור קרא עוד לאקורדיון?

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