Интеграција једноставних ЦСС Грид Лаиоутс у ВордПресс

Добијање конзистентног, чврстог распореда у ВордПресс-у може бити безболан процес ако користите праве алате. У овом упутству научит ћете корак по корак како брзо поставити сустав мреже у ВордПресс-у који је врло лаган и једноставан за мијењање. Дизајн ће бити једноставан, тако да можемо да се усредсредимо на коришћење одговарајућих алата за подешавање мреже, али имајте на уму да можете сами обликовати мрежу ако је потребно.

Користићу подразумевану тему Поол-а у ВордПресс-у за овај туторијал само да вам покажем "старт фром сцратцх" приступ за добијање правих мрежа.

Корак 1: Одредите ширину мреже

Пре него што почнете, морате да одредите колико ће широка мрежа бити потребна. За моју ВордПресс страницу, могу да видим да је ширина моје главне колоне 450пк помоћу функције Гоогле Инспеката "Прегледај елемент" када кликнете десним тастером миша на објекат. Ово је најбржи начин који сам пронашао и који може брзо да одреди ширину и висину објекта на веб страници.

Корак 2: Дизајнер мреже

Уместо ручне израде решетке, коју можете да урадите ако желите, предлажем да идете са једним од многих доступних алата за генераторе мреже. За овај туториал, користит ћу генератор мреже МиндПлаи. То је врло једноставан и лаган мрежни генератор.

Желим да прикажем три колоне и морам да се уверим да су моји пиксели на 450. Зато прилагодите у складу са тим и пређите на картицу "Извоз". Нећемо прећи преко * типографија у овом туториалу, мада је ово свакако вредно истраживати сами.

На картици Извоз користите оквир највишег "Стилског листа" и померите се надоле док не видите коментар "Мрежа". Копират ћете све из коментара на дно оквира. Требало би да буде само око 30 линија

Корак 3: Ажурирање ВордПресс стилова

Пријавите се на ВордПресс сајт и идите на Аппеаранце> Едитор.

У доњем десном углу панела Едитор, видећете а Стилес.цсс датотеку (или нешто слично, у зависности од теме). Кликните на ово да бисте га отворили.

Дођите до дна листа и налепите свој пре МиндПлаи.дк:

Корак 4: Имплементација мреже

Да бисте користили мрежу, једноставно креирате

са класом "грид". Свака област мреже је дефинисана у ЦСС-у. Отворите нову страницу или пост. Идите на ХТМЛ картицу да бисте почели да градите мрежу.

Ево неколико примера који можете да налепите на место да бисте започели:

   Лефт Цолумн
  Миддле Цолумн
  Ригхт Цолумн

Ево како изгледа у програму ВордПресс:

Сачувајте / ажурирајте страницу и погледајте резултате. У мом случају, ово је почетна страница за сајт:

Као што можете да видите на екрану, имамо три колоне и све је тачно тамо где очекујемо да буде. Можете да додате толико редова колико желите тако што ћете почети са следећим

    Лефт Цолумн
  Миддле Цолумн
  Ригхт Цолумн
    Лефт Ров # 2
  Миддле Ров # 2
  Ригхт Ров # 2

Ево како то изгледа до сада:

Сада можете да додате слике или текст и стилизујете сваки ред тачно онако како желите.

Савети за подешавање

Можда имате проблема у неким прегледачима када имате више од једног реда. Да бисте заобишли овај проблем, морат ћете направити маргину на крајњој десној страни (.грид-м4, у нашем случају) до висине коју желите да сваки ред буде. Ако користите слике које су 250пк од 250пк, онда направите висину реда у .грид-м4 да буде 250пк:

.грид-м4 флоат: лево; видтх: 20пк; хеигхт: 250пк;

Ово ће осигурати ваш .грид-м1 на левој страни следећег реда не лебди до реда изнад њега.

Ако желите да стилизујете позадину читаве мреже, требаћете да подесите висину .грид класа. Рецимо да имате четири реда на мрежи, сваки на 250пк. Желите да додате висину класи .грид на 1000пк, тако да ће сви стилски елементи које додате бити покрити цео дизајн решетке.

.грид видтх: 450пк; хеигхт: 1000пк; маргин: ауто;

У зависности од верзије МиндПлаи.дк мрежног генератора коју користите, сајт можда неће генерисати ".грид-м4" и уместо тога ћете морати да користите .грид-м1 после .грид-ц3 да би се осигурало да се ваша мрежа протеже на одговарајуће место:

  Лефт Цолумн
  Миддле Цолумн
  Ригхт Цолумн

Финал Ресултс

Ево како изгледају моји коначни резултати са два реда и неким једноставним графикама:

Забавите се дизајнирати и запамтите да можете обликовати своју мрежу на било који начин.

Напомена уредника: Овај пост је написао / ла Тара Хорнор фор Хонгкиат.цом. Тара има диплому из енглеског језика и пише о маркетингу, оглашавању, брендирању, графичком дизајну и столном издаваштву. Поред каријере у писању, Тара ужива у дружењу са супругом и двоје дјеце.