טיפים לאלמנטור

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

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

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

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