Табличный ад 😈
Многие рано или поздно прибегали к стандартному инструменту разработки таблиц от Геткурса. Но не многие знают, как делать сложные таблицы. Например, совмещать несколько ячеек в одну, или же несколько строк в одну ячейку.
И действительно, табличная вёрстка вызывает дичайшую боль даже у бывалых верстальщиков и front-end разработчиков :)
Я поделюсь неочевидными атрибутами для табличных ячеек, с помощью которых можно совмещать ячейки в ряду или же в несколько строк.
(Все примеры смотрите на скриншотах)
#полезная_фишка
Многие рано или поздно прибегали к стандартному инструменту разработки таблиц от Геткурса. Но не многие знают, как делать сложные таблицы. Например, совмещать несколько ячеек в одну, или же несколько строк в одну ячейку.
И действительно, табличная вёрстка вызывает дичайшую боль даже у бывалых верстальщиков и front-end разработчиков :)
Я поделюсь неочевидными атрибутами для табличных ячеек, с помощью которых можно совмещать ячейки в ряду или же в несколько строк.
(Все примеры смотрите на скриншотах)
colspan — проще говоря, этот атрибут "склеивает" ячейки в одном ряду. К примеру, если мы пропишем colspan="2", это будет означать, что эта ячейка добавит себе справа ещё одну такую же и будет занимать ширину в 2 ячейки.rowspan — аналогия colspan, только действует уже на нижнюю строку, добавляя себе вторую такую же, становясь с ней единым целым.#полезная_фишка
This media is not supported in your browser
VIEW IN TELEGRAM
Да, это Геткурс 😳😱
Заранее отвечаю на зреющий у вас вопрос 😁
И нет, это не простая модификация левой панели, а полностью разработанная с нуля для своего собственного проекта :)
Хотел, чтобы вы оценили масштаб разработки, а главное понимали, что на Геткурсе возможно всё!
В данный момент всё ещё работаю над конечной версией такой панели ;)
#наработки
Заранее отвечаю на зреющий у вас вопрос 😁
И нет, это не простая модификация левой панели, а полностью разработанная с нуля для своего собственного проекта :)
Хотел, чтобы вы оценили масштаб разработки, а главное понимали, что на Геткурсе возможно всё!
В данный момент всё ещё работаю над конечной версией такой панели ;)
#наработки
Свои страницы на Геткурсе вместо системных 🧐
Не секрет, что на Геткурсе можно кастомизировать если не абсолютно, то почти всё. И системные страницы не являются исключением.
Вы можете сильно преобразить исходную страницу, а можете поступить более хитрым способом: создать свою собственную.
Например, свою собственную страницу "Спасибо" после успешной оплаты заказа, отказавшись от старой. Для этого достаточно поставить блок с редиректом, где будет указан адрес вашей новой страницы.
И таким образом можно заменить хоть все системные страницы на свои. Для некоторых, правда, понадобятся знания работы с объектами данных, выводимыми Геткурсом на каждую страницу проекта :)
Кто-то подчеркнет из этого поста полезный лайфхак в виде редиректов и собственных решений по страницам, а кого-то натолкнёт на размышления о чём-то более глобальном 😉
#лайфхак
Не секрет, что на Геткурсе можно кастомизировать если не абсолютно, то почти всё. И системные страницы не являются исключением.
Вы можете сильно преобразить исходную страницу, а можете поступить более хитрым способом: создать свою собственную.
Например, свою собственную страницу "Спасибо" после успешной оплаты заказа, отказавшись от старой. Для этого достаточно поставить блок с редиректом, где будет указан адрес вашей новой страницы.
И таким образом можно заменить хоть все системные страницы на свои. Для некоторых, правда, понадобятся знания работы с объектами данных, выводимыми Геткурсом на каждую страницу проекта :)
Кто-то подчеркнет из этого поста полезный лайфхак в виде редиректов и собственных решений по страницам, а кого-то натолкнёт на размышления о чём-то более глобальном 😉
#лайфхак
Бросайте якорь! 😳
Практически все лендинги или страницы, как таковые, имеют якоря для удобной навигации по ним. И чаще всего, если блоки имеют бекграунд, появляется такая проблема с пустым местом (смотрите скриншот).
Встаёт вопрос, что делать в таком случае?
Есть пара вариантов решения. Но для начала хочу поделиться с вами классом якоря. Он имеет класс
#лайфхак
Практически все лендинги или страницы, как таковые, имеют якоря для удобной навигации по ним. И чаще всего, если блоки имеют бекграунд, появляется такая проблема с пустым местом (смотрите скриншот).
Встаёт вопрос, что делать в таком случае?
Есть пара вариантов решения. Но для начала хочу поделиться с вами классом якоря. Он имеет класс
lt-anchor. Первый вариант - мы можем уменьшить его высоту до 0px, ведь по умолчанию он имеет высоту в 1px. Второй вариант заключается в том, чтобы покрасить наш якорь в цвет блоков :) Для этого просто примените свойство background нужного цвета.#лайфхак
Больше блоков в виджете 👍
Насколько многие знают, виджеты полезны тем, что могут встраиваться в другие лендинги или страницы, сделанные на других ресурсах, и собирать нужные нам данные. Проблема виджетов на Геткурсе лишь одна — доступно всего 3 блока в конструкторе...
А что, если вы хотите поставить сторонний JS или же просто написать объяснительный текст?
Всё очень просто! Вы можете добавить любой блок в виджет путём обычного импорта/экспорта блоков из редактора страниц в Геткурсе. И наконец-то ваши виджеты приобретут вашу собственную индивидуальность :)
#лайфхак
Насколько многие знают, виджеты полезны тем, что могут встраиваться в другие лендинги или страницы, сделанные на других ресурсах, и собирать нужные нам данные. Проблема виджетов на Геткурсе лишь одна — доступно всего 3 блока в конструкторе...
А что, если вы хотите поставить сторонний JS или же просто написать объяснительный текст?
Всё очень просто! Вы можете добавить любой блок в виджет путём обычного импорта/экспорта блоков из редактора страниц в Геткурсе. И наконец-то ваши виджеты приобретут вашу собственную индивидуальность :)
#лайфхак
This media is not supported in your browser
VIEW IN TELEGRAM
Форматировать или редактировать❓
Многим знакома эта проблема, показанная в гифке... Вы уже застилизовали текст нужным вам образом и хотите поправить ошибку, как вдруг... всё форматирование слетает!
Чтобы такого не произошло, держите лайфхак — забудьте про кнопку Backspace и Del напрочь! Следует выделить участок текста, который вы хотите отредактировать, и просто начать дописывать нужные исправления :)
#лайфхак
Многим знакома эта проблема, показанная в гифке... Вы уже застилизовали текст нужным вам образом и хотите поправить ошибку, как вдруг... всё форматирование слетает!
Чтобы такого не произошло, держите лайфхак — забудьте про кнопку Backspace и Del напрочь! Следует выделить участок текста, который вы хотите отредактировать, и просто начать дописывать нужные исправления :)
#лайфхак
Интересная особенность 😳
Хочу поделиться с вами интересной особенностью, которую я заметил совершенно случайно. Когда я делал урок для Клуба Магии Геткурса, я ошибся в написании тега, и открыл для себя тег <j>, документации на который я не смог найти нигде в интернете.
Самое забавное, что Геткурс не воспринимает его как ошибку и не редактирует в коде как что-то постороннее. По умолчанию он находится в состоянии
Если вам кажется, что вам не хватает элементов, или же просто хочется поэкспериментировать, то ловите этот замечательный тег 😂
#полезная_фишка #тёмная_магия
Хочу поделиться с вами интересной особенностью, которую я заметил совершенно случайно. Когда я делал урок для Клуба Магии Геткурса, я ошибся в написании тега, и открыл для себя тег <j>, документации на который я не смог найти нигде в интернете.
Самое забавное, что Геткурс не воспринимает его как ошибку и не редактирует в коде как что-то постороннее. По умолчанию он находится в состоянии
inline как у всех строчных элементов, но в отличии от тега <i> не придаёт тексту никакого форматирования. Удивительно, что его ещё и можно стилизовать :)Если вам кажется, что вам не хватает элементов, или же просто хочется поэкспериментировать, то ловите этот замечательный тег 😂
#полезная_фишка #тёмная_магия
Поставить картинку в Геткурсе — задача не из лёгких 😅
Очень многие жалуются на то, что при вставке картинок в самый популярный блок с карточками она не встаёт как нужно и расплывается за границы отведенного ей пространства.
Всё дело в том, что у Геткурса по умолчанию на блоке с классом
Чтобы правильно разместить вашу картинку в блоке без урезки, в классе
#полезная_фишка
Очень многие жалуются на то, что при вставке картинок в самый популярный блок с карточками она не встаёт как нужно и расплывается за границы отведенного ей пространства.
Всё дело в том, что у Геткурса по умолчанию на блоке с классом
image стоит правило background-size: cover. И действительно, это правило помогает занимать всё доступное пространство картинкой, масштабируя её по отведенному месту. Но у Геткурса есть проблема с этим блоком, так как её основная оболочка содержит огромные внутренние отступы, из-за чего это свойство работает не правильно.Чтобы правильно разместить вашу картинку в блоке без урезки, в классе
image используйте background-size: contain вместо cover. Тогда ваша иконка или картинка полностью уместится в этот блок. И не забудьте, чтобы перебить правило Геткурса, вам понадобится директива !important к значению свойства.#полезная_фишка
Замылим всё! 😁
Многие после Недели Магии 5 открыли для себя чудесное свойство блюра изображений и блоков с помощью свойства
Этот пост будет не столько практическим, сколько информационным :)
Благодаря даже двум значениям этого свойства, можно построить удивительные механики на ваших проектах. К примеру, если на ваших уроках есть цветные картинки, то недоступные уроки можно обесцветить :) Или навести интригу: размыть блюром следующее название урока, и тогда пользователю будет ещё интереснее узнать, что же ждёт его дальше.
#информативные_размышления
Многие после Недели Магии 5 открыли для себя чудесное свойство блюра изображений и блоков с помощью свойства
filter со значением blur(). Так же многих заинтересовало значение grayscale(). Этот пост будет не столько практическим, сколько информационным :)
Благодаря даже двум значениям этого свойства, можно построить удивительные механики на ваших проектах. К примеру, если на ваших уроках есть цветные картинки, то недоступные уроки можно обесцветить :) Или навести интригу: размыть блюром следующее название урока, и тогда пользователю будет ещё интереснее узнать, что же ждёт его дальше.
#информативные_размышления
Добавим немного возможностей Геткурсу? 😉
Сегодня речь пойдет об инструменте скрытия блоков по параметру из URL. Кто-то уже знает, как работает эта штука, а кто-то нет :) Вкратце, идёт проверка параметра из урла страницы, проверяется её значение и блок либо скрывается, либо показывается.
Но меня смущает одно... функционал придумали целиковому блоку, а элементам - нет...
Я решил это немного исправить :) Теперь можно по параметру из урл что-либо сотворить с элементом на странице. В своём примере я изначально дал класс
Сам код ставится в конце вашей страницы, а в квадратных скобках и кавычках пишется тот параметр, который вы хотите проверить (у меня этот параметр
Cам код будет в посте ниже :)
#полезная_фишка
Сегодня речь пойдет об инструменте скрытия блоков по параметру из URL. Кто-то уже знает, как работает эта штука, а кто-то нет :) Вкратце, идёт проверка параметра из урла страницы, проверяется её значение и блок либо скрывается, либо показывается.
Но меня смущает одно... функционал придумали целиковому блоку, а элементам - нет...
Я решил это немного исправить :) Теперь можно по параметру из урл что-либо сотворить с элементом на странице. В своём примере я изначально дал класс
hide картинке, чтобы скрыть её, а затем проверял параметр select. И если он равняется единице, то скрипт показывает картинку на странице :)Сам код ставится в конце вашей страницы, а в квадратных скобках и кавычках пишется тот параметр, который вы хотите проверить (у меня этот параметр
select).Cам код будет в посте ниже :)
#полезная_фишка
Сам код:
$(function() {
var params = window
.location
.search
.replace('?','')
.split('&')
.reduce(
function(p,e){
var a = e.split('=');
p[decodeURIComponent(a[0])] = decodeURIComponent(a[1]);
return p;
},
{}
);
if(params['select'] === '1') {
$('.secret-image').removeClass('hide');
}
})Любой блок в форме... и не только там 😱
Геткурс открывает удивительные возможности, если знать как их применить :) В данном случае, можно поставить любой блок куда угодно и как угодно с помощью HTML-блока в редакторе.
На скриншотах грубый пример того, как в блок формы уместился и блок "Две колонки с произвольным контентом", который я заранее подредактировал, так как после вставки подобным образом он перестаёт быть редактируемым :)
Подобным трюком я пользовался на многих проектах, когда делал нестандартные возможности для блоков. Один из примеров такого использования — это панель на странице распродажи с общей суммой и количеством выбранных предложений, которые как раз размещались по колонкам, создавая дополнительную адаптивность за счёт того, что это родные блоки Геткурса. И таких фантазий насчёт блоков может быть безграничное множество... 😉
#лайфхак
Геткурс открывает удивительные возможности, если знать как их применить :) В данном случае, можно поставить любой блок куда угодно и как угодно с помощью HTML-блока в редакторе.
На скриншотах грубый пример того, как в блок формы уместился и блок "Две колонки с произвольным контентом", который я заранее подредактировал, так как после вставки подобным образом он перестаёт быть редактируемым :)
Подобным трюком я пользовался на многих проектах, когда делал нестандартные возможности для блоков. Один из примеров такого использования — это панель на странице распродажи с общей суммой и количеством выбранных предложений, которые как раз размещались по колонкам, создавая дополнительную адаптивность за счёт того, что это родные блоки Геткурса. И таких фантазий насчёт блоков может быть безграничное множество... 😉
#лайфхак