Как сделать свой бейджик на тильде

Добавил пользователь Евгений Кузнецов
Обновлено: 29.08.2024

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

Градиентные кнопки для сайтов на платформе Тильда

Данную модификацию я использую на сайтах, которые имеют определённую стилистику и заказчики хотят видеть градиентные кнопки. В тильде нет стандартной настройки, что бы сделать такую кнопку. Поэтому я использовал код, который беру с сайта michailozdemir.dev

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

У Романа много интересных модификаций для Тильды, которые можно применять на своих сайтах. Если что-то не получится, то можно всегда ему написать и попросить помощи.

Глитч в zero block на Тильде для текста

Калькулятор и квиз в zero block на Тильде

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

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

Бесплатный Web сервис по созданию уникальных бейджей.

3 простых шага для создания бейджика:

выбираем шаблон или загружаем свое изображение;
заполняем текстовые поля (лишние удаляем);
скачиваем или распечатываем готовый бейджик.

1 Дизайн

Шаблон для бейджика:

Настройка надписи:

шрифт
размер
цвет
прозрачность
выравнивание

Выбор аватара:

Загрузите свое изображение:

Создайте своё уникальное оформление бейджика. Выбор огромен: десятки шаблонов, множество аватаров, возможность загрузить собственный дизайн!

2 Информация

Бейджик персональный для группы людей

Представьтесь окружающим, расскажите кто Вы!

3 Результат

Ваш уникальный бейджик:

Вставьте свой бейджик в текстовый редактор и задайте этой картинке следующие размеры: ширина 8,5 см., высота 5,5 см.

Ссылка на страницу с настройками Вашего бейджика: показать ссылку

Скачайте готовый бейдж в виде картинки, или распечатайте бейджик прямо с сайта.

Бейджи сейчас активно используются не только в учреждениях для сотрудников и на семинарах, но и в школе: есть бейджи первоклассников, бейджи дежурных по школе и т.д. В этой статье мы расскажем, как сделать и распечатать бейджи для любых целей. А также приведем шаблон бейджа стандартного размера. Статья сопровождается видеоуроком.

Стандартный размер бейджа

Главная сложность в том, что нет готовых шаблонов бейджей, заключается в том, что бейджи могут быть разных размеров. Мы нашли в интернете размеры от 30 мм до 60 мм по высоте — и все они обычные горизонтальные бейджи. В то же время лично мне всегда попадались бейджедержатели одного размера, поэтому предлагаю исходить из размера стандартного бейджа 90х55 мм.

Как сделать и распечатать бейджик?

Предлагаю инструкцию, как сделать бейджи любого размера.

Шаг 1

Перед началом работы измерьте или бейдж-образец, или имеющиеся у вас бейджедержатели, вертикальные или горизонтальные — делаются они одинаково.

Шаг 2

Откройте новый документ Word и выберите ориентацию листа. Для стандартного бейджа лучше всего сделать альбомную ориентацию, для вертикального — оставить по умолчанию.

На вкладке Разметка страницы выберите Альбомная.

Далее сделаем отступы от границ страницы поменьше: Разметка страницы — Поля — Узкие.

Шаг 3

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

Получится вот такая таблица

Далее выделим таблицу. Для этого наведем курсор на левый верхний угол таблицы, пока не появится крестик.

Далее нажнем правой кнопки мыши на крестик. Появится контекстное меню, в котором выберем пункт Свойства таблицы.

В свойств таблицы на вкладке Строка:

задаем высоту строки — 5,5 (см);
размер — точно;
убираем галочку Разрешить перенос строк на новую страницу.

На вкладке Столбец ставим ширину столбца — 9 (см).

Получается таблица, по ячейкам которой нужно будет нарезать бейджики.

Шаг 4

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

Ставим курсор мыши в первую ячейку и начинаем работать.

Целесообразно вставить логотип школы или компании как Вставка — Рисунок и далее выбрать место хранения файла на компьютере. Таким же образом можно вставить и фотографию человека.

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

Полностью форматируем содержимое первой ячейки — первого бейджа.

Шаг 5

Далее полностью выделяем содержимое первой ячейки, копируем и вставляем во вторую и третью ячейку. Далее выделяем первую строку и копируем ее во вторую, третью и другие строки.

Шаг 5. Как распечатать бейджик?

Для распечатки бейджика нажимаем CTRL + P и в открывшемся окне нажимаем Печать.

Таким образом мы рассмотрели создание бейджика в Word, и вы сможете создать свои бейджи под любой нестандартный размер — нужно только создать таблицу с ячейками нужного размера. Обратите внимание, что нужно один раз отформатировать бейджик и далее уже просто копировать текст и менять ФИО и надписи, а не делать оформление в каждой ячейке отдельно.

Видеоурок

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

Понравился материал?
Хотите прочитать позже?
Сохраните на своей стене и
поделитесь с друзьями

Вы можете разместить на своём сайте анонс статьи со ссылкой на её полный текст

Ошибка в тексте? Мы очень сожалеем,
что допустили ее. Пожалуйста, выделите ее
и нажмите на клавиатуре CTRL + ENTER.

Кстати, такая возможность есть
на всех страницах нашего сайта

0 Спам

9 halynkahytschka1998 • 13:49, 28.11.2019

8 Комментарии • 12:05, 07.08.2019

6 [Материал] Ян Галич • 20:19, 12.09.2018

7 Екатерина_Пашкова • 20:34, 12.09.2018

4 [Материал] Ирина Комягина • 09:28, 04.09.2018

5 Екатерина_Пашкова • 21:40, 04.09.2018

0 Спам

3 daria6704 • 23:12, 27.02.2018

2 0937820810 • 20:34, 06.03.2017

1 e-kashuba • 21:25, 15.11.2016

Отправляя материал на сайт, автор безвозмездно, без требования авторского вознаграждения, передает редакции права на использование материалов в коммерческих или некоммерческих целях, в частности, право на воспроизведение, публичный показ, перевод и переработку произведения, доведение до всеобщего сведения — в соотв. с ГК РФ. (ст. 1270 и др.). См. также Правила публикации конкретного типа материала. Мнение редакции может не совпадать с точкой зрения авторов.

Для подтверждения подлинности выданных сайтом документов сделайте запрос в редакцию.

О работе с сайтом

Мы используем cookie.

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

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

Если вы обнаружили, что на нашем сайте незаконно используются материалы, сообщите администратору — материалы будут удалены.

Перенос макета из Figma в Tilda стал возможен совсем недавно. В середине 2021 года команда представила данную функцию. Если раньше подобные действия требовали дополнительных усилий в виде обращения к сторонним сервисам и модификациям, которые увеличивали нагрузку на бюджет, то сегодня это делается быстрее и проще.

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

Преимущества и возможности сервиса Tilda

Tilda представляет собой новейший конструктор сайтов. Его главная особенность заключается в удобстве пользования.

Пользователь может выбрать один из трех тарифов, а именно:

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

Преимущества и возможности сервиса Tilda

Какие особенности есть у Tilda:

Привлекательный внешний вид страницы. С помощью имеющихся шаблонов получится оптимизировать сайт с учетом ваших пожеланий.
Визуальный контент подается наиболее удачным образом. В библиотеке есть огромное количество изображений, которые можно установить на страницу. Все что вам нужно – это перетащить файл, после чего ваши материалы будут загружены на ресурс. Чтобы пользователю было удобнее, есть коллекции иконок.
Можно устанавливать видео- и аудиоконтент. Это поможет добавить оригинальности сайту, данный момент особенно важен, если вы занимаетесь бизнесом. Tilda может работать с другими сервисами, чтобы вы могли задействовать их возможности.
Информация разделена по блокам. Такое решение позволяет сделать эксплуатацию сайта максимально удобной. Все что нужно сделать — это рассортировать данные, и процессы оптимизируются.

Ваш Путь в IT начинается здесь

Подробнее

Достоинства Тильды не ограничиваются вышеперечисленным. Если говорить про тариф Personal, чтобы им пользоваться в течение 30 дней, придется заплатить 500 р. Месячное использование Business обойдется уже в 1 000 р.

Достоинства конструктора сайтов Тильда:

Этим сервисом просто пользоваться. Данный конструктор сайтов удобен и понятен, даже если вы новичок, быстро справитесь со своей задачей. Функционал разделен на несколько блоков, поэтому вы сможете своими руками создать сайт действуя интуитивно. Есть огромное количество готовых шаблонов, причем с каждым годом их становится все больше. Чтобы сделать сайт, потребуется только пройти регистрацию, а затем выполнить простую последовательность действий. Не обязательно знать языки программирования. Процесс конструирования визуализирован, главное выбрать то, что вы хотите.
С помощью Тильда получится сделать привлекательный и необычный сайт. Такой результат вы получите, даже если будете конструировать его из шаблонов. Результат будет еще более великолепным, если вы разбираетесь в веб-дизайне, можете создать пошаговые анимации, понимаете, как это будет функционировать на сайте. Поэтому ресурс будет привлекать пользователей за счет красивой визуальной составляющей, даже если полезного контента на сайте пока недостаточно.

Преимущества работы в Figma

Figma используют специалисты, занимающиеся дизайном, а также рекламисты, менеджеры или веб-разработчики. Какие достоинства есть у Фигма и почему многие предпочитают данный конструктор сайтов? Поговорим об этом далее.

Преимущества работы в Figma

В Figma получится отрисовать элементы интерфейса, сделать интерактивный макет сайта и приложения, иллюстрации, векторную графику. Большинство веб-дизайнеров создают в Фигме прототипы сайтов для Tilda.

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

В Figma получится продемонстрировать клиенту, как сайт будет смотреться на разных устройствах.

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

В этом конструкторе сайтов вы найдете все необходимые инструменты, чтобы работать с векторными изображениями, с помощью Фигмы можно экспортировать их в формат SVG, импортировать векторные изображения из AdobeIllustrator или редактора Sketch.

Хотите больше зарабатывать или работать удалённо? Запутались в разнообразии профессий и не знаете, куда двигаться?

Команда GeekBrains вместе с экспертами по построению карьеры подготовили документы, которые помогут найти и выбрать востребованную высокооплачиваемую профессию.

Скачивайте и используйте уже сегодня:

Каналы для поиска работы

Список из 26 ресурсов и 34 Telegram-каналов

Топ-30 самых востребованных и высокооплачиваемых профессий 2022

Рейтинг наиболее актуальных специальностей в 9 направлениях

Данный конструктор сайтов подходит не только для веб-дизайнеров. Чтобы узнать, в каких нестандартных ситуациях можно использовать Фигму, можно посмотреть в разделе Templates.

Преимущества работы в Figma

Если вы занимаетесь бизнесом, SMM или же работаете менеджером проектов, то сможете вести в Figma проекты с Диаграммой Ганта, разрабатывать рекламу с шаблонами для Фейсбука.

Веб-разработчики оценят режим Developer Handoff, в котором можно использовать направляющие для определения дистанции до объектов, их параметры, копировать CSS-стили элементов, а также код для Android и iOS.

В Фигме создана единая среда, чтобы можно было работать совместно с коллегами, разрабатывая дизайн. Это – главное отличие данного конструктора от других графических редакторов. Благодаря этой особенности разработчики всегда будут знать, что макет был изменен, а менеджер сможет отслеживать, на каком этапе находится создание проекта, заказчик будет комментировать дизайн непосредственно в конструкторе.

Почему многие выбирают Figma, чтобы работать вместе с командой:

Это конструктор является кроссплатформенным. Вы сможете работать в нем как из браузера, так и с планшета с любой ОС. Не придется устанавливать приложения и согласовывать дизайн.
Облачный сервис. Поскольку Figma является онлайн-конструктором, итоговые результаты хранятся в облаке, поэтому доступ к проекту открыт всем членам команды. Каждый из них может увидеть внесенные корректировки, восстановить резервную копию, если это потребуется.
Фидбек. Пользователи имеют возможность комментировать проект прямо в макете и получать обратную связь от других членов команды. История переписки будет сохранена, получится быстро согласовать макет.

Мы вместе с экспертами по построению карьеры подготовили документы, которые помогут не ошибиться с выбором и определить, какая профессия в IT подходит именно вам.

Благодаря этим гайдам 76% наших студентов смогли найти востребованную профессию своей мечты!

Скоро мы уберем их из открытого доступа, успейте скачать бесплатно:

Гайд по профессиям в IT

5 профессий с данными о навыках и средней заработной плате

100 тыс. руб за 100 дней с новой профессией

Список из 6 востребованных профессий с заработком от 100 тыс. руб

Все профессии, которые есть в IT-сфере

63 профессии и необходимые для них навыки

Критические ошибки, которые могут разрушить карьеру

Собрали 7 типичных ошибок. Их нужно избегать каждому!

В ряде случаев требуется перенос макета из Figma в Tildа. К примеру, если вам необходима гибкая интерфейсная графика.

Правила переноса макета из Figmaв Tilda и небольшие нюансы

Чтобы правильно выполнить перенос макета из Figma в Tildа, придерживайтесь следующих рекомендаций:

Выбирайте ширину фрейма в Figma 1200 px. Если этот параметр превышает данное значение, необходимо рядом сделать фрейм с требуемой шириной, скопировать все в него и сделать выравнивание по центру. На данном этапе у вас не возникнет сложностей, так как сетку в этом конструкторе, если проектируют дизайн под Тильду, делают 12 колоночную. Также можно постараться уместить все в 1160 пикселей.
Смысловые блоки либо экраны разбивайте на фреймы. Когда дизайн сайта выполнен в Фигме в одном фрейме, следует разбить на каждый по отдельности фрейм. Идеально, когда ширина фрейма 1200, а высота нового фрейма такая же, как высота блока из готового дизайна.
Кнопки в Figma следует объединять в группу слоев, также кнопки необходимо назвать Button. Таким образом кнопка в Фигме будет иметь шэйп (Rectangle) и текстовую составляющую. При этом у текста ширина контейнера должна равняться этому параметру у шейпа.
Для импорта нескольких изображений следует назвать группу image или svg.

Следуйте этим простым правилам и тогда у вас получится сделать перенос макета из Figma в Tildа.

Правила переноса макета из Figma в Tilda

При переносе макета из Figma в Tildа обращайте внимание на следующие моменты:

Не переносите формы.
Группы из Фигмы можно перенести в Тильду следующим образом: если внутри одной группы есть другие группы, необходимо все переносить в первую.
Придется адаптировать макет под остальные разрешения самостоятельно.
Когда в Фигме на элементе установлен эффект, но при этом его нет в Тильде, эффект можно импортировать картинкой.
Когда перенесете дизайн в Тильду, необходимо залить изображения на ее сервер, уведомление об этом появится в верхней части конструктора, нужно выбрать разрешение экрана, нажав соответствующую кнопку.
Когда фотография не залита на сервер Тильды, изображения будут храниться один месяц.
Не получится сделать импорт анимации из Figma в Tildа. Это значит, что вам нужно настроить анимацию вручную.
Импортируя дизайн, элементы в Тильда нужно располагать по левому верхнему краю (Left, Top).
Когда необходимо перенести верстку из Figma в Tildа, при этом изображение должно быть как фоновое, его следует загрузить во Frame. После этого выбираем Фрэйм, в Fill где выбор цвета, с Solid нужно переключить на Image. Когда изображение загружается как изображение, оно будет перенесено в новый конструктор как стандартная картинка. Тогда придется в настройках изменять позиционирование и параметры, к примеру, если нужно растянуть изображение на все разрешение экрана.

Этапы переноса макета из Figma в Tilda

Как сделать перенос дизайна из Figma в Tildа:

Прежде всего получаем API Accessтоке на Figma в настойках вашего аккаунта;
Передаем токен в настройках экспорта ваешго зеро-блока.

Для получения токена Figma заходим в настройки вашего аккаунта (Mainmenu>Helpandaccount>Accountsettings).

Пролистываем до пункта Personalaccesstokens, указываем название, к примеру, Tilda.

Спустя 2-3 секунды токен будет сформирован. Вы должны скопировать его выполнить перенос из Figma в Tildа. Чтобы сделать это, нужно открыть проект и создать зеро-блок. Затем необходимо перейти в его редактирование и выбрать параметр Import.

Далее в открывающееся окно вставляем токен и ссылку на выбранный фрейм из макета, который необходимо экспортировать. Чтобы сделать это, выделяем выбранный фрейм и нажимаем кнопку Share, копируем ссылку на него в попапе. Для этого нужно нажать на ссылку Copylink.

После того, как вы укажете токен и ссылку на фрейм, нужно нажать на кнопку Import и дождаться загрузки.

Этапы переноса макета из Figma в Tilda

Выполнив эти несложные действия, вы сможете привязать токен к проекту на Тильде. Если вам понадобится снова выполнить перенос макета из Figma в Tildа, просто создайте новый зеро-блок, откройте параметры экспорта и укажите ссылку на выбранный блок в Фигме.

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