КАКИЕ СЛОЖНОСТИ ПРИ РАБОТЕ С TILDA CC МОГУТ ВОЗНИКНУТЬ У НАЧИНАЮЩИХ ?

Итак. Есть два основных пути разработки сайтов. Первый путь - создание “ с нуля”, - позволяет делать качественные сайты со сложной структурой и высокоуровневым дизайном с помощью команды разработчиков, куда входят, как минимум : веб - и графический дизайнеры, верстальщик , маркетолог. В отдельных случаях , когда нужно подключать к сайту сложные виджеты или создавать сложные эффекты дизайна , - подключается программист, а когда нужно проводить большую работу по заполнению “ нулевого “ контента - подключается и копирайтер, и - в отдельных случаях - даже фотограф. Такие сайты имеют ряд преимуществ: высокоуровневый , уникальный, - что очень важно для последующего продвижения сайта, - дизайн, ограниченный лишь возможностями верстки (HTML и CSS) и более сложного программирования, возможность создавать любой сайт под любые задачи, будь то легкий лендинг или многостраничный сайт со сложной структурой, высокие показатели последующего SEO - продвижения. Но, есть и недостатки: высокая стоимость оплаты разработки такого сайта, сложная организация связей в команде разработчиков, особенно в том случае, когда специалисты работают удаленно, и длительные сроки разработки, - от нескольких недель до нескольких месяцев, - особенно, если Вы хотите сделать под свой сайт уникальный движок, что, конечно же, круто, - но он, как и любая сложная система, будет долго и дорого разрабатываться программистом.

Сегодня мы поговорим о том, с какими сложностями может столкнуться новичок, пожелавший изучить конструктор сайтов Tilda CC ( далее - Тильда).

Второй путь - создание сайта Вашей мечты с помощью одного из существующих сейчас во множестве конструкторов сайтов, предназначенных для того, чтобы значительно облегчить работу над сайтом и его стоимость. Сайты на конструкторах тоже имеют ряд преимуществ и недостатков. К первым относится: простота создания сайта. Вам не нужен целый огромный коллектив разработчиков, чтобы создать сайт, а на сам процесс создания уходит гораздо меньше времени ( от нескольких часов - до пары недель) , чем для создания сайта “ с нуля”. Да, есть и недостатки: арсенал многих конструкторов имеет свои ограничения, а показатели SEO чуть ниже, чем для уникальных сайтов, - но, тем не менее, нельзя не отметить и очень весомых плюсов: основной инструментарий большинства конструкторов позволяет в весьма сжатые сроки создать хорошие , качественные продающие и информационные сайты. А бюджет, затрачиваемый на создание таких “ конструкторных” сайтов весьма скромен - по сравнению с оплатой труда целой команды специалистов. Итог: создание сайтов на конструкторе - это быстрый , простой и экономически выгодный способ для достижения Вашей мечты!
Теперь разберем, что же такое Tильда?

Tilda СС ( далее - Тильда) - это конструктор сайтов, сильно выигрывающий среди аналогов в простоте использования и бюджетности. Поддержание аккаунта с первым рабочим проектом обойдется Вам в скромную сумму 750 рублей в месяц, а в одном проекте можно хранить до 500 страниц с материалами для заказчиков. Так же, есть бесплатный период использования Тильды. Но составляет 15 дней. За это время, Вы можете освоить основные моменты работы с конструктором, изучить инструментарий, часть которого закрывается для пользователя в случае дальнейшей работы с Tильде в бесплатном режиме после окончания промо - периода.

Теперь поговорим о сложностях работы с Tильдой. Если Вы - совсем новичок и не являетесь веб - дизайнером, то я советую сначала изучить основы работы в Figma, так как Тильда часто используется в паре с данной онлайновой программой. Принцип работы заключается в следующем: так как Тильда является именно конструктором, то ее арсенал , как и арсенал любого другого конструктора, имеет свои ограничения по инструментарию ( в бесплатной версии - еще большие, чем после оплаты) и возможностям отрисовки дизайн - макета по сравнению с полноценными программами - мамонтами , заточенными именно под саму отрисовку дизайна, - типа тех, что разработаны компанией Adobe ( Photoshop, Illustrator, XD, InDesign, PremierPro и другие), той же Figma или ее аналогом Sketch и другими. Поэтому, базовое, с чего нужно начать - это научиться отрисовке элементов дизайн - макета ( блоки сайта, их структура и различные графические элементы - иконки, логотип, авторские иллюстрации, векторные и растровые декоративные элементы и т.д.) именно в одной из данных программ.
Один из главных принципов работы с конструктором заключается в переносе по частям заранее отрисованного на Фигме и правильно подготовленного к переносу макета. И тут нужно понимать, что поскольку Тильда - хоть и очень неплохой, но все же - лишь конструктор, то отрисовать в ней получится только базовые графические элементы ( квадрат , прямоугольник, линию), а остальные элементы задуманного Вами дизайна придется сначала сохранять в Фигме формате PNG и потом - вставлять на Тильде в качестве изображений ( воспользовавшись инструментом Изображение). Поэтому, я рекомендую сразу при отрисовке в Фигме продумать дизайн таким образом, чтобы графические элементы не были слишком большими ( помните про то, что в Тильду их нужно переносить в растровом формате PNG, -а это значит, что при сильном увеличении они будут распадаться на пиксели и , в целом, выглядеть менее четко, нежели вектора формата SVG, их границы будут нечеткими, и наметанный глаз пользователя может это заметить, что может сказаться на доходе от сайта).

Еще один совет: поскольку готовый сайт в Тильде Вам позже придется адаптировать под разные разрешения, - переносите элементы, сохраняя их в Фигме по отдельности, - не группируя фоновые изображения в одно. Иначе при адаптации придется переделывать заново фоны из - за невозможности перемещать части сложного фонового изображения, чтобы разместить элементы по - другому на более узком разрешении (например, в случае его коллажирования). И еще одна сложность: если Вы решите добавить , удалить или заменить какой - либо элемент при адаптации ( например, скопировать часть сложного коллажированного изображения), то данная копия автоматически добавится, удалится или заменится со всех разрешений проекта. Лишние элементы на адаптивах просто выносятся за поля монтажной области, где и остаются в “невидимости” для пользователя. Именно поэтому рекомендую еще при работе в Фигма тщательно продумывать всю структуру и детализацию проекта, а так же его вид на различных разрешениях. В фигме можно легко создать монтажную область под любое современное разрешение экрана устройства и отрисовать на нем макет, заранее продумав группировку элементов при адаптации Вашего сайта.

ВЕКТОРНАЯ КНОПКА

Следующий важный момент при работе на Тильде: если Вы - не программист , не верстальщик и ничего не смыслите в стилях верстки и JavaScript, - то делайте незамысловатый , простой но стильный дизайн, тем более что тренд на аскетичность пока никто не отменял :) Этот совет связан с тем, что в Тильде многие по - настоящему крутые эффекты можно сделать только через специальные скрипты, которые привязываются через Вставку HTML - кода внутри блока, - если Вы хотите применить данный скрипт лишь к элементам, находящимся внутри одного какого - либо блока, либо через отдельный блок - в том случае, если Вы хотите применить эффект ( например, один и тот же анимированный градиент и тень на кнопках) ко всем подобным элементам на сайте. Можно, конечно, вставить те же раскрашенные градиентом кнопки картинкой. Но, в таком случае, Вы получите “ мутную” пиксельную кнопку со статичным эффектом градиента, а не динамичным, как это можно выполнить, например, через данный скрипт:

<style>

/*Эффект для кнопки*/

[href='#aboutme'] {

background-image: linear-gradient(45deg,#4B84F2 60%,#2657B5 100%);

box-shadow: 0 16px 32px 0 rgba(255, 141, 0, 0.35);

background-position: 100% 0 !important;

background-size: 200% 200%;

transition: all 0.5s ease-in-out !important;

}>

/*Эффект для кнопки*/

[href='#aboutme']:hover {

box-shadow: 0 0 0 0 rgba(0,40,120,0);

background-position: 0 0 !important;

}

</style>

Следующая сложность может возникнуть при работе с текстом.Если Вы уже умеете пользоваться Фотошопом, Фигмой, КорелДро, Иллюстратором и другими программами пакета Аdobe, -то знаете, что шрифты в них загружаются довольно просто: достаточно скачать нужный шрифт в формате ttf, установить его на компьютер и просто перезапустить нужную программу, чтобы в ней появился данный шрифт. В Тильде это делается несколько иначе. Первый способ - загрузить шрифты, выбрав их из предлагаемых. Для этого: зайдите в проект, нажмите Еще в правом верхнем углу и выберите пункт Шрифты и Цвета, после чего перейдите в Расширенные Настройки. Здесь Вы можете выбрать шрифт из предоставляемых бесплатно на Adobe Fonts, либо установить один из платных шрифтов , выбрав его на Google Fonts. Если же Вы не нашли нужный шрифт, то его можно скачать с любого другого сервиса в интернете. Но, - здесь есть одна важная особенность. Во - первых, скачивать шрифт нужно только в формате WOW, поддерживаемом для онлайновых проектов. Скачав архив, разархивируйте файл и выньте оттуда в отдельную папку нужные начертания. При выборе шрифтов нужно обязательно учитывать еще одну важную особенность Тильды: стандартно в один проект допускается загрузка лишь одной пары шрифтов, либо начертаний ( толщины буков). Это связанно с тем, чтобы облегчить загрузку проекта и увеличить ее скорость. Далее, зайдите в проект, нажмите Еще в правом верхнем углу и выберите пункт Шрифты и Цвета, после чего перейдите в Расширенные Настройки и выберите пункт Your Own Font ( Ваш личный шрифт) и в появившемся сверху окне выберите Загрузить файлы шрифта, после чего выберите нужные начертания из папки, в коорую Вы их предварительно сохранили, и загрузите свои шрифты.

Еще один вопрос, который может возникнуть у новичка, - это как добавить обводку шрифту. Здесь, как и в случае с кнопками, можно посоветовать два способа решения вопроса.
Первый, -более легкий, но менее точный, -это скопировать нужный текстовый блок или его часть ( в случае, когда требует обводки лишь отдельная фраза из всего текста) и - поменяв цвет копии и немного увеличив ее размер, просто подложить ее под основную фразу так, чтобы создался эффект обводки. Но, -тут, как и в случае с градиентом, будут видны мелкие неточности - несоответствие линии контура “обводки” основному шрифту из - за невозможности точно подогнать буквы по размерам.
Так же, есть и второй, более сложный , - но более точный способ: через скрипт, прицепляемый снаружи блока, через отдельный блок - если Вы хотите применить скрипт на все текстовые блоки на сайте. Но, тут есть один момент: данный скрипт не применим к отдельным фразам, - так что, в целях экономии времени, я рекомендую заранее продумать, какого эффекта Вы желаете достичь, - и выбрать нужный способ его реализации.
Для сравнения, попробуйте реализовать оба способа. Вот нужный скрипт на обводку:

<style type="text/css">

.tn-atom

{

-webkit-text-stroke:

0.04rem

#000000;

}

</style>

Еще один вопрос, который может возникнуть у новичка, - это как добавить обводку шрифту. Здесь, как и в случае с кнопками, можно посоветовать два способа решения вопроса.
Первый, -более легкий, но менее точный, -это скопировать нужный текстовый блок или его часть ( в случае, когда требует обводки лишь отдельная фраза из всего текста) и - поменяв цвет копии и немного увеличив ее размер, просто подложить ее под основную фразу так, чтобы создался эффект обводки. Но, -тут, как и в случае с градиентом, будут видны мелкие неточности - несоответствие линии контура “обводки” основному шрифту из - за невозможности точно подогнать буквы по размерам.
Так же, есть и второй, более сложный , - но более точный способ: через скрипт, прицепляемый снаружи блока, через отдельный блок - если Вы хотите применить скрипт на все текстовые блоки на сайте. Но, тут есть один момент: данный скрипт не применим к отдельным фразам, - так что, в целях экономии времени, я рекомендую заранее продумать, какого эффекта Вы желаете достичь, - и выбрать нужный способ его реализации.
Для сравнения, попробуйте реализовать оба способа. Вот нужный скрипт на обводку:

<style type="text/css">

.tn-atom

{

-webkit-text-stroke:

0.04rem

#000000;

}

</style>

И, - напоследок, - еще один совет при работе с Тильдой - сохраняйтесь чаще ( ctrl+S) , так как иногда Тильда, - как и , например, Фотошоп, - дает различные небольшие сбои, вплоть до “ подвисания” Вашего проекта на стадии редактирования, -когда приходится перезагружать сайт, чтобы восстановить работу. Поэтому, в случае работы на ней, - как и на Фигме, - желателен хороший высокоскоростной интернет.

На сегодня это - все. Надеюсь, данная статья оказалась полезной для Вас, а я постараюсь ее постепенно дополнять.

Для начала, разберем вопрос - что такое Tильда, какие у нее преимущества и недостатки. А чтобы грамотно подойти к данному вопросу, - сначала поговорим о способах создания сайта.