» »

Адаптивный информер главной страницы для uCoz

Адаптивный информер главной страницы для uCoz

Информация о материале на сайте на главной странице важна и в ее количестве. Для этого создан информер, который будет выводить файлы. Здесь по своей конфигураций и дизайн, он не много отличается от других, но его как уже было сказано, можно применить на важной странице интернет ресурса. Так как он может по своим параметрам изменятся, то вы его также в таком плане установите на любой модуль, изначально задав ему свои параметры. А это что выводить, или просто, чтоб материал менялся, но не исключаю, что сделать на схожие материалы это реально, в общем он такой гибкий в разработке.

Здесь идет четыре формата изображение, где ниже идет название и по нему нельзя перейти, а вот надпись "Подробнее" для функций предназначена. Проверял его как на темном сайте и на светлом, что картинки проверки будут представлены ниже. Но и главное, он адаптирован под размер разный монитора, чтоб корректно смотрелось и безусловно на мобильные аппараты. Здесь можно сказать, что он сырой, так как дизайн на нем минимализм, но главное считаю, это сама подача информации для пользователя или гостей сайта. Чтоб они одно искали и могли увидеть другое, что также им требуется в построение сайта.

Вы изначально должны понимать, что здесь все настроено под былой фон, под темный вам нужно в стилях изменить гамму цвета, но и у каждого своя стилистика и фиксация разная, что на изображение выставлена высота. Сама ширина идет под 100% для того, чтоб работала адаптивность и ее не нужно вообще трогать. Выставить в создание информер на 4 и там автоматически он должен встать на конструктор. В самом коде идет краткое описание, здесь просто поставил так, чтоб было в 2 строки, вашем случай, вы сами решаете, сколько должно быть показано. Но и название и в какой гамме, все это редактируется, только поставлен под жирный шрифт в скрипте и в стилях этого не сделать, остальной в CSS разбор идет и настройка, это касается дизайн, как будет визуально смотреться.

Вид на темном фоне при просмотре на смартфоне:

Вид информера для сайта адаптированный

Это на светлом ресурсе будет:

Светлый информер для информации на сайте

Также белый фон светлого сайта и вид в мобильного аппарата:

Полностью адаптивный скрипт для uCoz

А чтоб поняли, как вообще будет находиться и для чего, то номер созданного информер ставим в низ сайта в самый вверх, под него идет код, что с начало там его устанавливаем, что получиться так как на скрине.

Стильный информер в низ сайта


Приступаем к установке:

Создать информер, где задаем параметры свои, на многих на площадке идет один каталог подключен, вот по нему вы можете поставить как вы сами видите, что должно показываться при перезагрузках страницы.

[ Каталог файлов · Материалы · Дата добавления материала 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, который довел этот материал до рабочего состояние, и чтоб все работало отлично и визуально корректно.
12.04.2017 Просмотров: 680 Комментарий: (19)

Поделиться в социальных сетях

Материал разместил

Комментарий: 19
CEREBRUM
CEREBRUM 12.04.2017 20:401
0
Хорошо сделал как информер!
Kosten
Kosten 12.04.2017 20:463
+4
Он плюсом еще и адаптивный, что сказать, wak помог его до ума довести, за что ему от души.
Scheme
Scheme 12.04.2017 20:442
0
Он что только на главную идет?
Kosten
Kosten 12.04.2017 20:474
0
Нет. читаем описание, просто он на главную идет и можно как один из вариантов, его поставить в низ под материалы, что по теме был. Также все настраивается под любой модуль и выставить к примеру материалы и комментарий, но здесь настроен под главную.
Maryges
Maryges 12.04.2017 20:585
0
А на главной вообще нужны такие скрипты, понимаю в блоке последнее комментарий, а здесь как видно на всю ширину идет.
ucozmental
ucozmental 12.04.2017 21:016
0
Так его можно и под шапку поставить, здесь больше зависит от дизайн, мне на темном сайте больше нравится, на светлом они все похоже, на темном можно цвета больше вывести.
Kosten
Kosten 12.04.2017 21:099
0
Под шапкой не думаю, что хорошая идея, там если ставить, то другой дизайн, по мне этот не подойдет.
ucozmental
ucozmental 12.04.2017 21:027
0
И если он под светлый настроен, а на главном темное стоит. 50a
Марковичь
Марковичь 12.04.2017 21:058
0
ucozmental, какой то ты интересный, на главном скрине может абстракция стоять, главное в самом материале и комментариев, там нужно читать, а не смотреть, то что искал и начинают ставить не прочитав, для чего он. Потом идут такие посты, не работает, не подходит и все остальное.
Kosten
Kosten 12.04.2017 21:1510
0
Каждый информер можно настроить на светлый или темный сайт, и этот не исключение, и что код на светлый, а показан темный, а в материале перекреплены скрины для чего.
1 2 »
avatar