מכירים את זה שיש לכם ארכיון פוסטים או מוצרים, ולחלקם יש כותרת ארוכה יותר ולחלקם פחות, מה שיוצר גבהים לא זהים של הפוסטים/מוצרים, והרבה בלאגן בעיניים.
אז הנה פתרון עם קוד פשוט, כשהרעיון הוא להגדיר גובה לכותרת למספר שורות מסוים, ואז להסתיר את מה שמעבר.
השלב הראשון זה להגדיר (באלמנטור) את גובה השורה לכותרת (נניח 1em), ואז נגביל את גובה הכותרת ל- 2em כלומר שני שורות לכותרת.
selector .elementor-post__title{
max-height: 2em;
overflow: hidden;
}
והנה אותו רעיון עם אפקט טשטוש יפה לשורה השלישית.
selector .elementor-post__title{
max-height: 3em;
overflow: hidden;
position: relative;
}
selector .elementor-post__title:before{
content: "";
position: absolute;
bottom: 0;
height: 1em;
width: 100%;
background: linear-gradient(to bottom, transparent, white);
}
הנה אותו רעיון בשביל מוצרים (ווקומרס).
.woocommerce-loop-product__title{
max-height: 2em;
overflow: hidden;
}
שימו לב שכל הקודים הנ”ל, רלוונטים לווידג’ט פוסטים/מוצרים הרגיל.
במידה ומשתמשים בלולאת פוסטים (או מוצרים) של אלמנטור, ניתן לתת לכותרת (שבונים בלולאה) קלאס, נניח my-text לאחר מכן נוסיף את הקוד הבא,
.my-text .elementor-heading-title{
max-height: 2em;
overflow: hidden;
}
