Работа с Tilda и полезный код для анимации слайдера

полезно для начинающих дизайнеров)

Приветствую тебя!)

В этой статье расскажу как я начала работу над сайтом для event agency. У ребят очень обширная деятельность, перечислю поочередно:

  • Фотопроекты (готовые проекты для детей и взрослых)

  • Прокат и аренда Платьев и детских костюмов

  • Организация детских праздников и мастер классов
  • Фотокниги

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

P.s Но думаю что одному человеку качественно вести около 6 разных страниц - нереально) а тем более если тебе на каждую из этих страниц могут написать с заказом или вопросом!

Так вот, искренне считаю, что идеальным решением было создать полноценный сайт и включить туда все проекты, что будет удобно как для моего заказчика, так и для потенциальных клиентов.

Начало работы над сайтом

Первым делом конечно я начала анализировать другие студии, в частности студии Санкт-Петербурга, т.к. сама студия из СПб. Затем пошла искать референсы (искала в основном на pinterest), сайт хотелось сделать "чистым по оформлению" т.к. слишком много фото и не хотелось отвлекать внимание на фон. Ниже несколько основных референсов (нравятся тонкие элементы и элементы рукописного шрифта)

Далее я сразу подобрала вариации цветовых решений и подобрала шрифты (варианты цветовых решений я отправила заказчику, чтобы понять в какую сторону двигаться)Мы остановились на этом сочетании цветов:

Цветовое решение
Цветовое решение

После согласования, я подготовила прототип сайта

При переносе сайта на платформу, некоторые блоки пришлось видоизменить

Прототип выглядел так:

Прототип сайта
Прототип сайта

Моя цель была сделать главную страницу сайта в основном из индивидуальных блоков (а это значит что при верстке я применяла код для анимации) Поэтому я сделала предварительный дизайн сайта в figma, перед тем как переносить на платформу.

Работа с Tilda и полезный код для анимации слайдера

И вот этап переноса дизайна на тильду!

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

Работа с Tilda и полезный код для анимации слайдера

Конечно же шапку я хотела сделать в виде слайдера.

Данный блок я создала из zero block. Ниже будет слайдер с этапами работы, также приложу сюда код верстки (может быть кому-то будет полезно.

И так, как видно выше, у меня есть навигация в виде стрелки вправо
Первым этапом нужно создать zero block и сделать навигацию (в данном случае будет пустой блок с 1-ой стрелкой)

Далее создаем сами слайдеры, у меня их всего 2 (может быть конечно же больше), т.е получается 2 отдельных zero block

и следующий блок это HTML код (во вкладке другое) код будет представлен ниже)
подробный урок можно посмотреть на канале KAIZEN SkillBoost (youtube)

Важно! перед тем как прописывать код, нужно для стрелок в графе link указать хештеги #slider_right и #slider_left для соответствующих сторон.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <script> (function () { // Id блока, в котором будет слайдер let block = $("#rec519388611"); // Class элемента, в котором будет находиться слайдер let wrap = $(".tn-elem__5193886111470210224069"); // Id блоков, которые будут слайдами let slides = $("#rec512626502, #rec494031320 "); wrap.addClass("tildoshnaya-slider-owl"); let box = wrap.find(".tn-atom"); box.append('<div class="owl-carousel owl-theme"></div>'); slides.appendTo(block.find('.owl-carousel')); let owl = wrap.find('.owl-carousel').owlCarousel({ // Зациклить слайдер - true // Без зацикленности - false loop:true, nav:false, dots: false, // Колличество карточек items: 1, // Адаптивность responsive:{ // 0 это минимальная ширина экрана, при которой включается следующая часть кода // 0:{ // items: 1 это колличество слайдов на экране // items:1 // }, 0:{ items:1 }, 640:{ items:1 }, 960:{ items:1 }, } // Адаптивность: конец }) block.find("[href='#slider_left']").click(function(){ owl.trigger('prev.owl.carousel'); }) block.find("[href='#slider_right']").click(function(){ owl.trigger('next.owl.carousel'); }) }()); </script> <script> function auto_play() { $("[href='#slider_right']").click()}; var timemode = 10000; /* Скорость автослайдинга */ var autoPlay = setInterval( auto_play, timemode ); </script> <style> /* Фоновое изображение */ /* Id блока, в котором будет слайдер */ #rec286812963 { background-image: url(https://modslab.net/redactor/upload-images/5fcfb7f38a232.png); background-repeat: no-repeat; background-size: cover; background-position: center; } </style>

Основные блоки на главной странице сайта

Далее на главной странице я разместила все фотопроекты, предварительно поделив их на разделы (для удобства фильтрации для заказчика), также добавила на главную страницу (прокат платьев, наши работы и отзывы) Это основные разделы для потенциального заказчика.Также на сайте я добавила разделы с контактами, фотокнигами и подарочными сертификатами (но вынесла их в меню, на отдельные странички)

Главная фишка

Для сайта фотографов

На сайте я разместила блок с кнопкой на сайт фотоальбомов от компании vigbo.ru, это тоже платформа для создания сайтов, направленная на фотографов. Но так как я уже создала сайт на Тильда, а мне нужен был данный альбом все таки, он нужен чтобы отдавать обработанные фото со схемки в виде сайта с фото.У данной платформы можно создать отдельно альбом, без привязки к сайту... И это очень классно!Поэтому я спокойно создала альбом, в который фотограф сможет загружать альбомы заказчиков и отправлять красиво упакованные работы. Это ли не круто?!На сайте я создала отдельный блок для перехода в данный альбом, для удобства еще сделала в виде анонса, чтобы человек сразу мог найти данный раздел)

И вот, в целом нечего долго рассказывать, проще посмотреть)Весь проект по ссылке - https://happyangels.ru/

Спасибо что дочитал до конца!Буду рада твоим комментариям)

мои проекты на Behance - https://www.behance.net/mary_tadich

44
Начать дискуссию