שילוב פשוטה CSS CSS פריסות לתוך וורדפרס

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

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

שלב 1: קביעת רוחב הרשת שלך

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

שלב 2: מעצב רשת

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

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

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

.
 
 
 
שלב 3: עדכון גליון סגנונות וורדפרס שלך
 
היכנס לאתר וורדפרס שלך ועבור אל מראה> עורך.
 
 
 
בפינה השמאלית התחתונה של החלונית 'עורך', תראה א Styles.css (או משהו דומה, בהתאם לנושא שלך). לחץ על זה כדי לפתוח אותו.
 
 
 
גלול לתחתית הסדין והדבק את ההקדמה שלך מ- MindPlay.dk:
 
 
 
שלב 4: יישום הרשת
 
כדי להשתמש ברשת, אתה פשוט ליצור 
 עם הכיתה "רשת". כל אזור של הרשת מוגדר ב- CSS. פתח דף חדש או פוסט. עבור אל הכרטיסייה HTML כדי להתחיל בבניית הרשת שלך.
 
 
 
הנה כמה דוגמאות לפני שאתה יכול להדביק במקום כדי להתחיל:
 
 
  
עמודה שמאלית
  
עמודה בינונית
  
עמודה ימנית
  
 
 
הנה איך זה נראה ב- WordPress:
 
 
 
שמור / עדכן את הדף והסתכל על התוצאות. במקרה שלי, זהו דף הבית של האתר:
 
 
 
כפי שאתה יכול לראות מן המסך ירה לעיל, יש לנו שלוש עמודות שלנו והכל הוא הנכון שבו אנו מצפים שזה יהיה. אתה יכול להוסיף שורות רבות ככל שתרצה על ידי פשוט מתחיל עם הבאים 
You
 
 
   
עמודה שמאלית
  
עמודה בינונית
  
עמודה ימנית
    
שורה שמאלה # 2
  
השורה האמצעית # 2
  
שורה ימנית # 2
  
 
כך זה נראה עד כה:
 
 
 
כעת תוכל להוסיף תמונות או טקסט, ולסדר כל שורה בדיוק כפי שתרצה.
 
טיפים Tweaking
 
ייתכן שתיתקל בבעיות בדפדפנים מסוימים כאשר יש לך יותר משורה אחת. כדי לעקוף בעיה זו, יהיה עליך לבצע את השוליים בקצה הימני (.רשת- m4, במקרה שלנו) לגובה אתה רוצה כל שורה להיות. אם אתה משתמש בתמונות בגודל 250 פיקסלים על 250 פיקסלים, הגדר את גובה השורה ב- .רשת- m4 להיות 250px:
 
.grid-m4 float: left; width: 20px; גובה: 250px; 
 
זה יהיה לוודא שלך .grid-m1 בצד שמאל של השורה הבאה אינו צף עד השורה שמעליה.
 
אם אתה רוצה סגנון הרקע של הרשת כולה, תצטרך להתאים את גובה .רשת מעמד. אז נניח שיש לך ארבע שורות ברשת שלך, כל אחת ב 250px. אתה רוצה להוסיף גובה בכיתה .grid ב 1000px אז כל האלמנטים סטיילינג תוסיף יכסה את כל העיצוב הרשת.
 
.רשת רוחב: 450px; גובה: 1000px; margin: auto; 
 
בהתאם לגרסה של גנרטור הרשת MindPlay.dk אתה משתמש, האתר עשוי לא ליצור את ".grid-m4" ובמקום זאת תצטרך להשתמש .grid-m1 לאחר .רשת- c3 כדי להבטיח את הרשת שלך משתרע למקום הנכון:
 
  
עמודה שמאלית
  
עמודה בינונית
  
עמודה ימנית
  
 
תוצאות סופיות 
 
הנה מה התוצאות הסופיות שלי נראה כמו עם שתי שורות וכמה גרפיקה פשוטה:
 
 
 
תיהני עיצוב זוכר שאתה יכול לסרוג את הרשת שלך בכל דרך שאתה רוצה.
 
הערת העורך: פוסט זה נכתב על ידי טארה הורנור עבור Hongkiat.com. Tara יש תואר באנגלית וכותב על שיווק, פרסום, מיתוג, עיצוב גרפי, וכן פרסום שולחן העבודה. בנוסף לקריירה הכתיבה שלה, גם טארה נהנית לבלות עם בעלה ושני ילדיה.