Битрикс. Создание сайта услуг от А до Я. Часть 16. Рисуем дизайн. Рисуем детальную страницу товара

Автор Artur Merichev
Битрикс. Создание сайта услуг от А до Я. Часть 16. Рисуем дизайн. Рисуем детальную страницу товара

Всем привет мы продолжаем создавать макет сайта с нуля в.

Фотошопе Так теперь нам необходимо сделать последнюю детальную страницу — это страница продукция поэтому предлагаю за основу баранцевскому страницу продукция потому, что у нас каталог с левой стороны баннер с левой стороны, а здесь уже будет открываться сама продукция сам конкретный тортик так. Давайте приступим, но сначала скопирован продукцию жмёт продукт детальная страница не скроем другую страницу которую нам уже не нужно так правая колонка нас интересует в левой. Мы в ничего трогать не будем у нас уже не будет такого количества товара 1 во-вторых у нас будет уже здесь не наша продукция название — это вот как например так-то какие проценты.

Нам необходимо чтобы он был такой пацан так и теперь займемся самой детальной странице у нас с вами карте остаётся и пускай она также будет расположено здесь сколько у нас.

Давайте возьмём наши картинку. Да вот он отвёз прямоугольник который её обрамляет. Выбери моба в слове нажмем Control G — это у нас теперь группа будет титаны фотография фотография название торты. Здесь нам уже такое не нужно цену мы пока оставляем текст у нас будет у него больше так текст как вариант. Предлагаю перенести справа. Так давайте сначала перенесём отсюда устроим чтобы было одинаковым и афоризмы из 8 инструмент текст расширенного по нашей границы. Ну вот так текст мы с вами добавили теперь нам надо с вами во-первых uo1 товара может быть несколько фотографий поэтому предлагаю размножить детально фотография назовём блок больше больше фотографий или ещё фотографии писать и мы оттуда. Скопируй эти все наши свои так промахнулся вот так — это у нас будет первая фотография фото один имя сейчас его будем мешать допустим сделаем следующем. Мы сделаем их такими небольшими чтобы они попадали размер нашего bootstrap. А вот например вот так немножко больше воздуха и у нас несколько будет таких изображение изображение будет так. И, что допустим ещё один ряд вот такой же пользователь может на каждое изображение сделать на каждое изображение нажать и она поедет всплывающем окне так ценное и так далее. У нас поскольку — это сайт услуг они магазин нас как бы заказа нету да и как можно торты заказывать заранее потому, что что-то будет меняться. Например я бы начинка либо оформление или что-нибудь я их нету на складе они будут готовиться уже к тому времени которые скажут заказчик по телефону например поэтому цена у нас будет иметь больше скажи-ка сравнительный характер чтобы человек просто видел. Вот такой торт обойдется в такую-то цену значит тот который я закажу наподобие него будет цена ориентировочная. Значит нам нужна будет цену поправить чтобы она будешь Accent брала на себя в том числе ещё вывести характеристики как например вес продукция или ещё, что давайте начнём сцены снова сделаем контрл ga70 группу ножа цена и предлагаю цену взять в прямоугольник загрузка со скругленными углами как обычно мы привыкли заливка пускай будет такая же. Красная А вот текст поверх него мы сейчас только, что сделали сделаем его белым цветом уберём очертание. Пускай шрифта остаётся стандартным 16 размер на 16 пикселей, но мы. Добавим, что не хватает надпись, что этот цена. Как сшить приподними дадим побольше воздуха величин наш прямоугольник. Ну вот так и немножко его. Уменьши по высоте потому, что он слишком большой вот наша цена так вполне ещё нам нужна свойства хлеба характеристики надавать свойства свойства предлагаю размещать если у нас левой стороны отдано под фотографии текст между текстом и ценой. Давайте добавим фотографию. Но их нам надо отделить поэтому как вариант предлагаю использовать линию пускай будет красного цвета прямая наподобие бордюрчик или hr-v верстки так вот по нулям. Пускай водка будет. Красная, а заливки не будет так вот. Наша красная линия чуть-чуть. ПО так нету сам тоже не сделает так и здесь у нас будет стандартном текстом водица свойства товара например вес товаров как только не белые цвета наш. Для текста стандартный. Пока так вот квест: сколько например 3 кг, что у нас ещё может быть крем сливочный. Ну и так далее. Нам сейчас не суть так здесь нам надо чуть побольше отступа между ними сделать потому, что я начал наезжают друг на друга. Вот например вот столько ножки поднимем чтобы у тебя были разные и. Давайте снизу тоже такой же всё так сюда, а то у нас получилось текст не в той группе так и сделаем копию на нашей линии вот так, что же теперь можно при поднятии цен. А вот такая у нас получилось детальная страница, что шпал неинтересно так и у нас позвал надо немножечко приподнять. Пустошь так детально и мы с вами создали завод ещё раз посмотрим детальную страницу продукции есть детальная страница блога менюшку мы немного поправили хлебные. Крошки из заголовка H1. Мы тоже добавили в принципе мы можем приступать к верстке нашего сайта сначала будут уроки подготовительной мы с вами купим выделенный сервер VPS на сайте хостелы и подготовим соответственно, но я всё-таки будем использовать ряд инструментов которые облегчат вам работу и в современную версию они используются сохраняем и переходим к следующему уроку.

0 комментариев
0

Читайте также