как сделать такеи блоки?

[Axxxmatov]

Здравствуйте скажите пожалуйста, как сделать такие же блоки ?  
То есть в ряду 3 блока с фотками под ним описание и кнопка переводит на страницу. . 

[ryancoolround]

Ну для примера можно использовать комбинацию HTML, CSS и возможно JavaScript. Вот простой пример кода, который может тебе помочь начать:

HTML:

<div class="block">
  <div class="image">
    <img src="путь_к_изображению" alt="Описание изображения">
  </div>
  <div class="description">
    <h3>Заголовок описания</h3>
    <p>Текст описания блока.</p>
    <a href="ссылка_на_страницу">Перейти</a>
  </div>
</div>

CSS:

.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}

.image {
  width: 100%;
  max-width: 300px; /* Измените размер по своему усмотрению */
}

.description {
  margin-top: 10px;
}

h3 {
  margin-bottom: 5px;
}

a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f2f2f2;
  text-decoration: none;
  color: #333;
  border-radius: 5px;
}

В этом примере .block представляет отдельный блок с фотографией и описанием. Ты можешь добавить несколько таких блоков на свою страницу, чтобы получить ряд из трех блоков.

Замени "путь_к_изображению" на фактический путь к изображению, "Описание изображения" на текст, описывающий изображение, "Заголовок описания" на заголовок блока, "Текст описания блока" на описание блока и "ссылка_на_страницу" на адрес страницы, на которую должна переходить кнопка.

Это просто базовый пример, и ты можешь доработать стили и расположение блоков согласно своим потребностям.

[AHristich]

11 часов назад, Axxxmatov сказал:

Здравствуйте скажите пожалуйста, как сделать такие же блоки ?  
То есть в ряду 3 блока с фотками под ним описание и кнопка переводит на страницу. . 

Это все можно сделать с помощью стандартных средств движка,но долго объяснять,потому что получится пересказ документации по приложению Pages (Страницы),кстати,ссылку на которую вам скидывал в другой вашей теме. Лень читать/изучать?

[Axxxmatov]

10 часов назад, AHristich сказал:

Это все можно сделать с помощью стандартных средств движка,но долго объяснять,потому что получится пересказ документации по приложению Pages (Страницы),кстати,ссылку на которую вам скидывал в другой вашей теме. Лень читать/изучать?

Не то что лень, а пока я потрачу 6 часов на разбор и нечего не пойму тут опытные люди скажут где и что конкретно смотреть и читать, а не как вы) 

11 часов назад, ryancoolround сказал:

Ну для примера можно использовать комбинацию HTML, CSS и возможно JavaScript. Вот простой пример кода, который может тебе помочь начать:

HTML:

<div class="block">
  <div class="image">
    <img src="путь_к_изображению" alt="Описание изображения">
  </div>
  <div class="description">
    <h3>Заголовок описания</h3>
    <p>Текст описания блока.</p>
    <a href="ссылка_на_страницу">Перейти</a>
  </div>
</div>

CSS:

.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}

.image {
  width: 100%;
  max-width: 300px; /* Измените размер по своему усмотрению */
}

.description {
  margin-top: 10px;
}

h3 {
  margin-bottom: 5px;
}

a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f2f2f2;
  text-decoration: none;
  color: #333;
  border-radius: 5px;
}

В этом примере .block представляет отдельный блок с фотографией и описанием. Ты можешь добавить несколько таких блоков на свою страницу, чтобы получить ряд из трех блоков.

Замени "путь_к_изображению" на фактический путь к изображению, "Описание изображения" на текст, описывающий изображение, "Заголовок описания" на заголовок блока, "Текст описания блока" на описание блока и "ссылка_на_страницу" на адрес страницы, на которую должна переходить кнопка.

Это просто базовый пример, и ты можешь доработать стили и расположение блоков согласно своим потребностям.

Брат, дай бог тебе здоровья, но почему то размеры не меняется, есть вариант почему ? 

[AHristich]

45 минут назад, Axxxmatov сказал:

Не то что лень, а пока я потрачу 6 часов на разбор и нечего не пойму тут опытные люди скажут где и что конкретно смотреть и читать, а не как вы) 

А вы думаете что опытные люди смОгут объяснить что-то в трёх словах тому кто в этом ничего не понимает?

Ну давайте я вам тогда помогу.

Заходите в АЦ в приложение Страницы

1. Создаёте новую страницу,в ней размещаете вёрстку в виде колонок или сетки.

2. Создаёте блок с выводом нужной вам информации

3. Создаёте ,если нужно,шаблон для этого блока.

4.В созданной новой странице размещаете код блока в нужном вам месте.

 И все это стандартными средствами.

[Axxxmatov]

26 минут назад, AHristich сказал:

А вы думаете что опытные люди смОгут объяснить что-то в трёх словах тому кто в этом ничего не понимает?

Ну давайте я вам тогда помогу.

Заходите в АЦ в приложение Страницы

1. Создаёте новую страницу,в ней размещаете вёрстку в виде колонок или сетки.

2. Создаёте блок с выводом нужной вам информации

3. Создаёте ,если нужно,шаблон для этого блока.

4.В созданной новой странице размещаете код блока в нужном вам месте.

 И все это стандартными средствами.

Из всего этого, я понял что надо зайти в Ац, и создать страницу 🤣

Не проще код, готовый кто то скинул бы и все) Или пример Выше код не работает 

[ryancoolround]

19 часов назад, Axxxmatov сказал:

Брат, дай бог тебе здоровья, но почему то размеры не меняется, есть вариант почему ? 

Если размеры не меняются, возможно, это связано с другими правилами CSS, примененными на твоей странице.

[AHristich]

1 час назад, ryancoolround сказал:

Если размеры не меняются, возможно, это связано с другими правилами CSS, примененными на твоей странице.

Для таких случаев есть стандартные ips-овские классы адаптивности. А как их применять можно увидеть в документации... Но это не в правилах данного юзверя.

Вот личный пример главной страницы,где используются только стандартные ипсовские разметка,классы и выводится все с помощью блоков.

И все это адаптивно.

[Axxxmatov]

8 часов назад, AHristich сказал:

Для таких случаев есть стандартные ips-овские классы адаптивности. А как их применять можно увидеть в документации... Но это не в правилах данного юзверя.

Вот личный пример главной страницы,где используются только стандартные ипсовские разметка,классы и выводится все с помощью блоков.

И все это адаптивно.

Опять вы со своими документациями) 

[Axxxmatov]

В 24.05.2023 в 07:04, ryancoolround сказал:

Ну для примера можно использовать комбинацию HTML, CSS и возможно JavaScript. Вот простой пример кода, который может тебе помочь начать:

HTML:

<div class="block">
  <div class="image">
    <img src="путь_к_изображению" alt="Описание изображения">
  </div>
  <div class="description">
    <h3>Заголовок описания</h3>
    <p>Текст описания блока.</p>
    <a href="ссылка_на_страницу">Перейти</a>
  </div>
</div>

CSS:

.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}

.image {
  width: 100%;
  max-width: 300px; /* Измените размер по своему усмотрению */
}

.description {
  margin-top: 10px;
}

h3 {
  margin-bottom: 5px;
}

a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f2f2f2;
  text-decoration: none;
  color: #333;
  border-radius: 5px;
}

В этом примере .block представляет отдельный блок с фотографией и описанием. Ты можешь добавить несколько таких блоков на свою страницу, чтобы получить ряд из трех блоков.

Замени "путь_к_изображению" на фактический путь к изображению, "Описание изображения" на текст, описывающий изображение, "Заголовок описания" на заголовок блока, "Текст описания блока" на описание блока и "ссылка_на_страницу" на адрес страницы, на которую должна переходить кнопка.

Это просто базовый пример, и ты можешь доработать стили и расположение блоков согласно своим потребностям.

бРАТ, ВОТ Я АЛЬТЕРНАТИВУ НАШЕЛ, ТОКА КАК ОТЦЕНТРОВАТЬ ЭТОТ КОД, ЧТО БЫ ОНИ В РЯД БЫЛИ 

 

Спойлер

<div class="photo-block">
<img src="/media/123.jpg" width="400" height="400" alt="Первая фотография">
<h3>Название первой фотографии</h3>
<html>
 <head>
  <meta charset="utf-8">
  <title>Обратная связь</title>
  <style>
   .btn {
    display: inline-block; /* Строчно-блочный элемент */
    background: #ADD8E6; /* Серый цвет фона */
    color: #fff; /* Белый цвет текста */
    padding: 1rem 1.5rem; /* Поля вокруг текста */
    text-decoration: none; /* Убираем подчёркивание */
    border-radius: 3px; /* Скругляем уголки */
   }
  </style>
 </head>
 <body> 
  <a href="https://islamitochka.ru/index.php?/contact/" class="btn">Обратная связь</a>
 </body>
</html>

Это один блок, пример, вот у меня три таких, но как их сделать в ряд что бы были они ? 

[Exception]

7 часов назад, Axxxmatov сказал:

Опять вы со своими документациями)

вопрос был "как", а не "сделайте за меня"

можно воспользоваться подобными классами реализованными внутри ips
https://invisioncommunity.com/4guides/themes-and-customizations/css-framework/layout-grids-r90/

так же в ips есть js UI widget, подойдет для автоматической подгонки высоты например:
https://invisioncommunity.com/4guides/themes-and-customizations/javascript-framework/using-ui-widgets/ipsuigrid-r53/

[Axxxmatov]

21 час назад, Axxxmatov сказал:

бРАТ, ВОТ Я АЛЬТЕРНАТИВУ НАШЕЛ, ТОКА КАК ОТЦЕНТРОВАТЬ ЭТОТ КОД, ЧТО БЫ ОНИ В РЯД БЫЛИ 

 

  Показать контент

<div class="photo-block">
<img src="/media/123.jpg" width="400" height="400" alt="Первая фотография">
<h3>Название первой фотографии</h3>
<html>
 <head>
  <meta charset="utf-8">
  <title>Обратная связь</title>
  <style>
   .btn {
    display: inline-block; /* Строчно-блочный элемент */
    background: #ADD8E6; /* Серый цвет фона */
    color: #fff; /* Белый цвет текста */
    padding: 1rem 1.5rem; /* Поля вокруг текста */
    text-decoration: none; /* Убираем подчёркивание */
    border-radius: 3px; /* Скругляем уголки */
   }
  </style>
 </head>
 <body> 
  <a href="https://islamitochka.ru/index.php?/contact/" class="btn">Обратная связь</a>
 </body>
</html>

Это один блок, пример, вот у меня три таких, но как их сделать в ряд что бы были они ? 

 

17 часов назад, Exception сказал:

вопрос был "как", а не "сделайте за меня"

можно воспользоваться подобными классами реализованными внутри ips
https://invisioncommunity.com/4guides/themes-and-customizations/css-framework/layout-grids-r90/

так же в ips есть js UI widget, подойдет для автоматической подгонки высоты например:
https://invisioncommunity.com/4guides/themes-and-customizations/javascript-framework/using-ui-widgets/ipsuigrid-r53/

Можете пожалуйста вот из этого кода, просто сделать что бы они в ряд были, я  что то не могу. Я в программировании мало что понимаю.