Адаптивный информер главной страницы для uCoz
 | |
| Информация о материале на сайте на главной странице важна и в ее количестве. Для этого создан информер, который будет выводить файлы. Здесь по своей конфигураций и дизайн, он не много отличается от других, но его как уже было сказано, можно применить на важной странице интернет ресурса. Так как он может по своим параметрам изменятся, то вы его также в таком плане установите на любой модуль, изначально задав ему свои параметры. А это что выводить, или просто, чтоб материал менялся, но не исключаю, что сделать на схожие материалы это реально, в общем он такой гибкий в разработке. Здесь идет четыре формата изображение, где ниже идет название и по нему нельзя перейти, а вот надпись "Подробнее" для функций предназначена. Проверял его как на темном сайте и на светлом, что картинки проверки будут представлены ниже. Но и главное, он адаптирован под размер разный монитора, чтоб корректно смотрелось и безусловно на мобильные аппараты. Здесь можно сказать, что он сырой, так как дизайн на нем минимализм, но главное считаю, это сама подача информации для пользователя или гостей сайта. Чтоб они одно искали и могли увидеть другое, что также им требуется в построение сайта. Вы изначально должны понимать, что здесь все настроено под былой фон, под темный вам нужно в стилях изменить гамму цвета, но и у каждого своя стилистика и фиксация разная, что на изображение выставлена высота. Сама ширина идет под 100% для того, чтоб работала адаптивность и ее не нужно вообще трогать. Выставить в создание информер на 4 и там автоматически он должен встать на конструктор. В самом коде идет краткое описание, здесь просто поставил так, чтоб было в 2 строки, вашем случай, вы сами решаете, сколько должно быть показано. Но и название и в какой гамме, все это редактируется, только поставлен под жирный шрифт в скрипте и в стилях этого не сделать, остальной в CSS разбор идет и настройка, это касается дизайн, как будет визуально смотреться. Вид на темном фоне при просмотре на смартфоне:  Это на светлом ресурсе будет:  Также белый фон светлого сайта и вид в мобильного аппарата:  А чтоб поняли, как вообще будет находиться и для чего, то номер созданного информер ставим в низ сайта в самый вверх, под него идет код, что с начало там его устанавливаем, что получиться так как на скрине.  Приступаем к установке: Создать информер, где задаем параметры свои, на многих на площадке идет один каталог подключен, вот по нему вы можете поставить как вы сами видите, что должно показываться при перезагрузках страницы. [ Каталог файлов · Материалы · Дата добавления материала D · Материалы: 4 · Колонки: 1 ] Код <div class="h-services-col"> <div class="wow fadeIn3"> <div class="h-se-img"><img src="$IMG_URL1$" alt="" ></div> <div class="h-se-title"><b>$TITLE$</b></div> <div class="h-se-desc"><?if(len($MESSAGE$)>75)?><?substr($MESSAGE$,0,75)?>...<?else?>$MESSAGE$<?endif?></div> <div class="h-se-more"><a href="$ENTRY_URL$">Подробнее</a></div> </div> </div> CSS: Код .contar1 {width:1130px;margin:0px auto} .h-services {padding:60px 0px} .h-services-tab {display:table;width:100%} .h-services-col {display:table-cell;vertical-align:top;width:25%;padding:0px 15px} .h-se-img {margin-bottom:25px;position:relative} .h-se-img img {vertical-align:bottom;box-shadow:0px 2px 10px rgba(0,0,0,0.5); height:150px; ;width: 100%;};} .h-se-title {font-size:14px;font-weight:bold;margin-bottom:13px;color:#13517B} .h-se-desc {font-size:13px;line-height:22px;color: #525252;} .h-se-more {margin-top:13px} .h-se-more a i {margin-left:5px} .h-se-more a {font-weight:bold;text-decoration:none;font-size:12px;color: #303A67;} .h-se-more a:hover {opacity:0.7} @media only screen and (max-width: 1180px) { .contar1 {width:auto;padding:0px 20px;} } @media only screen and (max-width: 640px){ .h-se-more {margin: 20px 10px;} .h-services-tab, .h-services-col {display:block;width:100%;padding:0px} } Создавая по настройке информер, сами параметры ставите, что вам нужно, здесь прописаны по времени добавление, но остальное думаю вам знакомо и понятно по остальным параметрам, которые можно выставить. Большая благодарность пользователю waak, который довел этот материал до рабочего состояние, и чтоб все работало отлично и визуально корректно. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 19 | |
И если он под светлый настроен, а на главном темное стоит.
 | |
| 1 2 » | |
