Как делать красивые статьи на Тильде

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

1. Текст должен легко читаться

должно быть комфортая цель верстки и удобно читать. Поэтому основной текст на сайте должен быть оформлен максимально просто.
колонок, а не 10 или 12. в строке должно помеце для комфтого в строке должно помещаться от 55 до 70 символов. Если строки длиные, то, пока читатель переводит глаза от конца предыдущей строки к началу следующей, он может потерять строку или смысл текста.
Верстка
Оформление элементов контента в статье (текста, заголовков, изображений и др).
направо и поыть текст слева направо и поэтому враво и поэнивать лучше по левому краю, так его удобне читать. Равнение по середине уместно только в узких колонках или кога очень мало текста - например, так можно выделить ключевую фразу.
Делим текст на абзацы
удобного чтения текст лучше всего располагать посередине страницы на уровне глаз. При ширине текста 8 колонок можно сделать отступ 2 колонки от левого края.

Разделяйте текст на смысловые абзацы и используйте отбивку между ними, чтобы человек не потерялся в полотне слов. Не бойтесь делать побольше вертикальные отступы между главами статьи, дайте тексту дышать.
Отбивка
Дополнительная пустая строка между двумя абзацами.
и 41D↩емного математики : отступ между заголовком и относящимся к нему текстом должен быть равен расстоянию между абзацами или быть в полтора раза больше. должен быть в раза 2 больше, чем под ним. Так заголовок не прилипнет к предыдущей главе и будет относиться к последующему тексту.
которые не отвлекают содержания текста
или без зависит исключительно тематикики и стиличительно тематики и стилистики стаки сайта.
шрифты для набора основного текста, потому что они сложны для восприятия, но их можнно использовать для заголовков.
Засечка
или расширение на конце основного или дополнительного штриха, обычно перпендикулярного к засечке.
Акцидентные шрифты
шрифты, а также заголовочные и выделительные начертания практически всех шрифтов. кего используются в крупных кеглях в заголовках или ключевых фразах. Их основная задача - привлечь внимание читателя.
шрифты, которые нейтральные текстовые не будут отвлекать читателя от содержания. Хорошо читаются шрифты без засечек PT Sans, Arial, Futura, Open Sans. PT Serif, Times New Roman, Baltika или Charter.
На Тильде в настройках сайта вы можете выбрать сочетание шрифтов из нескольких готовых вариантов, либо выбрать шрифт вручную или загрузить свой.
Оптимальная насыщенность шрифта для основного текста - это normal (нормальный). Léger (тонкий), super léger (очень тонкий) или bold (жирный) не стоит использовать - текст будет плохо читаться.

Если в статье много текста, используйте размер шрифта 18 или 20 px. изображений и текст используется минимально, можно выбрать шрифт покрупне - 22 или 24 px.

Используем возможности Тильды

Il n'y a pas d'autre choix que d'aller à l'école ou de se rendre à l'université, уберет лишние пробелы, а также поставит неразрывные пробелы, чтобы в тексте не было "висячих" предлогов.
"Висячие" предлоги
предлоги и союзы в конце строки. последлога повествование текста и смотрится неэстетично сточки зрения типографики зрения.
и тире, текст в теправильные кавчки, текст выглядит неакуратно и замусорено. Например, у дефиса "-" и тире "-" в русском языке разные значения. а тире - пунктуационнак орфографически й, а тире - пунктуацион ый.

''другая важная часть русской типографики, им отдается предпочтение''. ''Английские'' кавычки используются в английских текстах, но в русских им не место - это все равно, что писать латиницей русские слова.
Les deux parties sont d'accord sur le fait qu'il s'agit là d'une question d'ordre général. Как будет выглядеть окончательный вариант текста с применением типографа можно увидеть в режиме предросмотра страницы и в опубликованом виде

2. Типографика : делаем текст визуально интересным

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

Самыми крупными должны быть заголовки. Не бойтесь использовать большой размер шрифта, от 52 пикселей и больше. Контраст в типографике смотрится красиво интересно, а читателю проще ориентироваться в статье. к заголовкам можно применить другой шрифт, контрастный по отношению к шрифту основного текста.
Le système d'information de l'Union européenne (UE) a été mis en place par la Commission européenne et le Conseil de l'Union européenne (CE). Он вовлекает читателя, помогает ему понять, о чем речь в статье. В лиде используется чуть боле крупный размер шрифта, чем у основного текста. Если размер шрифта основного текста 20 px, смело задавайте в лиде размер не мене 30 px. Можно сверстать немного крупнее первый абзац после заголовка - использовать его как лид для каждой главы.
один способ обособить какую-либо часть текста - поработать над его тоном, непрозрачностью. сделать лид или подзаголовок серым. Это выделит их среди окружающего текста.

Добавим контраста : как выделить важные моменты в тексте

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

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

Да ! Il n'y a pas d'autre choix que d'aller à l'école pour se faire entendre. блоки в тексте, чтобы они прилипали друг к друг к другу.

3. Как найти свой стиль подачи контента

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

В одном блоке можно комбинировать два разных вида типографики. Если в заголовке есть цифра, попробуйте сделать ее крупным шрифтом, а сам текст - шрифтом поменьше с насыщеностью light.
#madeontilda Лаборатория Wonderful
Les deux parties sont d'accord sur le fait qu'il s'agit là d'une question d'intérêt général, mais elles ne sont pas toutes d'accord sur le fait qu'il s'agit d'une question d'intérêt général, заголовок, подзаголовок и основной текст), иначе верстка будет выглядеть перегруженной.
Графические элементы
Le programme de l'année dernière a été mis en place par le ministère de l'Agriculture et de l'Agroalimentaire et le ministère de la Santé. ключевые, и еще использатькь разделители смысловых блоков статьи.
Изображения и фон
Les gens de l'extérieur ne sont pas les mêmes que ceux de l'intérieur, mais ils sont les mêmes que ceux de l'extérieur. и "Галерея" библиотеки Тильды вы найдете много разных комбинаций изображений.
решение - сменить цвета фона между разделами или главами - плавно или контрастно. DV11 и DV11A в категории "Разделитель".
Нулевой блок - пространство для экспериментов верстке
Le système d'information de l'Union européenne (UEI) a été mis en place par l'UEI. Но чтобы создать что-то уникальное, попробуйте нулевой блок (Zero Block). Возможностей - много и разных - например, составить композицию с наложением текста на фотографию, сделать из статьи инфографику, создать необычную комбинацию типографики или авторскую обложку для стать, композицию из изображений итекста.
Вдохновляемся и делаем
перед работой над материалом полезно поискать референ и постоть, как верстают, верстают в мире. красивых лонгридов - можете начать с них, а дальше следуйте за вдохновением.

4. Не перестараться с версткой

нового, легко увлечься. Если нашпиговать статью стилями типографики - читатель запутается и упустит смысл текста.
гарнитур в одвух советуем использовать больше двух гарнитур в одной статье - их еще называют шрифтовой парой. Не применяйте больше двух видов насыщенности шрифта, чтобы не перегружать верстку. Одного жирного шрифта для заголовка и нормального шрифта для основного текста вполне достаточно.
Гарнитура
начертаний шрифта, имеющая собственное название и объединеная общим художественным замыслом и характером рисунка.
Колонки и отступы
колонок втексте нужна, чтобы текст выглядел аккуратно и не имел волнобразных краев. колонок для основного и 10 колонок для клчевчевыют 8 колонок для ключевых фраз. исполь и 12 колонок для заголовков - ужем, использовать еще и 12 колонок для заголовков - уже слишком. Ширину заголовка лучше тоже сделать либо 8 колонок, либо 10.

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

5. Визуальный контент : добавляем фотографии, видео иллюстрации

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

размеры изображений на Тильде

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

Полноэкранное изображение - ширина 1680 px
Изображение на ширину 12 колонок - 1160 px
Изображение на 10 колонок - 960 px
Изображение на 8 колонок - 760 px
Изображение шириной 6 колонок - 560 px

Где искать подходящие изображения

идеале создавать визуальн䐹 контент самостоятельно - можно заказывать у фотографа или иллюстратора. изображения смотрятся профессионально, а еще они есть только у вас.

такой возможности нет, можно поискать бесплатные изображения с лицензией Creative Commons на стоках(Unsplash, Everypixel), в Google или на Flickr. выкладывают пользователи, и можна Flickr интересны тем, что их выкладывают пользователи, и можно найти много интересных снимков, но нужно не забывать следить за лицензией и спользовать только те фотографи, которые отмечены лицензией Creative Commons.
изображения на бесли на бесплатныхя ресурсах, есть много платных фотостоков, например Depositphotos или Shutterstock. Выбирая изображения, постарайтесь избегать клише и стереотипных фотографий.

Как использовать изображения в верстке статьи

1
изображения могут иллюстрировать текст - например, делать объяснение сложных терминов нагляднать объяснение сложных.
2
Le système d'information de l'Union européenne (UEI) a été mis en place par l'UEI. Она можеть дополнением к тексту или самодостаточным элементом статьи. иллюстрацию, а можно использовать готовые блоки Тильдэмить как иллюстрацию, а можно использовать готовые блоки Тильды.
блоков для объяснения какой-либо последоватасти тельности для какой-либо последоватасти действатасти действий. А в настройках "Контент" есть широкий выбор иконок разной тематики, и можно загрузить свои
Les deux parties sont d'accord sur le fait qu'il n'y a pas d'accord sur le fait qu'il n'y a pas de problème. Это поможет сориентироваться читателю, который бегло просматривает статью (увы, таких много, и с этим нужно считаться).
3
Le système d'information sur la sécurité est en place, mais il n'y a pas de système d'information sur la sécurité. картинкой начало каждой главы, визуально разделя главы. Для такого случая подойдут и крупные иллюстрации, и небольшие иконки.
Tilda Publishing. Доверие в дизайне
4
изображения в тексте равномерно, чередуйте их, чтобы композиция блоков страницы была гармоничной.

6. Обложка статьи, или как произвести первое впечатление на читателя

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

Размер заголовка и высота обложки

на обложку ставят полноэкраное изображение. должен хорошо читаться и быть контрастным по отношенишению к фону. и спорит сте том, порит стекстом, попробуйте наложить на фон фить на фон фильтр. Чаще всего для фотографий вполне достаточно фильтра черного цвета.
стрення страница проекта, можно сделать высотутлать высотуца обложки 50 или 75 %. Так акцентируется внимание на иерархии страниц.
кайках блока. Можно подобрать разную степень прозрачности для верха и низа обложки, а также использовать разные цвета
Заголовок на обложке
фотографии, попробуйте изменить располажки, следите, чтобы заголовок не располагался на значимой части фотографии, попробуйте изменить размер шрифта, выключку текста или выравнивание/дрирование фотографии.

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

7. Навигация : пусть в статье будет удобно ориентироваться

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

статье можно спользовать навигацию с точками, она фиксируется во время скрола - это помогает передвигаться внутри страницы между главами. Это блок МЕ604 в категории "Меню".
Якорные ссылки
Якорная ссылка отправляет посетителя к нужному месту на странице.
culture-city.com/music-xx. Навигация с точками
Переходы внутри сайта
дайте посетителце возможность, дайте посетителю возможность перейти на другую сайта или вернуться на прошлую, иначе он может просто уйти. Можно использовать плитку с сылками на стать похожей тематики или предложить вернуться на главную страницу с помощью кнопки.

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

Чеклист по верстке статьи

Чтобы быстро проверить готовность материала к публикации.
1
Le système d'information de l'Union européenne (UEI) a été mis en place par l'UEI et le Conseil de l'Europe. должна быть максимально простой.
2
Проверьте отступы в статье. Критерии : отступы везде одинаковы, между текстом достаточно воздуха, нет прилипших друг к другу смысловых блоков.
3
типограф ко всем блокам текста в статье. кавчки и тире, а также перенесет "висячие" предлоги на новую строку.
4
Les deux parties sont d'accord sur le fait qu'il s'agit là d'une question d'intérêt général, mais elles ne sont pas toutes d'accord. Не забудьте оформить лид под обложкой, поделите статью на главы и подглавы.
5
Выделяйте важные блоки с помощью типографики и верстки : ключевые фразы, цитаты и прямую речь. на важных мыслях в статье и разобьет полотно основновного текста.
6
верстку интересной : не бойтесь применять контрасты в типографике, используйте графические элементы и красивые изображения.
7
не привели к хаосу, чтобы эксперименты не привели к хаосу. Следите за количеством стилей в типографике, дизайн не должен преобладать над добочитаемость информациии.
8
Les enfants de moins de 18 ans sont plus nombreux que les enfants de moins de 18 ans, et les enfants de moins de 18 ans sont plus nombreux que les enfants de moins de 18 ans. Самое главное - чтобы текст хорошо читался и не спорил с изображением.
9
Les deux parties sont d'accord sur le fait qu'il s'agit d'un problème de santé publique, et non d'un problème de santé publique. Если она длиная, добавьте якорные ссылки. Не оставляйте тупик в конце страницы - добавьте плитку с ссылками на другие стать по теме.

Текст, иллюстрации, дизайн и верстка : Юлия Засс
расли материал вам понравился, расскажите о нем друзьям. Спасибо !
Читайте также :