Личная консультация по вёрстке на Tilda №1
Разработаем прибыльный сайт с уникальным дизайном и продающим копирайтингом, который адаптируется под все устройства!
+38 (095) 810-06-76
1. Вставляем битый SVG из Figmа в Tilda
2. Переносим фон без потери качества
3. Оптимизируем скорость загрузки сайта
4. Учимся работать с базовыми CSS-стилями
5. Бонус: изменяем стили стандартных блоков Tilda
Экспорт SVG из Figma
Работа с фоном
Оптимизация скорости загрузки
Написание CSS-стилей
Правим стандартный блок
Полезные ссылки
Вопрос #1
Вставляется SVG вместо пустого квадрата
ПРИЧИНА:
Баг либо Фигмы, либо Тильды. Обычно это происходит, если SVG-документ экспортируется из Фигмы и при этом в нём используется градиентная заливка.
РЕШЕНИЕ:
Переносим SVG-документ в Adobe Illustrator и снова экспортируем в SVG уже через него. В 95% случаев помогает.

В случае с экспортом из Figma с последующим переносом на Тильду, к сожалению, никакого решения этой проблемы нет.
Вопрос #2
Как переносить фоны без потери качества?
ПРИЧИНА:
Работа в неправильном фрейме.
Некорректная разбивка фона по ZeroBlock-ам.
Загрузка фонового изображение в неправильном разрешении.
РЕШЕНИЕ:
Если вы хотите загружать фон не слоем с изображением, а именно фоном блока - обязательно следите за тем, чтобы размер (ШИРИНАхВЫСОТА) фонового изображения соответствовал размеру контейнера ZeroBlock. Только в этом случае фон не будет растягиваться, сжиматься, пикселизироваться, обрезаться и т.д.

Обязательно:
  • ширина 1920px
  • высота фонового изображения = высоте ZeroBlock

Пошаговая инструкция по оптимизации фоновой картинки:
  1. Все слои, из которых состоит фон, группируются и сливаются в один слой.
  2. Заходим в Photoshop и создаём рабочую область с такими параметрами: ширина 1920px, высота = высоте ZeroBlock.
  3. Вставляем наше изображение и центрируем его.
  4. Выделяем слой с изображением.
  5. В верхней панели инструментов выбираем вкладку "Редактирование" -> "Масштаб с учётом содержимого".
  6. Зажимаем сочетание клавиш Alt + Shift.
  7. Медленно растягиваем изображение, пока его ширина не станет равна 1920px.
  8. Проверяем, чтобы нигде по краям рабочей области не было пустых (белых) мест.
  9. Экспортируем наше изображение.
  10. Заходим в ZeroBlock и загружаем его в качестве фона.

Также отдельно хочу отметить, что все элементы, которые не являются фоном, но при этом выполняют декоративную функцию (прозрачные объекты, размытые объекты) НИ В КОЕМ СЛУЧАЕ не должны быть внутри фонового слоя. Все они должны загружаться отдельными изображениями поверх фона.
Вопрос #3
Как оптимизировать скорость загрузки сайта?
ПРИЧИНА:
Основная причина низкой скорости загрузки сайта на Тильде - количество, качество и формат используемых изображений. Каждое PNG-, JPG-, JPEG-, GIF-изображение увеличивает общий вес файлов сайта. Часто можно увидеть, что некоторые картинки "прогружаются" значительно позже, чем, например, шрифты и системные элементы Тильды (кнопки, шейпы, формы и даже анимация).

Также очень частая ошибка новичков в вёрстке - загружать сложные элементы (кнопки с градиентом, текст с градиентом) в виде картинок. Это самый серьезный "костыль", который не рекомендую использовать, если хотите повысить качество и уровень своих работ. Всё это делается с помощью кода CSS для любого объекта на сайте.
РЕШЕНИЕ:
Чек-лист по оптимизации скорости сайта на Тильде:

1. Убедитесь, что на сайте включен Lazy Load (настройки сайта, вкладка "Ещё", под вкладкой редактирования CSS-стилей).
Если нужно выключить Lazy Load, то делать это лучше вручную в ZeroBlock для каждого слоя по отдельности.

2. Все изображения без фоновой прозрачности (пустой фон) на сайте должны быть конвертированы в формат JPEG. Однако этот формат может повлиять на качество самого изображения, поэтому будьте внимательны. Изображения, в которых присутствует прозрачность фона - только PNG-формат.

3. Все изображения на сайте должны быть оптимизированы с помощью сервиса TinyPNG (https://tinypng.com/). Просто перед загрузкой любого изображения в Тильду - прогоняйте его через этот сервис. В среднем он сжимает вес изображений аж на 40-70%.

4. Не загружайте элементы с градиентами и тенями в виде картинок. Прописывайте CSS-стили для сложных элементов.

Наглядный гайд от Тильды - help-ru.tilda.cc/website-speed
TinyPNG
Вопрос #4
Как кастомизировать элементы в ZeroBlock?
ПРИЧИНА:
Чтобы вёрстка была качественной, чистой и профессиональной - необходимо научиться кастомизировать кнопки и шейпы в Тильде с помощью кода. Для этого необходимо изучить основы CSS и HTML, либо воспользоваться шаблонами, которые я вам дам.

Загрузка градиентов на фон кнопок и текста картинками понижает скорость загрузки, ну и в целом выглядит халтурно.
РЕШЕНИЕ:
Учимся писать свои CSS-стили.
Первое время пользуемся моими шаблонами.

Чтобы применить CSS-стиль для кнопки, шейпа или текста, необходимо:

  1. Присвоить класс CSS элементу. Для этого необходимо зайти в ZeroBlock и нажать правой кнопкой мыши на элемент.
  2. В выпадающем списке выбрать "Add CSS Сlass name"
  3. В открывшемся окне в поле "CSS Class name" вписываем любое слово на английском. Например, "gradient".
  4. Добавляем на страницу блок T123.
  5. Вставляем в Т123 заранее подготовленный код.
  6. Находим первую строчку внутри кода, за скобками <style>.
  7. Изменяем класс СSS на тот, что присвоили элементу. Обязательно добавляем точку перед классом.
  8. Изменяем параметры CSS-стилей внутри кода.
  9. Нажимаем "Сохранить" и публикуем страницу.

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

Градиент для Shape и кнопок

<style>
/*Пишем класс CSS, перед ним обязательно точка*/
.gradient{
    background: linear-gradient(267.13deg, #D9A239 0.17%, #FFF0BE 36.22%, #EFBE5F 70.37%, #E7AC54 101.06%);
}
</style>
Градиент

Тень для Shape и кнопок

<style>
/*Пишем класс CSS, перед ним обязательно точка*/
.shadow{
     box-shadow: 0 14px 30px 0 rgba(145, 0, 66, 0.35);
}
</style>
Тень
Градиент + тень + анимация
Градиент + тень + блик

Градиент, тень и анимация

для Shape и кнопок

<style>
/*Пишем класс CSS, перед ним обязательно точка*/
.animation{
    background: linear-gradient(267.13deg, #D9A239 0.17%, #FFF0BE 36.22%, #EFBE5F 70.37%, #E7AC54 101.06%);
    box-shadow: 0 14px 30px 0 rgba(148, 0, 66, 0.35);
    background-position: 100% 0 !important;
    background-size: 200% 200%;
    transition: all 0.5s ease-in-out !important;
}
/*Эффект наведения*/
:hover{
   box-shadow: 0 0 0 0 rgba(0,40,120,0);
   background-position: 0 0 !important;
}
</style>
Градиент + тень + анимация

Градиент, тень и блик для кнопок

<script>
/*Меняем часть кода в скобках и кавычках, он берётся из CSS элемента в панели разработчика*/
    $('#rec384892869 .tn-elem[data-elem-id="1638032490300"] .tn-atom').addClass('autoflash').append('<div class="flash lighting" style="height: 70px;width: 40px;top: 0px;left: -140px;"></div>');
</script>

<style>

     .autoflash{
        position: relative;
        overflow: hidden;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

     .flash{
       content: "";
    background-color: rgba(255, 255, 255, 0.5);
    height: 100%;
    width: 3em;
    display: block;
    position: absolute;
    top: 0;
    left: -4.5em;
    -webkit-transform: skewX(-45deg) translateX(0);
    transform: skewX(-45deg) translateX(0);
    -webkit-transition: none;
    transition: none;
    }
    
    .lighting {
    webkit-animation: moving 3s ease-in-out infinite;
    -moz-animation: moving 3s ease-in-out infinite;
    -ms-animation: moving 3s ease-in-out infinite;
    -o-animation: moving 3s ease-in-out infinite;
    animation: moving 3s ease-in-out infinite;
   
    }
    
  @keyframes moving {  
     30% {  webkit-transform: skewX(-45deg) translateX(33.5em);
        transform: skewX(-45deg) translateX(33.5em);   
        
        }
   
    100% {  webkit-transform: skewX(-45deg) translateX(33.5em);
        transform: skewX(-45deg) translateX(33.5em);   
        
        }
     }
      
</style>
Градиент + тень + блик

Градиент для текста

<style>
h1 {
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(to right , #930042 , #C20056 60%);
    background-position: 0 0;
}
</style>

ГРАДИЕНТ

Бонусный урок #5
Как кастомизировать стандартные блоки Тильды?
ПРИЧИНА:
Часто нам хочется использовать стандартный блок, чтобы не адаптировать вручную точно такой же по дизайну блок из нашего макета. Или, допустим, вам просто необходимо использовать стандартный блок, который невозможно заменить версткой в Zero. Пример - блоки из категории "Магазин", а также Pop-up'ы.

Если вы хотите, чтобы стили всех кнопок, форм, заголовков - были одинаковыми, то вам необходимо научиться кастомизировать стандартные блоки Тильды с помощью собственного кода.
РЕШЕНИЕ:
Это бывает очень сложно.
Первое время пользуемся моими шаблонами.

Чтобы применить CSS-стиль для элемента внутри стандартного блока Тильды необходимо:

  1. Добавляем стандартный блок, который будем изменять.
  2. Добавляем на страницу блок T123.
  3. Вставляем в Т123 заранее подготовленный код.
  4. Изменяем параметры CSS-стилей внутри кода.
  5. Публикуем страницу, открываем её в новой вкладке.
  6. Находим элемент, который хотим кастомизировать.
  7. Нажимаем по нему правой кнопкой мыши и выбираем пункт "Посмотреть код".
  8. Находим класс элемента и копируем его.
  9. Находим первую строчку внутри кода, за скобками <style>.
  10. Изменяем класс элемента на тот, что скопировали. Обязательно добавляем точку перед классом.
  11. Нажимаем "Сохранить" и публикуем страницу.

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

Градиент, тень и анимация для кнопок в стандартном блоке

<style>
/*Пишем класс CSS, перед ним обязательно точка*/
.t744__btn{
    background: linear-gradient(267.13deg, #D9A239 0.17%, #FFF0BE 36.22%, #EFBE5F 70.37%, #E7AC54 101.06%);
    box-shadow: 0 14px 30px 0 rgba(183, 164, 117, 1);
    background-position: 100% 0 !important;
    background-size: 200% 200%;
    transition: all 0.5s ease-in-out !important;
}
/*Эффект наведения*/
:hover{
   box-shadow: 0 0 0 0 rgba(0,40,120,0);
   background-position: 0 0 !important;
}
</style>
Studio Headphones
SKU: 700.954.29
100
₴
BUY NOW
When we first checked out our new headphones, we noticed the box said “improved bass”. We had to wonder if this was marketing jargon or the real thing? But it only took a moment to realize that bass was not kidding.

Кастомный фон стандартного блока

<style type=text/css>
/*Вставляем ID блока, фон которого меняем*/
#rec384909047 {
 
 background-image: linear-gradient(to top, rgba(0, 0, 0, .60), rgba(0, 0, 0, .98)), url(https://static.tildacdn.com/tild3736-3037-4334-b863-353562353039/d946dbce69a24e0288d5.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    background-attachment: fixed;
    background-size: cover;
    
}

</style>
Developments in printing technology, ink, and paper making, made it possible to print letterforms of high contrast and delicate hairlines.
Бонусные материалы #6
Сервисы и фишки для Тильдологов
Nolim
Но́лим - это платформа модификаций, позволяющая тильдаменам создавать крутые веб-проекты не тратя время на код
Блог Дмитрия Рыбалки
Профессиональный разработчик на Тильде. Делится секретами и фишками бесплатно.
Блог Михаила Лоздемира
Профессиональный разработчик на Тильде. Делится секретами и фишками бесплатно.
Tilda Helper
Расширение для браузера, которое поможет в работе с платформой
Made on
Tilda