ערכות עיצוב התחלתיות ל־WordPress שכדאי לשקול עבור האתרים הרב-לשוניים שלך

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

ערכות עיצוב הכוללות הכל, ייעודיות ובסיסיות מינימליסטיות

פיתוח ערכות עיצוב ב־WordPress התפתח למספר כיוונים, הפונים לקהלים ולצרכים שונים.

ערכות העיצוב הפופולריות ביותר כיום הן ערכות עיצוב "רב-תכליתיות", שלמעשה כוללות בתוכן הכל. Avada, Enfold ו־Divi הן דוגמאות נהדרות. הן כוללות "סקינים" שונים לעיצוב, תוספי בניית עמודים משלהן והמון פונקציונליות שתוכל להפעיל ולכבות מלוח הבקרה של אזור הניהול.

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

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

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

מה לא אמור להיות בערכת עיצוב בסיסית מינימליסטית?

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

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

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

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

מה צריכה לכלול ערכת עיצוב בסיסית מינימליסטית?

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

ערכות העיצוב המינימליסטיות שבהן אנו משתמשים כיום מציעות כולן:

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

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

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

ערכות עיצוב בסיסיות מינימליסטיות שכדאי להכיר

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


מיועד לתוספי בניית עמודים	כן	כן	כן
פריסה רספונסיבית	כן	כן	כן
בקרת פריסה	טוב	טוב מאוד	טוב
אפשרויות התאמה אישית של כותרת עליונה ותחתונה	טוב	טוב מאוד	טוב
אפשרויות הגדרת תפריט	בסיסי	טוב מאוד	בסיסי (אפשרויות נוספות יגיעו בפברואר 2018)
רמת התאמה אישית כללית (גופנים, צבעים, נראות אלמנטים וכו')	טוב	יוצא מן הכלל	טוב
מוכן למסחר אלקטרוני	כן	כן	כן
דמואים הניתנים לייבוא	כן	כן	כן
ידידותי ל־SEO	כן	כן	כן
מוכן לתרגום	כן	כן	כן
תמיכה ב־RTL	כן	כן	כן
קוד Microdata/schema.org מובנה	כן	כן	כן
Font Awesome	כן	כן	כן
מותאם למהירות	כן	כן	כן
מגה תפריט מובנה	/	כן	בקרוב

הרחבת התכונות של GeneratePress, OceanWP ו־Astra

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

בוא נראה אילו הרחבות פרימיום כל ערכת עיצוב מציעה וכיצד הן שימושיות בבניית אתרים שלמים.

תוספים נלווים פרימיום של GeneratePress

הרחבות של GeneratePress	תכונות עיקריות
הרחבת טיפוגרפיה וצבעים	שליטה מלאה על גופנים עבור כל חלק באתר שלך: גוף העמוד, הכותרת העליונה, הניווט ועוד. הגדר ושנה צבעים עבור (כמעט) כל האלמנטים.
הרחבת WooCommerce	שלוט בתצוגה של אלמנטים שונים: עגלת קניות בתפריט, פירורי לחם, סרגל צד, תמונות מוצרים, מוצרים קשורים ועוד. מצב נטול הסחות דעת עבור עמוד הקופה. שנה את המראה והתחושה של הכפתורים, הטקסטים, כותרת המוצר ואלמנטים נוספים.
הרחבת השבתת אלמנטים וזכויות יוצרים	תוכל לבחור האם להציג את הכותרת העליונה, הניווט הראשי, תמונת הפוסט, הכותרת והכותרת התחתונה – עבור כל עמוד בנפרד. תוכל לבחור מתוך שבע פריסות עמוד שונות. התאם אישית את הודעת זכויות היוצרים של ערכת העיצוב.
הרחבת אזורים, רקעים וריווח	פצל את העמוד למספר אזורים והקצה תוכן ועיצוב שונים לכל אחד מהם: מאפיין, כותרות, אפקט פרלקסה, תמונה, תוכן פשוט. הוסף רקעים לכמעט כל חלק באתר שלך: כותרת עליונה, גוף העמוד, ניווט, סרגל צד, וידג'טים ועוד.
הרחבות Menus+, ניווט משני וכותרת עמוד	התאם אישית את התפריט שלך בנייד או במחשב שולחני. הצג בקלות תפריט משני ובחר היכן הוא יוצג: צף, מתחת לכותרת העליונה ועוד. תמונות כותרת עליונה לכל עמוד.
הרחבת בלוג	בחר אילו אלמנטים של הבלוג להציג: תוכן מלא או תקציר, תאריך, מחבר, קטגוריה ועוד. התאם אישית את התווית "קרא עוד". התאם אישית את תמונות הבלוג. הצג פוסטים אחרונים בגדול יותר מאשר את הישנים.
הרחבת הוקים	הוסף קוד משלך לאתר, מבלי לערוך קבצים של ערכת העיצוב. בחר את האזור באתר שבו הקוד נטען.

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

הרחבות ליבה של OceanWP

עד כה, אנו יכולים לספור סך הכל 15 הרחבות ליבה של OceanWP (מתוכן 7 חינמיות ו־8 פרימיום). אבל אם קראת את הפוסט האחרון בבלוג של ניקולס, נראה שעוד הרחבות בדרך!

בוא נראה להלן כיצד להפיק את המרב מההרחבות.

הרחבה של OceanWP	תכונות עיקריות
שיתוף מוצרים ושיתוף חברתי	עם הרחבה זו תוכל להוסיף כפתורי שיתוף חברתי לעמוד המוצר הבודד או לפוסט שלך.
חלון מודאלי	הגדרה קלה, מפחיתה את זמני הטעינה ומפשטת את העיצוב הכללי. תוכל להשתמש בזה עבור טופס, יצירת לידים, התראות והודעות חשובות אחרות.
סליידר פוסטים	תוכל ליצור סליידר כדי להציג את הפוסטים האחרונים שלך, זה ייצור שורטקוד שבו תוכל להשתמש בכל מקום באתר שלך.
סרגל צד מותאם אישית	פשוט גרור ושחרר את הווידג'טים שלך לתוכו. תוכל להחליט בדיוק באיזה עמוד אתה רוצה אותו.
ייבוא דמו	ישנם מספר דמואים מוכנים לשימוש הזמינים עבור כל תעשייה: נסיעות, חנות, יוגה, אדריכלות וכן הלאה.
Ocean Extra	זה כמו מנהל לוח בקרה או פאנל של ערכת העיצוב. תוכל לבחור להשבית או להפעיל אזורים כלשהם בהתאמה האישית כדי לגרום לו להיטען מהר יותר.
תיק עבודות	ישנן מספר דרכים יעילות עבורך להציג את העבודה שלך ותוכל לסנן לפי מחבר, קטגוריות וכל תגית אחרת.
WooPopup	החלון הקופץ מוצג בעת לחיצה על "הוסף לעגלת הקניות". יש לך שליטה מלאה על הרדיוס, ובנוסף תוכל לשנות את הקישורים, הטקסטים ולהתאים אישית את ההודעות.
כותרת עליונה ותחתונה דביקות	הצמד את הכותרת התחתונה לתחתית המסך שלך והוסף לה טקסטים, תפריטים או צבעים כלשהם.
וידג'טים של Elementor	הצוותים של OceanWP ו־Elementor עבדו יחד כדי להוסיף מספר וידג'טים חדשים ל־Elementor.
קריאה לפעולה בכותרת התחתונה	זוהי דרך עוצמתית להוסיף מידע חשוב על החברה שלך או כפתורים ממש לפני הכותרת התחתונה המסורתית.
Ocean Hooks	הוסף קוד, תוכן ושורטקודים משלך ברחבי האתר, אפילו אין צורך בערכת עיצוב בת.

תוספים נלווים פרימיום של Astra

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

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

הגדרת האתר עם ערכת עיצוב בסיסית

עם כל שלוש ערכות העיצוב שהצגתי לעיל, תהליך ההגדרה דומה מאוד:

התקן את ערכת העיצוב
עבור אל צד הלקוח של האתר ולחץ על התאמה אישית (Customize)
השתמש בהתאמה האישית כדי להגדיר את מראה האתר

הוספת פונקציונליות לאתר עם Toolset

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

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

הנה כמה דברים שתוכל להוסיף עם Toolset, מבלי לכתוב קוד:

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

שילוב עם Toolset והיתרונות בבניית אתרים עם סוגי תוכן מותאמים אישית

Astra, GeneratePress ו־OceanWP הן כולן ערכות עיצוב המוכנות לסוגי תוכן מותאמים אישית. המשמעות היא שתוכל להתאים אישית את האפשרויות שלהן עבור כל תבנית שתעצב. זה כולל תבניות עבור סוגי התוכן המותאמים אישית ועמודי הארכיון שלך.

סרטון זה מציג את השילוב בין Toolset לערכת העיצוב Astra:

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

שליטה באפשרויות ערכת העיצוב של Astra עבור כל פריסה בנפרד

מסקנות

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

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

כאשר תצטרך לבנות פונקציונליות מותאמת אישית מתקדמת יותר, תוכל לעשות זאת באמצעות קוד PHP משלך או עם תוספי Toolset וללא תכנות.

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