Для начала переходим в папку "Site - Templates". В эту папку, в корень, переносим всю папку "assets" из нашего проекта.
Так как это у нас лэндинг, то нам шаблон для внутренних страниц будет не нужен и он будет нам мешать, поэтому переименовываем его в "__main.php".
Если вдруг, нужен будет снова базовый _main.php, то его можно будет скачать вот здесь.
Далее переходим к правке шаблона "home.php". В него помещаем всю нашу верстку без Header и Footer (хотя можно и с ними, об этом ниже), но внося <head> и теги <body>. Все пути, которые у нас выглядят вот так: "href="assets/css/styles.css"" меняем на "href="<?php echo $config->urls->templates?>assets/css/styles.css"", то есть добавляем "<?php echo $config->urls->templates?>".
home.php
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="Description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>assets/css/uikit.min.css">
<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>assets/css/styles.css">
</head>
<body>
<?php
foreach($page->children as $child) {
$name_template = $pages->get($child->id)->template;
include('./' . $name_template . '.php');
}
?>
<script src="<?php echo $config->urls->templates?>assets/js/uikit.min.js"></script>
<script src="<?php echo $config->urls->templates?>assets/js/uikit-icons.min.js"></script>
<script src="<?php echo $config->urls->templates?>assets/js/main.js"></script>
</body>
</html>
Если вдруг, нужен будет снова базовый home.php, то его можно будет скачать вот здесь.
Теперь, каждый блок лэндинга делаем отдельным блоком в административной части ProcessWire. Для этого в папке "site - templates" создаем php файл с именем "first_block.php" (конечно же можно любое имя). В ProcessWire переходим в шаблоны и создаем новый шаблон, цепляем на него наш только что созданный php файл, и этому шаблону присвоится автоматически текущее имя - "first_block".
Далее в ProcessWire в разделе страниц создаем дочернюю страницу от главной с именем "first_page" (конечно же можно любое имя) и цепляем к ней шаблон "first_block".
Небольшое отступление. Как правило первым блоком нам стоит сделать header.php, но в данном примере пусть первым будет first_block. Вообще с Header и Footer можно поступить так:
Все эти варианты подключения Хеадера и Футера мы рассмотрим здесь.
Теперь возвращаемся к нашему файлу на хостинге "first_block.php" и вносим в этот файл верстку первого блока.
first_block.php
<div class="container-001">
<div class="container-001-content">
<div class="cblock001">
<div class="container-001__main">
<div class="container-001__main-leftblock uk-width-1-2">
<p class="container-001__main-leftblock-maintext">
<? echo $pages->get(1016)->e_bike_rental_maintext ?>
<span>
<? echo $pages->get(1016)->e_bike_rental_price ?>
<img class="container-001__main-leftblock-freeimg" src="<? echo $config->urls->templates ?>assets\images\greenline.svg" alt="" uk-img>
</span>
</p>
<p class="container-001__main-leftblock-text">
<? echo $pages->get(1016)->e_bike_rental_text ?>
</p>
<button class="container-001__main-leftblock-btn uk-button uk-text-bold">Rent Now</button>
<p class="container-001__main-leftblock-undertext"><? echo $pages->get(1016)->e_bike_rental_ps ?></p>
</div>
<div class="container-001__main-rightblock uk-width-1-2">
<img class="container-001__main-rightblock-img" src="<? echo $pages->get(1016)->e_bike_rental_image->url ?>" alt="" uk-img>
</div>
</div>
</div>
</div>
</div>
В примере выше размещен блок с привязкой полей ProcessWire из админки, не обращаем на это внимание, как внедрять в верстку пользовательские поля из админки я расскажу в другой шпаргалке.
По аналогии мы создаем второй и последующие блоки. В результате у нас получается посадка верстки лэндинга, в административной части которой можно эти блоки менять местами и на сайте эти изменения будут также видны.
Такой вариант посадки, с перемещение блоков на странице можно применять не только к лэндингам, но и к многостраничным сайтам.