Suscríbete a mi канал:
Привет, ребята,
Сегодня мы увидим, как создать галерею в шаблоне Divi, которая показывает текст при наведении на нее, а также имеет ссылку.
Это полезно, если мы хотим создать персонализированное портфолио, кулинарные рецепты или любую другую идею, которая придет в голову.
Результат будет следующим:
Для этого мы будем использовать конструктор DIVI, и последний аспект, который должен иметь редактор, следующий:
Первый шаг — настроить строку, это зеленая часть предыдущего изображения, когда вы нажмете на три горизонтальные линии, вы увидите следующий экран, и вам нужно оставить параметры, как вы видите здесь:
Теперь мы добавляем модуль галереи со следующими параметрами:
Чтобы добавить изображения, нам нужно нажать кнопку «Обновить галерею» и выбрать изображения, которые мы собираемся добавить:
Теперь нам нужно добавить в каждое изображение текст, который мы хотим отображать при наведении курсора на изображение.
Мы собираемся добавить его в поле легенды при нажатии на каждое изображение:
В примере я добавил следующую ссылку с заголовком и подзаголовком:
<a href="https://comohacerunapagina.es"><b>Añade un título</b></br>Subtítulo aquí</a>
У нас он почти готов, но из-за отсутствия добавления таблицы стилей кажется, что мы очень далеки от конечного результата:
Теперь нам просто нужно добавить CSS. Для этого мы нажимаем на параметры конструктора, как показано на следующем изображении:
Мы добавляем CSS на следующем экране:
CSS, который вы должны добавить:
/*---Add Links to the Divi Gallery Module and Show Captions on Hover---*/ /*Hide the image title and default overlay effect*/ .et_pb_gallery_item h3, .et_overlay { display: none; } /*Set the position and size of the images and add an extra pixel to get rid of white space between images*/ .et_pb_gallery_grid .et_pb_gallery_image { position: absolute; width: calc(100% + 1px) !important; } .et_pb_gallery_caption { margin: 0 !important; } /*Set the colour of the caption text*/ .et_pb_gallery_caption a { color: #fff; } /*Set the font size and case for the title*/ b { font-size: 20px; text-transform: uppercase; } /*Set the position of caption text so it displays on to of the image on hover and add an outline*/ p.et_pb_gallery_caption { position: relative; background: rgba(0, 0, 0, .5); /*This is the colour of the image overlay on hover*/ border: none; outline: 5px solid rgba(255, 255, 255, .5); /*This is the colour of the border*/ outline-offset: -20px; /*This moves the border in a little from the edge*/ text-align: center; padding: 25% 5%; /*Adjust the first value if using more or less text*/ cursor: pointer; opacity: 0; /*Hide the caption until hover*/ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } /*Show the caption on hover*/ p.et_pb_gallery_caption:hover { opacity: 1; } /*Media queries: You will need to adjust these values if using more or less text*/ @media only screen and (max-width:1366px) { p.et_pb_gallery_caption { padding: 23.7% 5%; /*Adjust the first value if using more or less text*/ } } @media only screen and (max-width:1280px) { p.et_pb_gallery_caption { padding: 19% 5%; /*Adjust the first value if using more or less text*/ } } @media only screen and (max-width:1024px) { p.et_pb_gallery_caption { padding: 15% 5%; /*Adjust the first value if using more or less text*/ } } /*This media query make the gallery display as two columns rather than three on tablets in portrait*/ @media only screen and (min-width: 768px) and (max-width: 980px) { .et_pb_column .et_pb_grid_item:nth-child(2n+1) { clear: both !important; } .et_pb_gutters1 .et_pb_grid_item:nth-child(n) { width: 50% !important; margin: 0 !important; clear: none; } p.et_pb_gallery_caption { padding: 26.5% 5%; /*Adjust the first value if using more or less text*/ } } @media only screen and (max-width: 480px) { .et_pb_gallery_grid .et_pb_gallery_image { width: 100% !important; max-width: 100% !important; } p.et_pb_gallery_caption { padding: 24.8% 5%; /*Adjust the first value if using more or less text*/ } } @media only screen and (max-width: 320px) { .et_pb_gallery_grid .et_pb_gallery_image { width: 100% !important; max-width: 100% !important; } p.et_pb_gallery_caption { padding: 19.4% 5%; /*Adjust the first value if using more or less text*/ } }
И мы получили тот результат, который хотели 😉
Привет… Десерт хорош, я вижу некую дивизию Оскара… Хе-хе. В любом случае, это моя основа для создания веба. Как вы думаете, какие различия между Genesis и Divi? Как вы видите, оба способны делать одни и те же проекты? Привет!
Привет Серхио,
Мне понравилась идея «деления». Многие из вас меня спрашивали и поэтому я это делаю 😉
Генезис и Диви — очень разные видения. Divi гораздо проще спроектировать, но, на мой взгляд, Genesis надежнее, да, намного сложнее.
Привет 😉
Оскар
полностью согласен, Оскар, генезис потрясающий! а Divi крут, потому что легко делать некоторые вещи, которые обычно сложны. ну классное это видео, да? Большое спасибо.
Большое спасибо за ваши слова Txomin 😉
полностью согласен с вашим комментарием
Обнять!
Доброе утро Оскар, вопрос, при подписке и скачивании шаблона Divi как работают обновления? Так как для возможности обновления обычно запрашиваются ключи продукта
Привет Роберто,
Я загружаю обновления в премиум-зону, и вам приходится обновлять ее вручную.
Привет 😉
ummMMMmm Я не знаю, что я делаю неправильно, но это не работает, это 2-й раз, когда я пытаюсь. Привет, Оскар 🙂
Слушайте, если у вас есть минутка, это тестовый сайт, я использую его для проекта.
Я использую изображения того же размера, что и в видео, 748 на 421 пиксель.
Я пытался сделать их менее высокими, более узкими, и я не понимаю, хе-хе
Правда версия Диви не та, что на видео, но я не думаю, что это имеет к этому какое-то отношение.
пример здесь:
ht — tps://txurrut.appbera.com/
Отличный Оскар, мы продолжаем учиться с помощью ваших руководств по WordPress
Большое спасибо друг 😉
Обнять!