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

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

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

Фотошопе мы внесли небольшие изменения, но теперь давайте сделаем следующую. У нас есть страницы блога съесть страница продукция, но у нас нету деталях страниц. Давайте начнём со страницы блога мы можем точно также скопировать данные с зажимом Alt вверх просто перетаскиваем на создался блок копия.

Давайте назовём блок детальной странице у нас хлебные крошки фото шапка.

Эдисон нас уже будет не наш блог здесь. А название записи которого мы открыли всё-таки — это детальной странице конкретной записи. Так у нас уже такого здесь. Крым записи у нас такое уже не будет такого списка поэтому. Давайте уберём назовём как детальная запись так в детальных записей у нас будет текст отвечающий за сама сайте hv поэтому сделаем области текстовое. Ну пускай пока такого размера куда мы ставим пример текста. Так конечно же шрифт не подходит вставим обычный выравнивание по левому краю и 26 пикселей — это слишком много на стандартный текст идёт 16 размером. Там надо будет скопировать размер. Так мы сейчас применим нам нужно скопировать цвет фона фото моего к 1 ответ обычного текста потому, что у нас будет текст блога текст текст. Блокада Такого же цвета. Так у нас слишком большой отступ между ними поэтому авто пропишем текста такого может быть много. Давайте хотя бы два абзаца так так. Сделай хотя бы далее. У нас может быть также здесь дополнительные фотографии которые должны открываться при нажатии например тот же самый fancybox поставил. А если вы помните у нас с вами была уже на главной странице они на главной странице на странице ананас. Вот они наши фотографии. Давайте найдём данный блок в принципе ещё откроем и будем искать просто по названию так наши наши фотографии и мы его с копируем страницу детального блога пускай будет здесь мы поднимем заголовок. Давайте заголовка не будет в данном случае не настолько нужен здесь просто будут фотографии так, но также блок подразумевает ещё общение. Спасите мы будем брать за основу стандартный компонент. Битрикс есть компонент комментариев со своим оформлением мы возьмём его за основу просто слегка модернизируем точнее просто измене мне большую цветовую схему так канонада его скриншоты взять меня скриншот уже в принципе есть готовый. Я его взял из самоубийцы, а точнее поступил. Как поставил демонстрационный вариант. Битрикс вывел оттуда компонент соответствующий. Сделала его Screen. Африка подправил у нас давайте мы возьмем за основу. Уже готовы скрин и тоже слегка его подправить. Так для этого мы с. Вами, тогда идём в нашу папку исходники файл комментарий png и мы его переносим наши проект на. Фотошопе вот так выглядит стандартная форма на добавление комментариев. Битрикс мы её немножко расширил чтобы у нас она полностью входила. Так не полностью сделаем так чтобы границы нашим границам bootstrap A так вот так и здесь так вот так-то подвал нам немного придётся опустить копирайты подвал запускаем ниже. Как видеть комментарии и так далее я написал просто для примера чтобы видно было как — это будет выглядеть. Вот так и, что мы с вами сделаем поскольку мы не собственный компонент писать или полностью переделывать его шаблон компонента комментариев. Мы просто его скажем так поменять цветовую схему ну мы сделаем его. След образом. Так у меня изображение комментарии скорее всего слишком большое мы сейчас сначала его обрежем сделаем как вот мы выбрали граница того, что нас интересует, что нам нужно всё по краям мы с вами обрежем поэтому мы делаем инверсия выделенной области у нас теперь выделилось всё в этом слове. Кроме того, что находится по центру и. Нажимаю кнопочку делает. А Для этого нам надо сначала растрировать слой всё то есть теперь у нас ничего лишнего нету. И мы можем к этому условию применить обводку мы сделаем небольшую обводку в 1 пиксель в нашем цветом. Давайте посмотрим то есть вот такая и теперь следующую. Мы немножко изменим цвет так. Допустим у нас с вами порнушка многовато всё. Ну так чтобы у нас вместе вот так вот этот свет мы с вами сделаем тоже красным прям сольем красным цветом, но сначала его надо выбрать здесь так текст комментария тоже. У нас будет красным цветом провод мне такого размера ревивор ещё меньше и поскольку мы теперь с изображением чтобы он не был наложения просто удали так не совсем хорошо получилось немножко по-другому сделаю. Но не будем делать эффект обводку мы слой со скругленными углами заливку не убудет белым цветом обводка есть один. Пиксель как граница возвращаем и нашу наш объект прямоугольник объект есть мы его разместим ниже нашего фона комментариев скажем так и сделаем с него маску. Вот так он меня списался только мы немножко комментарий вверх при поднимем чтобы у нас вот подкова на не было пропуска теперь поскольку носоглотки нету мы можем даже в принципе спокойно удалить для этого правая кнопка мыши нажимается FX очиститель слоя всё в стиле у нас нету. И мы можем спокойно вырезать, а сначала подняли немножко выпили выставила вот на одном уровне всё хорошо и убираем лишние комментарии добавить то есть вот так у нас с вами будет выглядеть страница блога.

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

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