Ниже — примеры некоторых элементов, которые лучше не менять при дизайнировании новых макетов. Кое-где по тексту идут пояснения.
PS: Если очень хочется, то можно менять всё. Но если есть возможность, лучше использвоать «типовые» шаблоны, представленые на этой странице 🙂
Заголовок H1
Заголовок H2
Заголовок H3
Заголовок H4
Заголовок H5
Заголовок H6
А это абзац текста. Тут текст просто текстовый из букв и цифр и пробелов 1234567890 -. А это знаки препинания и всякое: «».,— — ; ! & ? #$%^&)(=+. Бла бла бла ура ура один один.Не менять:
- Внешний вид стрелок (желательно использовать представленные ниже варианты стрелок. Или нарисовать какие-то новые и внедрить их на всем сайте и использовать дальше только их)
- Расположение стрелок по вертикали в зависимости от разрешения экрана. Стрелки не должны скакать по экрану в зависимости от разрешения. Большая просьба использовать те варианты размещения, что представлены ниже.
Можно менять:
- Расположение стрелок по горизонтали. Можно их располагать внутри блока карусели, а можно снаружи. Обратите внимание, что при наружнем размещении в мобильной версии кнопки будут не видны, но всегда работает свайп (и точки, если они есть)
- Точки под каруселью (можно удалять)
- Внутренние блоки — могут быть какими угодно
- Количество видимых элементов в карусели. Учитывайте плиз разные разрешения экрана!!!
Стрелки внутри, 1.5 rem, без точек:Стрелки снаружи, высота 1 rem, различные варианты точек:Не менять:
- Тригеры: кнопка, текстовая ссылка, картинка.
- Внешний вид крестика, который закрывает окно.
- Навигацию для картинок галереи внутри модального окна
Можно менять:
- Содержание и внешний вид окна: отступы, бордюры, закругления, цвет фона модального окна и т.д.
- Размеры модального окна. Желательно задавать только ширину. Высота опеделяется контентом! Ширину желательно задавать какой-то формулой, единой для всех разрещений, например, 600px или 80% (от ширины родительского окна)
Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна…Кнопкой, открывающей окно, может быть кнопка картинка или текстовая ссылка. Вот пример картинки:
Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна… Этот контент появится внутри всплывающего окна…Галерея. При нажатии на любую из картинок, галерея открыается в полный рост в модальном окне.
У нас есть несколько типовых «плиток» товара, которые мы используем в листингах категорий или в каруселях с товарами. В основном используется те, что сейчас в любой категории. Однако, есть некоторые другие, их можно также использвать для отображения товаров в сетке.
Количество элементов в сетке может разниться, по желанию.
Теоретически можно придумать новый макет «плитки» (и не только для товара!)
Вот примеры разных макетов плиток с разным количеством колонок в сетке:Кнопок уже сделано много. По большому счету, их не трудно сделать. Но конечно в идеале использовать уже готовые:
Ну и т.д.
