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