Семен Кузнецов

В директории вашей темы в шаблоне layouts/default.htm создаем placeholder.

{% placeholder meta default %}
   <title>{{ this.page.meta_title }}</title>
   <meta name="description" content="{{ this.page.meta_description }}">
{% endplaceholder %}

По умолчанию плейсхолдер содержит метатеги страниц. Это будет работать для staticPages и для CMS страниц.

Далее если вы хотите вывести не мету страницы, например у вас страница товара и нужно выводить данные товара. Просто вставляете новое содержимое плейсхолдера.

Предположим что у вас есть страница товара pages/shop/product.htm
И на странице есть переменная product с моделью товара.
На странице товара нужно вызвать:

{% put meta %}
   <title>{{ product.title }}</title>
   <meta name="description" content="{{ product.description }}">
{% endput %}

Надеюсь, помог понять принцип.

Запилил, добавил в codepen.io. Нужные доп. параметры выставь сам

stepsSlider.noUiSlider.on('change.one', function() {
  vals = stepsSlider.noUiSlider.get();
  var processed = vals.replace(/ /g, '');
  res = parseFloat(processed, 10);
  // Как то так https://refreshless.com/nouislider/more/#section-update
  stepsSlider2.noUiSlider.updateOptions({
        range: {
            'min': 0,
            'max': res
        }
    });
});

Проблема была не в области видимости. Просто ты не посмотрел пример из документации . Там справа есть кнопка Updating the slider with new options on button click нажми на нее и увидишь примеры.

А чем это плохо?

/* Этот код сработает на экранах размером <= 576px по ширине*/
@media (max-width: 576px) {
     /* Тут твой код */
}

Ваш вопрос очень не простой, так как фон будет разный на разных экранах. Вы установили высоту в 700px это ок. Но вы не учитываете ширину экрана. Если хотите точного соответствия картинки на экране я бы рекомендовал вам поместить изображение в виде тега img

То есть создать нечто такое:

<section class="main">
      <div class="main__content">
         <!-- Тут будет содержимое (кнопки, текст и тд) -->
      </div>
      <img src="/image_1920.png" alt="">
</section>

Необходимые стили

.main {
    position: relative;
}
.main__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Таким образом вы получите оригинальное соотношение сторон а .main_content накроет изображение и в нем вы сможете запилить контент. И бонусом вы можете использовать srcset, юзеры на смартфонах скажут вам спасибо)

Абсолютно ничем не плохо. Все ровно наоборот.
Нужно руководствоваться поставленной задачей. Если у вас одностраничный сайт, то выносить все отдельно нет смысла. Хотя в особо длинных лендингах это позволяет облегчить читаемость кода.

Что касается многостраничных сайтов, то разбиение на фрагменты жизненно необходимо, потому что главное правило программиста - не дублировать код. Ленивый программист = хороший программист!

1. Фрилансер - это черная дыра. Нет никаких гарантий, что вы с первого раза найдете хорошего специалиста. Вы потратите массу времени походив по рукам как портовая путана, потеряете массу времени и сил. В итоге скорее всего специалиста вы найдете, но какой ценой?

2. Нет слово бесплатно. Бесплатно будут работать только молодые специалисты, которых вы воспитаете. И то не долго, постепенно их интерес и отеческие симпатии пропадают, люди имеют свойство развиваться.

3. Дешевые предложения на фрилансе можно сразу отметать, шанс, что эти специалисты чего-то могут резко приближается к нулю. Нормальные же предложения по стоимости приближены к студийным.

Вывод: Строить свою веб-студию можно только из своих коллег по цеху с которыми вы уже работали. Для этого желательно самому побыть фрилансером или же поработать в студии. Однако помимо кадровой работы у вас должна быть тонна знаний из разряда всего понемногу. Иначе вы останетесь без денег с лапшой на ушах