Π£Ρ€ΠΎΠΊ 84. ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ постов сСткой с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ²

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ постов сСткой с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ плагиновНСплохим способом отобраТСния содСрТимого Π² Π²ΠΈΠ΄Π΅ страниц ΠΈ записСй являСтся адаптивная сСтка. Π•ΡΡ‚ΡŒ Π½Π΅ΠΌΠ°Π»ΠΎ Ρ‚Π΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡƒΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ. Но Ρ‚Π°ΠΊΠΈΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Π·Π°Π²Π΅ΡΡ‚ΠΈΡΡŒ Π΄Π°ΠΆΠ΅ Π² случаС использованиС ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… Ρ‚Π΅ΠΌ. Π’Π΅Π΄ΡŒ для создания Π³Π°Π»Π΅Ρ€Π΅ΠΈ с Ρ‚Π°ΠΊΠΎΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹.

uSquare. ΠŸΡ€Π΅ΠΌΠΈΡƒΠΌ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π»Π΅Π³ΠΊΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Он ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ количСство сСток, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ посты ΠΈΠ»ΠΈ записи, ΠΏΡ€ΠΈΡ‡Π΅ΠΌ ΠΈΡ… порядок ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ drag-and-drop интСрфСйсом. Π”Π°Π½Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ интСрСсСн ΠΈ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π² Π½Π΅ΠΌ Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ пСрСнаправлСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π° пост ΠΈΠ»ΠΈ страницу ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ссылку Π²Π½ΡƒΡ‚Ρ€ΠΈ сСтки. Π’Π°ΠΊΠΆΠ΅ прСдусмотрСн Π²Ρ‹Π²ΠΎΠ΄ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° с Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΈ настройка способов Π²Ρ‹Π²ΠΎΠ΄Π° изобраТСния. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ сфСра примСнСния Ρƒ Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ большая: галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π²Ρ‹Π²ΠΎΠ΄ постов ΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ†ΠΈΠΈ, ΠΏΡ€ΠΎΡ„ΠΈΠ»Π΅ΠΉ сотрудников ΠΈ Ρ‚.Π΄.

Essential Grid. Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ-ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ сСткС. Он позволяСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Ρ€Π°Π·Π½ΠΎΠ³ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°, поэтому Π½Π΅Ρ€Π΅Π΄ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΡ€ΠΈ создании Π±Π»ΠΎΠ³ΠΎΠ², ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π³Π°Π»Π΅Ρ€Π΅ΠΉ, ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ² WooCommerce, Ρ‚Π°Π±Π»ΠΈΡ† услуг, Ρ†Π΅Π½, ΠΎΡ‚Π·Ρ‹Π²ΠΎΠ² ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ†ΠΈΠΈ.

UberGrid. ΠœΠΎΡ‰Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‰ΠΈΠΉ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΡƒΡŽ сСтку-Π³Π°Π»Π΅Ρ€Π΅ΡŽ ΠΈΠ· ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Ρ… элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½Ρƒ автоматичСскоС упорядочиваниС постов. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ с кастомными постами, созданными Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Π°ΠΌΠΈ. Плагин Ρ‚ΠΎΠΆΠ΅ ΠΏΠ»Π°Ρ‚Π½Ρ‹ΠΉ.

Metro. Π”Π°Π½Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ прСдставляСт собой сСтку для ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ ΠΈΠ»ΠΈ Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ· ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ΡΡ кастомный Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния, Metro UI, SoundCloud, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠ°Ρ ссылка, Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Ρ‚.Π΄. Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠΉ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ². ΠŸΠ»Π°Ρ‚Π½Ρ‹ΠΉ.

Justified Image Grid. Адаптивный ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ посрСдством jQuery Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ эскизы ΠΏΠΎ сСткС Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ Ρ‚ΠΎΠΌΡƒ, ΠΊΠ°ΠΊ это Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π² гугловском поискС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Плагин ΠΏΠ»Π°Ρ‚Π½Ρ‹ΠΉ, Π½ΠΎ отличаСтся Π½Π΅ΠΌΠ°Π»Ρ‹ΠΌ количСством Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… возмоТностСй.

Grid Layout Shock. БСсплатный инструмСнт для Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, Π½ΠΎ содСрТит большоС количСство возмоТностСй. Π’ ΠΏΠ»Π°Π³ΠΈΠ½Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚, Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Ρ€Π°Π·ΠΌΠ΅Ρ€ содСрТания, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ячСйки. МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π΄Π°Π»Π΅Π΅Β», Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π΅Π΅ Ρ†Π²Π΅Ρ‚. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ΡΡ Π²Ρ‹Π±ΠΎΡ€ источников Π΄Π°Π½Π½Ρ‹Ρ… для таксономии, Ρ‚ΠΈΠΏΠΎΠ² постов RSS-ΠΊΠ°Π½Π°Π»ΠΎΠ² ΠΈ Ρ‚.Π΄. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ количСство элСмСнтов для отобраТСния. ЕдинствСнный нСдостаток бСсплатной вСрсии – Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ дисплСя ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Но Π΅ΡΡ‚ΡŒ ΠΈ ΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅ вСрсии с Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΠΎΠΌ.

Gridster. ΠžΡ‡Π΅Π½ΡŒ простой бСсплатный ΠΏΠ»Π°Π³ΠΈΠ½ для создания Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ. Для использования достаточно ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ элСмСнты ΠΈΠ· списка страниц ΠΈ постов Π² Π½ΡƒΠΆΠ½Ρ‹Π΅ ячСйки, размСщая, Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° сайтС. ПослС создания сСтки ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΅Π΅ Π½Π° страницы сайта посрСдством вставки ΡˆΠΎΡ€Ρ‚ΠΊΠΎΠ΄Π° ΠΈΠ»ΠΈ ΠΆΠ΅ воспользовавшись Π·Π½Π°Ρ‡ΠΊΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² мСню послС рСдактирования. Π’ настройках ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, высоту сСтки, Π΅Π΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ Ρ‚.Π΄. МоТно Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ названия ΠΈ ΠΎΡ‚Ρ€Ρ‹Π²ΠΊΠΈ, поддСрТиваСтся drag and drop интСрфСйс. Ну Π° Ссли Π²Π°ΠΌ потрСбуСтся ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΠ±Π»ΠΎΡ‡Π½ΠΎΠ΅ Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π΅ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π±Π°Π·Π°ΠΌΠΈ 1Π‘, Ρ‚ΠΎΠ³Π΄Π° Π²Ρ‹ ΠΏΠΎΠΏΠ°Π»ΠΈ ΠΏΠΎ адрСсу. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ бСсплатно прямо сСйчас.

Как Π²ΠΈΠ΄Π½ΠΎ, инструмСнтов для создания Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΡ… страниц вашСго сайта – Π½Π΅ΠΌΠ°Π»ΠΎ. Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π² ΠΎΠ±Π·ΠΎΡ€Π΅, способна ΠΊΠ°Ρ€Π΄ΠΈΠ½Π°Π»ΡŒΠ½ΠΎ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ваш сайт. Но Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ сайт, Π³Π΄Π΅ данная ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΡƒΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ прСдусмотрСна, Ρ‡Ρ‚ΠΎ сэкономит Π½Π΅ΠΌΠ°Π»ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ: Π²Π°ΠΌ Π½Π΅ придСтся ΠΏΡ€ΠΎΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½, достаточно Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ±Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ Π΄Π΅Ρ‚Π°Π»ΠΈ создания сайта Π·Π°Ρ€Π°Π½Π΅Π΅.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *

Π“Π»Π°Π²Π½ΠΎΠ΅ мСню