Создание шаблона для WordPress с нуля урок №24

Автор Maksim Inshakov
Создание шаблона для WordPress с нуля урок №24

продолжаем верстать макет и последняя страница которая перед нами стоит эта страница детального просмотра портфолио.

А значит я сделал заготовку портфолио Single то есть из портфолио взял пересохранил портфолио Single и лишняя выкину по большому счёту — это наше обычное самая обычная заготовка прочитает он остаётся и контент остаётся, но он пустой вот в общем-то и всё было сделано открыто на браузере вот собственно. И всё да. Теперь давайте мы будем разбираться немножко по тому, что у нас есть дополнительного.

Для нашей страницы портфолио sim-карта.

Значит есть у нас. Опять опять у нас здесь встречается галерея. Да, но если мы на неё посмотрим то — это по сути тоже самое галерея причём абсолютно тоже самое которое у нас стоит на главной странице причём, что она настолько скажем так похожа на ту галерею. Да, что она даже похожа на неё именно по умолчанию ветер сейчас так ну во-первых мы можем и в браузере нашу страницу открыто. Мы видим, что у нас наша галерея до продолжает как бы работать. Вот соответственно, но у неё есть во-первых картинка до во-вторых есть некоторые контент так вот даже по умолчанию. У нас не было вот этого контента внутри его на самом деле помните. Да вот то есть по большому счёту для нашего для нашей галерее у нас работы не очень много мы должны сходить в Index HTML взять весь наш вот div Slider идёт. Всё то, что у нас касается нашего слайдера вот до. Андерс линдегор берём копируем идём в наше портфолио так только не в контент мейнстрим. Да, а вот по этой там копируем ставим тогда. Вот мои собственные получаем то, что мы должны. С вами получить единственный нюанс мы сейчас должны скажем так упростить — это всё до того как — это было у нас ну в общем, тогда в самом начале то есть никакой вот такой див с каким-то дополнительным контентом нам здесь абсолютно не нужен. То есть у нас будут будут идти. Вот наши скажем так слайды с изображениями и всё так давайте обновим всё посмотрим. Вот наши слайды. Вот наши изображение всё по большому счёту нам больше как бы да ничего не нужно следующий момент у нас должна быть ну должен быть фоновый свет на наклонах на наклонных наших на наклонных линий. А чтобы чтобы его сделать так вот он. Да вот мы видим наклонный цвет чтобы его сделать нам нужна наша слайдер. Ну скажи обернуть в какой-то отдельный блок на нём для данного блока назначен background там наши наклонные изображения и сделаем не паддинги справа слева сверху снизу. Ну и в общем-то должно будет у нас работать слайдер мы как бы применить не можем потому, что div Class слайдер у нас, тогда соответственно сразу же племянница и главной странице поэтому мы оборачиваем не слайдер меняем просто название класса меняем делаем слайдер портфолио например слайдер портфолио как бы не здесь. У нас ничего не не на главной странице у нас абсолютно ничего не поменялось потому, что на главной. Все осталось как есть, а для второстепенный вот для портфолио Single вы сделали обёртку назвали её уже по-другому слайдер портфолио соответственно для неё мы уже можем назначать свои стили которые нам в общем-то нужны. А какие стили нам нужны нам нужно чем-то background наша наклон наклон BG вот так который Maps уже использовали. Ну и, что нам ещё там нужно нам нужен padding сверху 30 пикселей очень-то везде он будет нас по 30 пикселей можем задать Overflow hidden ещё потому, что внутри у нас вроде бы как что-то всё-таки плотица ну вот собственно всё, что мы всё, что когда задали. Да так единственный момент мы можем. Ну сделать некоторые некоторые соответствии с нашим макетам это. Назначить на шифоновую нашу картинку. Да вот портфолио Single. У меня есть заготовлено то есть тут поставить ту картинку которую у нас для нашего в макете которая была для нашего слайдера вот мы общем ты должны поставить вот сюда так выставляем для всех наших картинок меняем её так видим да, что у нас теперь вроде бы как всё в общем-то даже. Нормально теперь, что у нас здесь есть ещё скажем так. чего у нас не должно быть. Вот мы если смотрим в соответствии с макетом у нас здесь присутствует тень, но не как на главной да то есть мы должны Border убрать. Каким образом мы можем убрать Border Border ведь у нас назначен. К какому классу если так даже взять посмотреть по фаер. Магу то мы его назначали для нашего вот он для нашего flexslider. А где вот класс flexslider Border 5 пикселей так вот теперь мы должны сделать, что для Flex слайм который находится у нас внутри слайдер портфолио убрать для него Border вот такую вот мы должны сделать свечи такую конструкцию назначит flexslider на который в свою очередь находится у нас внутри слайдер портфолио. Да мы убираем Border. Так ну либо бордеро, но лучше border-bottom поскольку мы всё-таки а. Нижнем бародари говорим видим, что ещё с главной страницы он не исчез он остался. Ну почему потому, что мы назначили одну. Надеюсь понятно да для flexslider. А который находится внутри класса слайдер портфолио на главной странице у нас никакого вообще класса сайтов портфолио нет соответственно для главного для слайдера на главной странице нашего свойства. Никаким образом не относится и никак на него не влияет. Точно такую же вещь. Точно такую же штуку мы можем сделать и отключить нашу навигацию имеется в виду вот эту из кружочков которые да то есть — это навигация имеет. Вполне себе свой блог flexslider вот он Flex Control на вот если мы вот этот вот Flex Control например возьмём и сделаем для него дисплей, но он там и. Видимо он пропал соответственно нам нужно взять. Вот этот Flex Control Nav точно также.

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

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