Быстрый способ скрыть элементы на сайте в конструкторе Mobirise.

 

Бывают ситуации, когда необходимо в пределах одного блока Mobirise, скрыть один элемент, а второй, оставить. Например, есть блок:

Как скрыть отображение иконки в центре на мобильной* версии, чтобы остальные остались?

*Либо, скрыть с десктопной версии и оставить только на мобильной?

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

Перед любыми внедрениями правок в код, создавайте резервные копии своих проектов. Данная заметка, подразумевает, что вы ознакомлены с предыдущей заметкой.

 В примере, буду использовать блок «Особенности» с бесплатной темы Mobirise 5:

Мы будем скрывать только одну иконку, что по центру: 

Теперь, открываем редактор кода:

Ищем нужный класс CSS в HTML коде для центрального элемента. Как это сделать, описано в заметке «Как скрыть элементы на сайте для мобильной версии или наоборот в Mobirise?».

В нашем случае, это класс:

iconfont-wrapper

Обратите внимание, что данный класс iconfont-wrapper, применим в HTML в трех местах данного блока, так как отвечает за отображение иконок в блоке (у нас три иконки в блоке). Выберите ту иконку, которая вам нужна. В нашем примере, это иконка по центру. Уловили суть?

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

d-none d-md-block

Его необходимо указать перед классом CSS элемента с иконкой:

iconfont-wrapper

 Выглядеть должно все примерно так:

<div class="d-none d-md-block iconfont-wrapper" mbr-if="showIcon">

Смотрим результат:

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

Небольшое видео, для наглядности процесса:

Как скрыть элемент в блоке на конструкторе Mobirise? 

Бывают ситуации, кода нам нужно скрыть отображение вообще полностью на всех устройствах, только один элемент в блоке. Тогда, нам нужно добавить перед нужным классом (по аналогии выше):

d-none

Элемент перестанет отображаться на всех устройствах. Это удобно, так как остальные элементы данного класса, останутся отображаться. 

Данная информация, подготовлена на основе официальной документации Bootstrap. В примере выше, использовались классы CSS из таблицы.

Не хотите самостоятельно вникать в материал или нужна помощь в создании сайта на конструкторе Mobirise? Закажите разработку сайта у проверенного исполнителя. Либо:

1. Биржа фриланс услуг. Стоит рассмотреть для жителей Украины (много исполнителей из Украины). Одна из надежных бирж фриланса в СНГ. В целом, данная биржа, работает с клиентами и исполнителями со всех стран бывшего СССР. Дискриминации на бирже, по политическим различиям – нет. Здесь ценят как заказчиков так и исполнителей. Узнать больше...

2. Считается биржа фриланса №1 в России. Работает с клиентами и исполнителями по странам СНГ. Много исполнителей из России и других стран СНГ. Узнать больше...

3. Выгодная биржа фриланса для заказчиков в плане доступности цен. Оптимальный вариант заработка для начинающих и опытных фрилансеров. Фриланс биржа, работает с клиентами и исполнителями из России и стран СНГ. Узнать больше...

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

Отправить комментарий

Новые Старые