Как изменить цвет ссылок?
Чтобы изменить цвет ссылок для всего сайта, перейдите в Настройки сайта → вкладка Шрифты и цвета → добавьте нужный цвет в поле Link color.
Изменить цвет отдельно взятой ссылки можно в окне её добавления: Похожие вопросы
- Как добавить фавикон (favicon, иконку в браузере)?
- Как сделать «шапку» (header, хедер) сайта?
- Как добавить HTML-код в Head сайта?
- Как создать сайт на нескольких языках?
- Как скопировать страницу?
Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
Первый способ
Первый и самый простой — элемент , который размещается прямо в HTML-коде. Это эффективный способ загрузить любую картинку — браузеры заранее знают по HTML-коду, что она есть и начинают её подгружать.
Минус в том, что в таком SVG не будут работать скрипты и любые попытки взаимодействия с элементами внутри обречены. Файл будет как за стеклом: смотреть можно, а трогать нельзя. Хотя внутри всё остальное прекрасно работает, включая CSS-анимации.
Такой способ лучше всего подходит контентным изображениям, которым не нужно взаимодействие: логотипы, графики, схемы.
Второй способ
Второй способ — фоновая картинка в CSS. Причём неважно, зададите вы его элементу, псевдоэлементу или контентом вставите — результат будет таким же, как с : за стеклом, но внутри что-то работает.
.picture
Этот способ подходит для оформительской графики, которой не нужно взаимодействие: фоны, иконки и другая мелочь.
Третий способ
Третий способ — вставить содержимое SVG-файлов прямо на страницу, как любые другие теги. При таком способе подключения можно управлять стилями SVG через CSS.
С таким SVG можно делать то же, что и с обычными HTML-элементами: стили, скрипты. Можно, например, менять цвет заливки при наведении или даже анимировать векторное изображение.
.navigation-icon
width — ширина в пикселях или процентах.
height — высота в пикселях или процентах.
viewBox — положение и размер области просмотра.
Значение fill отвечает за цвет изображения.
SVG гораздо больше, чем просто формат графики — это мы с вами уже поняли. Если хотите закопаться глубже, почитайте SVG — учебное руководство от MDN Web Docs.
В итоге: способов множество и все чем-то хороши. Выбирайте подходящий под ваши задачи.
Материалы по теме
- Как проектировать, создавать и анимировать SVG
- Как сделать интерактивную SVG-диаграмму
- Форматы изображений для веба
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Что такое Lazy Loading и как её включить на сайте
Ленивая загрузка (буквально, lazy loading)— это возможнось отложить загрузку ненужного прямо сейчас медиаконтента.
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
- 22 ноября 2023
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML
Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
- 14 сентября 2023
В чём отличия цитат blockquote, cite и q
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
- 12 сентября 2023
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Выравниваем контент в стандартных блоках в Тильде по ширине на мобильных (код, CSS)
Как изменить ширину и отступ стандартного блока на мобильных устройствах на сайте, созданном на Тильде? Как создать и куда вставить код?
Проблема: Если Вы используете на сайте стандартные блоки и ZERO, верстаете в grid, можете столкнуться с тем, на мобильных устройствах ширина контента в стандартных блоках сильно отличается от ширины в zero-блоках.
Например, Вы сверстали блок с текстом, задали ему ширину на мобильных устройствах 300px. Следующий блок Вы добавили стандартный, например, TX01. На мобильных TX01 будет иметь другую ширину и другой отступ, что выглядит неаккуратно.
Код
Для того, чтобы это исправить, нужно добавить блок T123 и код. Для данного примера (стандартный блок TX01) подходит следующий код:
Как мы получили этот код?
Заходим в браузер Firefox Developer Edition — Mozilla.
Рядом с поисковой строкой нажимаем на иконку Гаечный ключ, выбираем Адаптивный дизайн и нужное устройство, например, Iphone 11 pro. Перед нами открывается вид сайта на соответствующем устройстве.
Кликаем по контенту правой кнопкой мыши. Выбираем пункт Исследовать. Затем кликаем на иконку Выбрать элемент со страницы (скриншот).
Тыкаем на интересующий элемент: в нашем случае, на текстовый блок. Слева мы видим код и класс элемента. В средней колонке, в данном случае, видим стили элемента – цвет, шрифт, размер, насыщенность и прочее. И справа мы видим разметку блока. В данном случае, нам нужно задать для элемента с классом .t-text на устройствах @media screen and (max-width: 480px) , то есть на мобильных, такие же параметры, как и для нашего ZERO-блока:
width: 300px
padding-left: 20px
То есть мы меняем ширину и внутренний отступ. Вы можете задать эти параметры в разметке и увидите, что расположение и ширина контента изменились. Если это не сработало, то попробуется воздействовать на другой селектор (выберите другой элемент).
Теперь нам нужно из полученных данных создать рабочий код.
Мы понимаем, что нужно задать в коде брейкпоинт, то есть максимальную ширину экрана устройства, для которого мы хотим применить стиль.
В нашем случае это:
@media screen and (max-width: 480px). Пишем.
После этого ставим символ
Затем пишем класс элемента, для которого будем применять стиль. В нашем случае, это .t-text (перед названием класса ставим всегда точку). Затем снова символ
И затем сами параметры:
width: 300px !important;
padding-left: 20px !important;
( !important повышает приоритет нашего пользовательского стиля).
Затем закрываем параметры также двумя фигурными скобками:
Теперь осталось заключить код в теги:
Таким образом, Вы можете кастомизировать любые элементы на сайте на Тильде – менять отступы, цвета, радиусы скругления, добавлять тени и многое другое, что касается стилей элементов. Размеры, ширину, высоту блоков можно задавать также в %, hv, vw (при «резиновой» верстке).
Как добавить код на сайт на Тильде?
- Добавить блок T123 на страницу, на которой требуется внести изменения и вставить в него код в вышеуказанном формате (код должен начинаться с тега
);
- Добавить код (таким же способом, как и в пункте 1) в футер или в хэдер, чтобы воздействовать на стиль элементов с таким же классом на всех страницах, где есть футер/хэдер;
- Добавить код в Настройки сайта – Еще – Пользовательские CSS-стили. В этом случае теги
в начале и в конце кода не потребуются.
Функция «Потоки» в Тильде
Потоки в Тильде появились относительно недавно. Их функционал, чем-то похож на «Товары» для интернет-магазинов в Tilda.
Потоки можно отлично использовать не только для информационных сайтов, но и для коммерческих, а также сайтов услуг. Они расширяют функционал платформы
С помощью Потоков, можно существенно увеличить кол-во страниц вашего сайта. Например, ограничения Тильды в 500 страниц, с Потоками, пропадает
В своем блоге, я использую их немного не стандартно. Об этом я говорю в своем видео, которое вы найдете в конце этой статьи.
Преимущества использования Потоков на сайте, созданных на Тильде
- Можно без ограничений, создавать страницы в рамках функций Потока. В одном потоке можно создавать 5000 постов. А потоков можно создавать неограниченное кол-во
- Не нужно переопубликовывать страницу. Написал пост и всё, он уже на сайте. Главное, чтобы в настройках не стоял «Черновик»
- Легкость верстки. Если вы хотите быстро опубликовать пост, то это идеальный вариант
- Отложенная публикация. Как посты в ВК. Можно создать пост, а опубликовать его в любое время позже. Как это сделать, будет ниже
- RSS-лента. Создание турбо-страниц для Яндекса и AMP для Гугл. Очень легкие страницы, которые моментально открываются на сайте. Далее расскажу, как их добавить в Яндексе
Несколько способов использования Потоков (постов) на платформе Tilda
- Стандартный. Когда мы используем функционал для статей, которые будут открываться по сгенерированной Тильдой ссылке.
- Нестандартный. Мы используем Посты для настройки навигации метками на сайте
- Гибридный. Совмещаем оба способа
Как создать Поток
Если у вас в Личном кабинете Тильды, нет этой функции (она находится рядом с Товарами, над кнопкой «Настройки сайта» вверху правее), то заходите в ЛК Тильды настройки сайта, Далее спускаемся в «Еще» и в самом низу будет подраздел «Подключаемые модули». Вот там включаются (или если они вам не нужны, удаляются) Потоки и Товары.
Далее заходите в раздел сайта, нажимаете Потоки, которые теперь уже точно, находятся вверху правее, где я писал ранее 😉
Тильда вам сразу же предложит ввести название первого потока.
Внутри каждого потока есть разделы (они же метки)
Переходим в настройки сайта, Еще
Идём в самый низ
Теперь появился раздел Потоки в ЛК
Пишем название потока
Создание постов
- Когда вы перейдете в Поток, появится кнопка создания нового поста: «Добавить пост», нажимайте на неё.
- Пишите название поста. Далее откроются настройки поста.
- Добавьте краткое описание, оно будет выводиться под заголовком, как превью статьи. Не более 250 символов, иначе платформа не даст сохранить пост.
- Изображение или видео. Оно будет отображаться в посте на странице со списком.
- Далее можете изменить дату поста.
- Список разделов. В каком разделе будет ваш пост. Этот же функционал списка разделов (меток), я использую в своем блоге.
- В видимости выбираете, будет опубликован пост сразу или же будет черновиком.
- Ссылка на страницу с постом. Подробнее об этой настройке ниже вот здесь. Если хотите использовать стандартный функционал, то ничего не пишите сюда.
- В настройках раздела Дополнительно, мы можем указать сайт автора, его логотип, имя, отключить комменты к посту и закрепить сообщение вверху (по типу, как на стене в ВК)
- В разделе Соц сети и SEO, можете дополнительно указать заголовок и описание для Facebook, загрузить для него отдельное изображение. А также полезные настройки для поисковых роботов.
- В разделе «текст», мы пишем сам контент. Туда же можем вставлять картинки, видео, немного форматировать текст, указывать тип заголовка для СЕО — H2-H4. Мне это напоминает создание статьи в ВК.
Как сделать отложенную публикацию?
Всё просто, в настройках поста, в дате просто выберите число и время, когда пост должен быть опубликован на сайте.
Название поста
Настройки в постах. Часть 1
Настройки в постах. Часть 2
Текст поста и его форматирование
Добавление постов на страницу сайта
- Выбираем на странице сайта место куда хотим их внедрить
- Нажимаем Добавить блок
- Выбираем в разделе «Новости и потоки», любой блок
- Идем в «Контент» блока и выбираем Выводить. Выбираем наш поток. Соотвественно, на одном блоке новостей, можно вывести только один поток. Поэтому заранее продумывайте структуру потоков, разделов, чтобы можно было это легко реализовать на сайте
- В разделе Дополнительно, можем ввести название Блока, его описание, добавить кнопку на раздел со всеми новостями, кнопку «Загрузить еще» и тд.
- Рекомендательные кнопки. Это для шэринга в соц сетях вашего поста
- Мы можем изменять кол-во блоков в ряду от 1 до 4-х,
- Добавить кнопку «Загрузить еще»,
- Сделать обратным порядок постов,
- Фильтровать по дате,
- Изменять расположение карточек на мобильных устройствах,
- Изменять цвет, расположение разделов
Из особенно интересного, это выводить блок «Смотрите также», где можно в настройках выбрать из какого раздела показывать, а самое главное, можно поставить случайный принцип подбора карточек для этого блока. Чего очень не хватает в Товарах.
Выбираем место на странице, куда внедряем
Выбираем блок с новостями
Выбираем какой блок будет выводиться
Отображать случайные карточки
Нестандартный способ использования Потоков
О нем я подробно говорю в видео.
Принцип использования такой. Если бы мы хотели создать табы (вкладки) на сайте, через стандартный блок ME602 Вкладки с цветом фона или ME603 Вкладки с обводкой. Только там ограничения в 8 вкладок, а здесь ограничений нет. Бонусом, разработчики, во главе с Никитой Обуховым, дали много настроек для постов, в отличие от стандартных блоков ME602 и ME603 и свой URL-адрес для каждой метки, хотя физически это одна страница.
Я думаю принцип понятен. Если нет, то переходите на страницу моего блога вот здесь и смотрите блок «Статьи блога по рубрикам»
Пример работы меток
Физически страница одна, а адреса разные
Пример реализации через табы, стандартный блок ME603
Как это реализовать
На этапе, когда мы создавали свой первый поток, создали пост, а далее…
Мы в каждом посте, заполняем только информацию, которая содержится в левой части настроек.
Заполняем: Заголовок, Описание, если нужно вставляем картинку или видео, выбираем раздел.
— Помните, я говорил, что раздел «Ссылка на страницу с постом», я опишу ниже. Вот это именно этот момент настал
В разделе «Ссылка на страницу с постом», вставляем (или выбираем) ссылку с предварительно созданной в Тильде страницей. И дизайн у неё может быть любой. Блок «Текст» в настройках поста, нам теперь заполнять не нужно!
То есть, мы используем функционал «Потоков» для создания удобной навигации с помощью меток. А оформление делаем в стандартных или Zero блоках в Tilda. И ставим ссылку на неё тут. Всё.