1. Заходите в онлайн конструктор Tilda и регистрируетесь, к сожалению, но для работы таймера необходим блок с html кодом, который доступен только на платном тарифе. Цена вопроса 750р за месяц работы сайта. Перейдя по моей ссылки, как я понял, Вам дадут после оплаты бонусом 1 месяц.
2. Создаём новый сайт
3. Создаём новую страницу для сайта и выбираем пустую страницу, так как мы всё будем делать с нуля и никакой шаблон нам не нужен :)
4. Нажимаем на + и в самом низу ищем "Zero блок"
5. Далее необходимо нажать на "Редактировать блок"
6. Выделяем и всё удаляем благодаря волшебной клавиши "Del"
7. Добавляем на монтажную область элемент Shape и ставим значение SHAPE-Circle, BG.COLOR- #E8DFD7. Далее выставляем настройки рамки. Цвет BORDER- #7D726A, толщину рамки BRDR.SIZE,PX- 1. После этого уже выставляем данный элемент на необходимую ему позицию X,Y и ставим размеры W-401px и H-633px
8. Добавляем на монтажную область элемент Image и выставляем настройки рамки. Цвет BORDER- #7D726A, толщину рамки BRDR.SIZE,PX- 1, RADIUS-360. После этого уже выставляем данный элемент на необходимую ему позицию X,Y и ставим размеры W-114px. Главное правильно подобрать размер изображения, чтобы оно красиво смотрелось.
9. Добавляем на монтажную область ещё один элемент Image и выставляем настройки рамки. Толщину рамки (хотя по сути в этом нет необходимости) BRDR.SIZE,PX- 1, RADIUS-300. После этого уже выставляем данный элемент на необходимую ему позицию X,Y и ставим размеры W-360px. Главное правильно подобрать размер изображения, чтобы оно красиво смотрелось и получилось достаточно овальным. Изображение было обрезано 3:4 и подгонялось так, чтобы головы супругов были почти обрезаны.
10. А вот теперь последний штрих в данном блоке. Это добавление текста и его настройка. COLOR- #525152, SIZE-28, TYPEFACE-Lobster, WEIGHT-Normal. Ставим его по центру. Для двух слов и одной буквы использовалось по одному элементу Text. После настройки необходимо нажать на клавишу "Save" для сохранения нашего первого Zero блока, а после на "Close", чтобы его закрыть.
11. Далее нам необходимо снова создать Zero блок и начать его редактировать. Удалить всё с монтажной области и изменить её цвет. Такое уже делали с первым Zero блоком.
12. Добавляем на монтажную область элемент Shape и ставим значение SHAPE-Rectangle (Вроде бы оно уже должно изначально было стоять), BG.COLOR- #E8DFD7. Далее выставляем настройки рамки. Цвет BORDER- #7D726A, толщину рамки BRDR.SIZE,PX- 1, RADIUS- 90. После этого уже выставляем данный элемент на необходимую ему позицию X,Y и ставим размеры W-1155px и H-505px
13. Далее добавляем 2 элемента Text. Один используется, как заглавие, а другой для остальной информации.
14. Далее нам необходимо снова создать Zero блок и начать его редактировать. Удалить всё с монтажной области, изменить её цвет (BG.COLOR- #E8DFD7), а также размеры (GRID CONTAINER HEIGHT, px- 680).
15. Теперь создаём элемент Shape и настраиваем его.
BG.COLOR- #E8DFD7
Цвет BORDER- #7D726A
Толщина рамки BRDR.SIZE,PX- 1,
RADIUS- 40.
Размеры W-580px и H-321px
После выставления данных настроек располагаем на нужном месте данный элемент X-20, Y-14. Нам необходимо 2 таких элемента, расположенных по диагонали, поэтому можно просто скопировать данный элемент.
16. Теперь создаём элемент Image и настраиваем его.
Размеры W-443px
После выставления данных настроек располагаем на нужном месте данный элемент X-80, Y-349. Нам необходимо 2 таких элемента, поэтому копируем его и располагаем по диагонали. Также не забываем про надписи в элементах Shape.
17. Далее нам необходимо снова создать Zero блок и начать его редактировать. Удалить всё с монтажной области, изменить её цвет и высоту поставить 470px.
18. Теперь создаём элемент Shape и настраиваем его.
BG.COLOR- #E8DFD7
Цвет BORDER- #7D726A
Толщина рамки BRDR.SIZE,PX- 1,
RADIUS- 50.
Размеры W-1150px и H-300px
После выставления данных настроек располагаем на нужном месте данный элемент X-26, Y-112.
19. Необходимо расположить текст.
COLOR: #525152,
SIZE:50,
TYPEFACE: Georgia,
WEIGHT: Semibold.
20. Настройки для остального текста:
COLOR: #525152,
SIZE:30,
TYPEFACE: Georgia,
WEIGHT: Normal.
21. Снова создаём Zero блок и редактируем его. Удаляем всё с монтажной области, изменяем её цвет. У меня её высота стоит 330px. Далее добавляем 2 элемента Text. (Честно говоря уже замахался печатать. Будто это и так не понятно и не видно)
22. Добавляем 1 элемент Shape и редактируем его.
Настройки:
BG.COLOR- #387963
Цвет BORDER- #7D726A
Толщина рамки BRDR.SIZE,PX- 1,
RADIUS- 360.
Размеры W-120px и H-120px
После данной настройки необходимо сделать 4 копии и изменить у них цвет.
BG.COLOR- #7A6F65, BG.COLOR- #D8D1BB, BG.COLOR- #CADEF1, BG.COLOR- #E2CFE2.
После этого располагаем приблизительно элементы на их места, зажимаем клавишу Shift и выбираем каждый элемент Shape. Ниже на скриншоте указано, что нажать, чтобы выровнять относительно друг друга их.
Далее нажимаем ПКМ (Правую кнопку мыши) и выбираем Group. Это делается для удобства их расположения. На скриншоте "Настройка элементов Shape", который расположен ВЫШЕ, указан параметр, который отвечает за расстояние между ячейками.
23. Создаём Zero блок и редактируем его. Удаляем всё с монтажной области, изменяем её цвет. Ставим высоту 730px. Далее добавляем 2 элемента Text.
24. О чудо, сталкиваемся с новым элементом Form. (Добавляем его на форму и настраиваем). К сожалению, но статья эта пишется уже долго и уже забыл, что и где я менял, но думаю, что все настройки указал, скорее всего даже часть настроек у вас уже будет такой и я её прописал зря:)
Настройки Form Style:
- FORM DESING: Vertical
- FONT FAMILY: Lobster
- INPUT FONT SIZE: 16
- INPUT FONT WEIGHT: Normal
- INPUT FONT FAMILY: Lobster
- INPUT COLOR: #525152
- INPUT BG. COLOR: #E6D2C0
- INPUT BORDER COLOR: #7D726A
- INPUT BORDER SIZE: 1
- INPUT RADIUS: 20
- INPUT HEIGHT: 60
- INPUT MARGIN BOTTOM: 20
- COLOR OF CHECKBOXES,...: #7D726A
- CHECKBOX LABEL FONT SIZE: 14
- CHECKBOX LABEL FONT WEIGHT: Normal
- INPUT TITLE FONT SIZE: 16
- INPUT TITLE FONT WEIGHT: Normal
- INPUT TITLE COLOR: #525152
- INPUT TITLE PADDING BOTTOM: 5
Настройка для Button:
- BTN TITLE: ОТПРАВИТЬ
- ALIGN: Center
- TEXT COLOR: #525152
- BG. COLOR: #E6D2C0
- BTN BORDER COLOR: #7D726A
- BTN BORDER SIZE: 1
- BTN CORNER RADIUS: 20
- BTN WIDTH: 160
- BTN HEIGHT: 50
- BTN FONT FAMILY: Lobster
- BTN FONT SIZE: 14
- BTN FONT WEIGHT: Semibold
После данных настроек можно и указать уже высоту формы и её расположение, если забыли, то это указывается в самом начале настроек элемента.
X-282px, Y- 89px, а W-637px
25. Далее необходимо зайти в INPUT FIELDS и создать 5 полей для ввода. Ниже скриншоты с настройками полей. Тут я думаю расписывать не нужно всё и так интуитивно понятно. Вообще будто бы всё и так понятно в создании данного пригласительного и без моей статьи :) Отпишитесь об этом в комментариях!
26. Далее просто создаём элемент Shape и выставляем настройки как на скриншоте ниже. Необходимо будет нажать комбинацию клавиш Ctrl+L, чтобы открыть слои и перенести элемент Shape под элемент Form.(Или же просто нажать троеточие... в правом верхнем углу, а там выбрать Show Layers)
27. Что-то я совсем обленился и лень уже расписывать. Вообщем тут просто текст только и в самом низу вектор добавлен, в котором нужно нарисовать сердечко и выбрать для него цвет. На скриншотах всё понятно.
28. А вот теперь пропавший 4-й Zero блок создаем. Это значит, что было бы неплохо создать его между 3-им и 5-ым Zero блоком. Вообщем в нём всё удаляем, выставляем высоту 320px и цвет.
29. Создаем элемент Shape и выставляем ему настройки как указаны на скриншоте ниже, после этого копируем данный элемент и располагаем его на нужно месте.
30. Теперь нам нужно под каждое слово, число, двоеточие свой элемент Text. Здесь без разницы какие вы числа укажите, эти значения всё равно будут изменяется.
31. После этого нажимаем Save, а после уже Close. Далее нам необходимо добавить обложку с таймером CR35. С нёё будет браться информация для нашего таймера, а данная обложка будет скрыта на опубликованной странице и её никто не увидит, так что не нужно переживать. На скриншоте у меня заблокирован данный блок, так как необходимо оплатить тариф.
32. Далее заходим в контент и изменяем значения на необходимые. (Дата и время окончания таймера, а также часовой пояс).
33. Теперь нам необходимо добавить блок с html, он тоже будет открыт только на платном тарифе.
34. Теперь необходимо зайти в контент html блока и вставить туда код, чтобы наш собственный таймер смог функционировать. Вот тут ссылочка на код для таймера. В файле несколько вариантов кодов. Вам необходим самый нижний. Он будет подписан как "Рабочий код со склонением"
35. Теперь нам необходимо опубликовать страницу (Наш сайт), к сожалению, ничего не заработает, так как необходимо будет взять некую информацию для нашего html кода.
36. На опубликованной странице спускаемся к нашему таймеру, который мы сделали в Zero блоке, выделяем один элемент текста со временем, нажимаем ПКМ и выбираем исследовать элемент.
37. Находим данную строку field="tn_text_1724266872206" и копируем значение в кавычках (цифры у вас будут отличаться).
38. Теперь переходим в код html. Снизу на картинке указанно куда необходимо вставить скопированное значение.
39. Далее необходимо исследовать оставшиеся элементы на опубликованном сайте в блоке с таймером. Снизу на скриншоте указал, куда необходимо будет вставлять значение с таких строк field="tn_text_1724266872206", с каждого элемента. (На верхнем скриншоте сам html код куда необходимо вставлять скопированные значения с исследованных элементов). Надеюсь, что всё понятно. После того как все значения изменить в html коде, необходимо сохранить и закрыть "Контент" html блока. После этого снова необходимо опубликовать нашу страницу (сайт).
40. Если вдруг не заработал таймер на опубликованной странице. То необходимо перейти в настройки сайта.
Далее спускаемся в самый низ и переходим во вкладку "Ещё"
В данной вкладке находим пункт, который указан в скриншоте снизу и ставим галочку на нём. После этого всё должно было заработать.
41. А вот теперь будет монотонная работа, по подгонке каждого блока для различных экранов (Планшетов, телефонов....) Мне уже лень делать скриншоты и всё расписывать, но суть в том, что нужно снова редактировать каждый блок и подгонять все элементы в каждой вкладке от экрана монитора (ноутбука) и к меньшему. Не забываем после подгонки каждого блока сохранять свой труд.
Если дочитал статью до этого момента, то это очень удивительно для меня. Надеюсь, что она была полезной :)
Подписывайтесь на телеграмм каналы!
В целях поддержки моего канала или же просто, если хотите отблагодарить за статью, то скиньте хоть червонец. (Вот Ссылочка)
Если хотите получить бонус (Получите бонус, если у Вас не было данной карты) и заодно отблагодарить меня:
Black — дебетовая карта с кэшбэком. Зарабатывайте деньги, а не бонусы. Если оформить по моей ссылке, вы получите 500 ₽ (такие условия на момент выхода статьи)
Ссылка на карту Т-банка
Альфа-Банк. Дарим 500 ₽ за оформление Альфа-Карты по ссылке и 30% кэшбэка с Авито Доставкой до 15 октября:
Ссылка на Альфа-Карту — это бесплатное обслуживание, кэшбэк каждый месяц и много классных предложений от наших партнёров ❤️ (такие условия на момент выхода статьи).
Возможно выйдет видео по созданию данного приглашения ! (Всё зависит от вашей поддержки)