AutoScale всех блоков
Модификация для Тильда, как альтернатива встроенного autoscale для Zero Block, она увеличивает блоки сайта в соответствии с текущей шириной экрана. Она работает, как для Zero Block, так и для Стандартных блоков.
Book design
Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Важно!
- Данная модификация увеличивает всю страницу, поэтому не стоит использовать расположение элементов по Window контейнеру, иначе можно столкнуться с выезжанием за границы экрана.
- Модификация работает только на экранах >1200px.
- Не желательно использовать модификацию для сложных проектов с кастомной анимацией и использованием большого количества элементов относящихся к Window контейнеру.
Кейс использования модификации прелоадера
Адаптив под широкоформат
Подойдет для простого адаптива под широкоформатные мониторы.
Тестирование
Модификация поможет понять как выглядит ваш сайт в увеличенном виде.
Пример работающей модификации
Модификация уже работает на данной странице и увеличивает ее на устройствах с шириной экрана свыше 1400 пикселей.
Для наглядности вы можете отключить модификацию и включить обратно.
Для наглядности вы можете отключить модификацию и включить обратно.
Модификация увеличивает сайт на величину равную соотношению текущей ширины экрана и указанному параметру (от 1200 до бесконечности).
Экран устройства, например 1920px
Работа модификации
Данная модификация работает с использованием добавления параметра zoom в CSS в артборды зеро блоков и контейнеры стандартных блоков, поэтому технически на сайте не будет глобальных изменений и все будет работать корректно, но для лучшего UX и стабильности лучше создать дополнительный макет в Zero Block для большого разрешения и использовать статичный CSS для стандартных блоков.
Инструкция по внедрению модификации
1
Создаем страницу
Для корректной работы модификации не используйте позиционирование по Window контейнеру и растягивание на 100% ширины экрана у стандартных блоков.
2
Копируем код и вставляем его в блок T123
В самом низу страницы создаем блок T123 и вставляем в него код ниже
3
Выбираем размер увеличения
В настройках модификации выбираем значение стартовой ширины экрана (по умолчанию 1400).
4
Выбираем область работы модификации
Если у вас header или footer сделаны на всю ширину экрана, то вы можете отключить модификацию для этих блоков выставим значение FALSE в настройке модификации
5
Опубликуйте страницу
<!-- Samand.studio | autoscale страницы -->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
//НАСТРОЙКИ
const x = 1400; // Установите нужное значение
const header_action = true; //Будет ли модификация работать в Header
const footer_action = true; //Будет ли модификация работать в Footer
const containers = document.querySelectorAll('.t-container, .t396, .t117_map, .t-feed'); // Селектор для обычных и Zero блоков
//добавляем класс контейнерам, соответствующим условию
containers.forEach(container => {
if (!header_action && container.closest('#t-header')) {
} else if (!footer_action && container.closest('#t-footer')) {
} else {
container.classList.add('modi_autoscale')
}
})
// Сохраняем оригинальные размеры
const originalSizes = new Map();
function initSizes() {
containers.forEach(container => {
originalSizes.set(container, {
width: container.offsetWidth,
height: container.offsetHeight
});
});
}
function updateScale() {
const viewportWidth = window.innerWidth;
containers.forEach(container => {
const original = originalSizes.get(container);
if (container.classList.contains('modi_autoscale')) {
if (viewportWidth > x && original ) {
const scale = viewportWidth / x;
container.style.transform = `scale(${scale})`;
container.style.marginBottom = `${(original.height * scale - original.height)}px`;
} else {
container.style.transform = 'scale(1)';
container.style.marginBottom = '0';
}
}
/*
if(viewportWidth > x && original ) {
const scale = viewportWidth / x;
container.style.transform = `scale(${scale})`;
container.style.marginBottom = `${(original.height * scale - original.height)}px`;
} else {
container.style.transform = 'scale(1)';
container.style.marginBottom = '0';
}*/
});
}
// Инициализация после полной загрузки
window.addEventListener('load', function() {
initSizes();
updateScale();
});
// Оптимизация ресайза
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
initSizes();
updateScale();
}, 150);
});
// Дополнительный фикс для динамического контента
new MutationObserver(updateScale).observe(document.body, {
subtree: true,
childList: true,
attributes: true
});
});
</script>
<style>
.modi_autoscale {
transform-origin: top center;
transition: transform 0.3s ease;
overflow: hidden !important;
margin-left: auto !important;
margin-right: auto !important;
}
</style>
Как вам модификация?