Интегриране на Simple CSS Grid Layouts в WordPress

Получаването на последователно, плътно разпределение на мрежата в WordPress може да бъде безболезнен процес, ако използвате правилните инструменти. В този урок ще научите стъпка по стъпка как бързо да настроите мрежова система в WordPress, която е много лека и лесна за модифициране. Ние ще запазим дизайна лесен, така че да можем да се съсредоточим върху използването на правилните инструменти за настройка на вашата мрежа, но имайте предвид, че можете да оформите собствената си мрежа, ако е необходимо.

Ще използвам по подразбиране темата Pool в WordPress за този урок само за да ви покажа подхода "започнете от нулата", за да получите правилните мрежи.

Стъпка 1: Определете ширината на мрежата

Преди да започнете, трябва да определите колко широка трябва да бъде вашата мрежа. За моя WordPress сайт мога да видя, че ширината на основната ми колона е 450 пиксела, като използвам функцията „Проверка на елемента“ на Google Chrome, когато щракнете с десния бутон върху даден обект. Това е най-бързият начин, по който открих, че може бързо да определи ширината и височината на даден обект в уеб страницата.

Стъпка 2: Дизайнер на мрежата

Вместо ръчно изграждане на мрежа, която можете да направите, ако искате, предлагам да отидете с един от многото налични инструменти за генератор на мрежи. За този урок ще използвам мрежовия генератор от MindPlay. Това е много прост и лек генератор на мрежата.

Искам дисплей с три колони и трябва да се уверя, че моите пиксели са на 450. Така че коригирайте съответно и преминете към раздела "Експортиране". Няма да преминем през * типография функции в този урок, въпреки че това със сигурност си струва да проучите сами.

В раздела Export (Износ) използвайте най-горния кадър от "Style Sheet" и превъртете надолу, докато видите коментара "Grid". Ще копирате всичко от коментара до дъното на този кадър. Тя трябва да бъде само около 30 реда от

Стъпка 3: Актуализиране на вашия WordPress Stylesheet

Влезте във вашия WordPress сайт и отидете в Appearance> Editor.

В долния десен ъгъл на панела Редактор ще видите a styles.css файл (или нещо подобно, в зависимост от вашата тема). Кликнете върху това, за да го отворите.

Превъртете до дъното на листа и го поставете от MindPlay.dk:

Стъпка 4: Прилагане на мрежата

За да използвате мрежата, просто създайте a

с класа "grid". Всяка област от мрежата се определя в CSS. Отворете нова страница или публикация. Отидете в раздела HTML, за да започнете да изграждате мрежата си.

Ето примерна предварителна информация, която можете да поставите на мястото си, за да започнете:

   Лява колона
  Средна колона
  Дясна колона

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

Запазете / актуализирайте страницата и разгледайте резултатите. В моя случай това е началната страница на сайта:

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

    Лява колона
  Средна колона
  Дясна колона
    Ляв ред # 2
  Среден ред # 2
  Вдясно ред # 2

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

Сега можете да добавяте изображения или текст и да оформяте всеки ред точно както искате.

Съвети за промяна

Може да имате проблеми в някои браузъри, когато имате повече от един ред. За да преодолеете този проблем, ще трябва да направите маржа на най-дясната страна (.решетка m4, в нашия случай) до височината, която искате да бъде всеки ред. Ако използвате изображения, които са 250px на 250px, тогава направете височината на реда в .решетка m4 да бъде 250px:

.grid-m4 плувка: ляво; ширина: 20px; височина: 250px;

Това ще гарантира, че .решетка m1 от лявата страна на следващия ред не се издига до реда над него.

Ако искате да оформите фона на цялата мрежа, ще трябва да регулирате височината на .решетка клас. Така че нека да кажем, че имате четири реда на вашата мрежа, всяка на 250px. Вие ще искате да добавите височина към .grid клас при 1000px, така че всички стилизиращи елементи, които добавяте, ще покриват целия дизайн на решетката.

.решетка ширина: 450px; височина: 1000px; марж: автоматично;

В зависимост от версията на MindPlay.dk мрежовия генератор, който използвате, сайтът може да не генерира ".grid-m4" и вместо това ще трябва да използвате .решетка m1 след .решетка c3 да се уверите, че вашата мрежа се простира до подходящото място:

  Лява колона
  Средна колона
  Дясна колона

Окончателни резултати

Ето как изглеждат моите крайни резултати с два реда и някои прости графики:

Забавлявайте се, проектирайки и помнете, че можете да оформите вашата мрежа по какъвто и да е начин.

Бележка на редактора: Тази публикация е написана от Тара Хорнор за Hongkiat.com. Тара е завършила английски език и пише за маркетинг, реклама, брандинг, графичен дизайн и десктоп издателска дейност. Освен писмената си кариера, Тара също обича да прекарва време със съпруга си и с две деца.