Как изменить порядок блоков на главной без конструктора?
Если у вас нет конструктора и возникла необходимость изменить порядок блоков на главной, то вам нужно в папке /include/index/ отредактировать файл:
«wide.php» — в случае если вы используете широкий шаблон главной страницы
«narrow.left.php» — в случае если используете шаблон с левой колонкой
В одном из этих файлов нужно изменить порядок строк — каждая строка отвечает за вывод того или иного блока, порядок этих строк это и есть порядок вывода блоков
Наложение элементов — CSS: Позиционирование элементов
В уроке про плавающие элементы вы могли увидеть, что элементы HTML могут накладываться друг на друга. Такое же поведение было при выставлении позиционирования отличного от нормального. Наложением элементов можно управлять и с помощью CSS-свойства z-index . Из названия свойства можно увидеть, что речь идет об оси z .
Эта ось отвечает за то, какие элементы будут располагаться на переднем, а какие на дальнем плане. Попробуем использовать на трех блоках абсолютное позиционирование:
Возникнет естественный вопрос: «А где остальные два блока?». Они скрылись за последним блоком .block-three . Когда мы дали каждому блоку абсолютное позиционирование, то начали в одном и том же месте накладывать блоки друг на друга. Первым в угол встал блок .block-one , после этого у браузера возникла задача переместить блок .block-two ровно на это же место. Для этого он выставил приоритет по оси z второму блоку и наложил его на первый. Данная операция повторилась с последним блоком, и он занял видимую позицию, «заслонив» своих братьев.
При таком взаимодействии блоки никуда не исчезают из кода, это можно проверить, выставив разные свойства ширины и высоты для каждого из блоков:
Свойство z-index позволяет указать, какие элементы и в каком порядке будут накладываться друг на друга. Свойство принимает числовое значение, указывая слой, на котором будет расположен элемент. Чем больше число, тем выше элемент находится по оси z . Важно, что свойство z-index работает только с элементами, у которых установлено свойство position с одним из значений:
Важным для понимания моментом является то, как браузер по умолчанию позиционирует элементы:
- Первым всегда идет элемент HTML. Поверх него накладываются все остальные элементы.
- Далее идут все элементы в нормальном потоке документа. Элементы идут по всем правилам расположения блочных и строчных элементов. Они позиционируются в том порядке, в котором определены внутри HTML-документа.
- В конце накладываются все элементы с position в том порядке, в котором они определены внутри HTML-документа. Это можно увидеть на примерах выше.
Попробуем поменять порядок элементов в последнем примере. Для этого установим второму и третьему блоку такие значения, чтобы они поменялись местами. Необходимо для блока .block-two установить значение z-index больше, чем у блока .block-three . В результате третий блок «исчезнет», так как имеет меньшие размеры:
Свойство z-index может принимать отрицательные, положительные значения и ноль. Здесь нет никакой магии и отрицательные значения будут находиться «ниже» положительных. В реальных проектах хорошей практикой считается установка значения z-index с шагом в 100 при достаточно больших значениях. Это делается для удобства чтения и правок стилей:
z-index: 34234; z-index: 43233; z-index: 34324; Определить, в каком порядке расположатся элементы, при таких значениях достаточно трудно. Необходимо вчитываться в каждую цифру. Сравните это с таким вариантом:
z-index: 34200; z-index: 43200; z-index: 34300; Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Как поменять местами блоки на странице яндекса
Нашли ошибку? Выделите мышкой и нажмите Ctrl+Enter
Управление расположением блоков
Менять блоки местами на главной странице очень легко. Делать это можно как в публичной, так и в административной части сайта.
Для управления положением блоков из публичной части сайта разверните виджет настроек.
Переключитесь на вкладку «Главная». Выберите для себя один из типов страницы и нажмите «Параметры».
Ниже появится список блоков с выключателями и вертикальными стрелками. Наведите указатель на стрелки на строке с названием блока, который нужно сместить. Зажмите левую кнопку мыши и перетащите блок вверх или вниз.
В качестве примера поменяем местами блоки с плавающими баннерами и услугами.
Вид главной страницы до изменений:
Вид страницы после изменений:
Проделать то же самое можно в админке можно в Рабочий стол → Аспро: Priority → Настройки.
Пролистайте настройки до группы «Главная». Здесь также под переключателем типа главной страницы находится перечень блоков. Принцип действия для компоновки аналогичен – зажмите левой кнопкой мыши стрелки на нужной строке и переместите ее вверх или вниз.
Действия с блоками
Скопировать блок можно с помощью выпадающего меню в правом верхнем углу блока. После этого его можно вставить на эту или другую страницу с помощью этого же выпадающего меню → Вставить.
Таким способом можно копировать и вставлять как на одной странице, так и на другую страницу
Выделение и множественные действия
Выделить один блок или несколько блоков можно с помощью опции «Выделить» в выпадающем меню в правом верхнем углу блока. После выделения нескольких блоков их можно скопировать или перенести после определенного блока на странице, кликнув на него.
Таким способом можно копировать и вставлять как на одной странице, так и на другую страницу
Перемещение: c помощью стрелок и выделения блока
Переместить блок можно с помощью стрелок в правом верхнем углу блока или с помощью выделения и кнопки «Переместить».