Сообщений в теме: 5

[Аслан]

Подскажите пожалуйста как сделать (см. картинку)
1. Необходимо  разместить что то на подобии меню буквально 5 ссылок на страницы сайта с разделением вот такой I палкой
( Ссылка 1    I Ссылка2    I   Ссылка 4)
2. Разместить горизонтально  картинки, как на примере
3. опустить метрику и название сайта под всеми этими блоками
4. Выравнивание по середине иконок с соцсетями

Прикрепленные изображения

• 

[Аслан]

[Stasya]

Аслан (23 Январь 2018 - 21:44) писал:

Подскажите пожалуйста как сделать (см. картинку)
1. Необходимо  разместить что то на подобии меню буквально 5 ссылок на страницы сайта с разделением вот такой I палкой
( Ссылка 1 I Ссылка2 I   Ссылка 4)
2. Разместить горизонтально  картинки, как на примере
3. опустить метрику и название сайта под всеми этими блоками
4. Выравнивание по середине иконок с соцсетями

Здравствуйте. Простите за длительное ожидание ответа.
1) , 2), 3)В разделе Сайт-> Меню блок меню. В поле Имя переменной в шаблоне укажите footer2 и добавьте к этому меню необходимые Вам пункты. Далее в шаблоне HTML найдите код

<!-- Подвал -->
	  <div id="footer" class="wrap">
		<div class="container">
		  <div class="row">
			<div class="col-xs-12">
			  <ul class="link-follow">
				<!-- Подвал><li><a class="facebook fa fa-facebook" href="https://www.facebook.com/" title="FaceBook.com"></a></li>
				<li><a class="twitter fa fa-twitter" href="https://twitter.com/" title="Twitter.com"></a></li>
				<li><a class="odnoklassniki fa fa-odnoklassniki" href="https://ok.ru/" title="Odnoklassniki"></a></li> -->
				<li><a class="vk fa fa-vk" href="https://vk.com/skating.store" title="F-Skating в VK"></a></li>
				<li><a class="youtube fa fa-instagram" href="https://www.instagram.com/fskating_kzn/" title="F-Skating в instagram"></a></li>
			  </ul>
			</div>
			<div class="col-xs-12">
			  <div class="copyright">
				<p>{SETTINGS_STORE_ORG_NAME}.</p>
				<p>&copy; {DATE_YEAR} &laquo;{SETTINGS_STORE_NAME}&raquo;.</p>
				<p>{COPYRIGHT_FOR_DESIGN_AZURE}.</p>
					<p>{SETTINGS_STORE_HTML_CODE}</p>
							  </div>
			</div>
		  </div>
		</div>
	  </div>
	  <!-- /END Подвал -->

и замените его на

<!-- Подвал -->
	  <div id="footer" class="wrap">
		<div class="container">
		  <div class="row">
		   
			<div class="col-xs-12">
			  <ul class="link-follow">
				<!-- Подвал><li><a class="facebook fa fa-facebook" href="https://www.facebook.com/" title="FaceBook.com"></a></li>
				<li><a class="twitter fa fa-twitter" href="https://twitter.com/" title="Twitter.com"></a></li>
				<li><a class="odnoklassniki fa fa-odnoklassniki" href="https://ok.ru/" title="Odnoklassniki"></a></li> -->
				<li><a class="vk fa fa-vk" href="https://vk.com/skating.store" title="F-Skating в VK"></a></li>
				<li><a class="youtube fa fa-instagram" href="https://www.instagram.com/fskating_kzn/" title="F-Skating в instagram"></a></li>
			  </ul>
			</div>
			<div class="col-xs-12">
			   <ul class="footBottomBlock">
				  {% FOR menu %}
					{% FOR footer2 %}
					  {% FOR links %}<li><a href="{menu.footer2.links.URL}" {% IF menu.footer2.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.footer2.links.TITLE %}title="{menu.footer2.links.TITLE}"{% ENDIF %}>{menu.footer2.links.NAME}</a></li>{% ENDFOR %}
					{% ENDFOR %}
				  {% ENDFOR %}
				</ul>
			</div>
			<div class="imageFooterBottom col-xs-12">
			   <div class="block block-subscribe col-md-4 col-sm-6 col-sms-6 col-smb-12">
				 <img src="{ASSETS_IMAGES_PATH}banner1.jpg">
				</div>
				<div class="block block-subscribe col-md-4 col-sm-6 col-sms-6 col-smb-12">
				  <img src="{ASSETS_IMAGES_PATH}banner2.jpg">
				</div>
				<div class="block block-subscribe col-md-4 col-sm-6 col-sms-6 col-smb-12">
				  <img src="{ASSETS_IMAGES_PATH}banner3.jpg">
				</div>
			</div>
			<div class="col-xs-12">
			  <div class="copyright">
				<p>{SETTINGS_STORE_ORG_NAME}.</p>
				<p>&copy; {DATE_YEAR} &laquo;{SETTINGS_STORE_NAME}&raquo;.</p>
				<p>{COPYRIGHT_FOR_DESIGN_AZURE}.</p>
					<p>{SETTINGS_STORE_HTML_CODE}</p>
							  </div>
			</div>
		  </div>
		</div>
	  </div>
	  <!-- /END Подвал -->

Картинки загрузите в разделе Сайт-> Редактор шаблонов с названием banner1, banner2, banner3.
Далее меню можно будет стилизовать так как Вам необходимо.
4) В файле main.css найдите код

#footer .link-follow {list-style: none;margin: 0 0 0 -155px;text-align: center;position: relative;top: -28px;width: 355px;left: 50%;height: 55px;padding:0;}

и замените его на

#footer .link-follow {list-style: none;margin: 0 0 0 -43px;text-align: center;position: relative;top: -28px;width: 118px;left: 50%;height: 55px;padding:0;}

[Аслан]

Получилось не совсем то. Меню не горизонтально, а вертикально и как сделать чтобы картинки были одинакового размера

Прикрепленные изображения

• 

[Аслан]

[Mr.Nito]

Аслан (30 Январь 2018 - 13:39) писал:

Получилось не совсем то. Меню не горизонтально, а вертикально и как сделать чтобы картинки были одинакового размера

Размер поправил строкой в main.css

.imageFooterBottom  {display:flex;align-items:center;justify-content: center;flex-wrap: wrap;}
.imageFooterBottom .block-subscribe img{max-width: 195px;display:block;margin: auto;}

Для горизонтального меню ниже

ul.footBottomBlock { margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; list-style: none;}
ul.footBottomBlock li { margin-left: 19px;}