Vienkāršu CSS režģa izkārtojumu integrēšana programmā WordPress
Vienkārša un stabila režģa izkārtojuma iegūšana WordPress var būt nesāpīgs process, ja izmantojat pareizos rīkus. Šajā apmācībā jūs pakāpeniski uzzināsiet, kā ātri izveidot tīkla sistēmu WordPress, kas ir ļoti viegls un viegli modificējams. Mēs saglabāsim dizainu vienkāršu, lai mēs varētu koncentrēties uz pareizo rīku izmantošanu, lai izveidotu savu tīklu, bet paturiet prātā, ka, ja nepieciešams, varat veidot režģi pašu..
Es izmantošu noklusējuma Pool tēmu programmā WordPress, lai šī apmācība būtu tikai, lai parādītu "sākuma no nulles" pieeju, lai iegūtu tīklus tikai pa labi.
1. solis: Nosakiet savu režģa platumu
Pirms darba sākšanas jums ir jānosaka, cik lielā mērā tīklam būs jābūt. Manai WordPress vietnei es redzu, ka manas galvenās slejas platums ir 450px, izmantojot Google Chrome funkciju "Pārbaudīt elementu", kad jūs ar peles labo pogu noklikšķināt uz objekta. Šis ir ātrākais veids, kā es atklāju, ka var ātri noteikt objekta platumu un augstumu tīmekļa lapā.
2. solis: režģa dizainers
Tā vietā, lai izveidotu režģi, ko jūs varat darīt, ja vēlaties, iesaku iet ar vienu no daudziem pieejamajiem režģa ģeneratora rīkiem. Šai apmācībai es izmantošu MindPlay tīkla ģeneratoru. Tas ir ļoti vienkāršs un viegls tīkla ģenerators.
Es vēlos trīs kolonnu displeju, un man ir jāpārliecinās, ka mani pikseļi ir 450. Tāpēc attiecīgi pielāgojieties un pārejiet uz cilni Eksportēt. Mēs nebūsim pāri * tipogrāfija šīs apmācības funkcijas, lai gan tas noteikti ir vērts izpētīt pats.
Cilnē Eksportēt izmantojiet augšējā stila rāmi un ritiniet uz leju, līdz redzat komentāru "Režģis". Viss no komentāra tiks nokopēts līdz šī rāmja apakšai. Tam vajadzētu būt tikai apmēram 30 rindām .
3. solis: WordPress stilu atjaunināšana
Piesakieties savā WordPress vietnē un dodieties uz Izskats> Redaktors.
Redaktora paneļa apakšējā labajā stūrī redzēsiet a Styles.css fails (vai kaut kas līdzīgs, atkarībā no tēmas). Noklikšķiniet uz šīs, lai to atvērtu.
Ritiniet līdz lapas apakšdaļai un ielīmējiet savu priekšroku no MindPlay.dk:
4. solis: režģa ieviešana
Lai izmantotu tīklu, vienkārši izveidojiet a Šeit ir daži paraugu paraugi, kurus varat ielīmēt vietā, lai sāktu darbu: Kreisā kolonna Vidējā kolonna Pa labi Lūk, kā izskatās WordPress: Saglabājiet / atjauniniet lapu un apskatiet rezultātus. Manā gadījumā šī ir vietnes vietne: Kā redzams no iepriekš redzamā ekrāna, mums ir trīs kolonnas, un viss ir taisnība, ja mēs to sagaidām. Jūs varat pievienot tik daudz rindu, cik vēlaties, vienkārši sākot ar šādiem Kreisā kolonna Vidējā kolonna Pa labi 2. kreisā rinda 2. rinda Labā rinda # 2 Lūk, kā tas izskatās līdz šim: Tagad jūs varat pievienot attēlus vai tekstu un veidot katru rindu tieši tā, kā vēlaties. Dažās pārlūkprogrammās var būt problēmas, ja jums ir vairākas rindas. Lai apietu šo problēmu, jums būs jāparedz rezerve labajā pusē ( Tas nodrošinās jūsu Ja vēlaties veidot visa režģa fonu, jums būs jāpielāgo Atkarībā no izmantotā MindPlay.dk tīkla ģeneratora versijas vietne var neradīt ".grid-m4" un tā vietā jums būs jāizmanto Kreisā kolonna Vidējā kolonna Pa labi Lūk, kā mani galīgie rezultāti izskatās ar divām rindām un dažiem vienkāršiem grafikiem: Izbaudiet dizainu un atcerieties, ka jūs varat veidot savu režģi jebkādā veidā. Redaktora piezīme: Šo ziņu raksta Tara Hornor par Hongkiat.com. Tara ir ieguvusi maģistra grādu angļu valodā un raksta par mārketingu, reklāmu, zīmola veidošanu, grafisko dizainu un darbvirsmu publicēšanu. Papildus savai rakstīšanas karjerai Tara arī pavada laiku kopā ar savu vīru un diviem bērniem.
:
Padomi Tweaking
.grid-m4, mūsu gadījumā) līdz augstumam, kuru vēlaties katrai rindai. Ja izmantojat attēlus, kas ir 250 pikseļi ar 250 pikseļiem, tad rindas augstumu .grid-m4 ir 250 pikseļi:.grid-m4 float: pa kreisi; platums: 20px; augstums: 250 pikseļi;
.režģis-m1 nākamās rindas kreisajā pusē nav peldēt līdz rindai virs tās..režģis klasē. Tātad, pieņemsim, ka jūsu tīklā ir četras rindas, katra 250px. Jūs vēlaties pievienot augstumu .grid klasei ar 1000px, lai visi pievienotie stila elementi attiektos uz visu režģa dizainu..režģis platums: 450px; augstums: 1000px; starpība: auto;
.režģis-m1 pēc tam .grid-c3 lai nodrošinātu, ka režģis ir piemērotā vietā:Galīgie rezultāti
