Как добавить ссылки в галерее в шаблоне DIVI и показать заголовок при наведении на него (Hover)

Suscríbete a mi канал:  

Привет, ребята,

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

Это полезно, если мы хотим создать персонализированное портфолио, кулинарные рецепты или любую другую идею, которая придет в голову.

Если у вас нет шаблона DIVI, вы можете купить здесь за 69$, или Если вы подписаны на Премиум-зону, вы можете скачать ее бесплатно из личного кабинета. Вы можете дать зарегистрируйтесь за 10 евро в месяц здесь

Результат будет следующим:
демо-галерея-див

Для этого мы будем использовать конструктор DIVI, и последний аспект, который должен иметь редактор, следующий:

divi-галерея-строитель

Первый шаг — настроить строку, это зеленая часть предыдущего изображения, когда вы нажмете на три горизонтальные линии, вы увидите следующий экран, и вам нужно оставить параметры, как вы видите здесь:
конфигурация-ряд-ди-галерея

Теперь мы добавляем модуль галереи со следующими параметрами:

опции-галерея-модуль

Чтобы добавить изображения, нам нужно нажать кнопку «Обновить галерею» и выбрать изображения, которые мы собираемся добавить:

добавить-галерея-дивизи

Теперь нам нужно добавить в каждое изображение текст, который мы хотим отображать при наведении курсора на изображение.
Мы собираемся добавить его в поле легенды при нажатии на каждое изображение:

легенда-образ-див

В примере я добавил следующую ссылку с заголовком и подзаголовком:

<a href="https://comohacerunapagina.es"><b>Añade un título</b></br>Subtítulo aquí</a>

У нас он почти готов, но из-за отсутствия добавления таблицы стилей кажется, что мы очень далеки от конечного результата:

галерея-без-css-divi

Теперь нам просто нужно добавить CSS. Для этого мы нажимаем на параметры конструктора, как показано на следующем изображении:

css-divi-строитель

Мы добавляем 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*/
    }
}

И мы получили тот результат, который хотели 😉

демо-галерея-див

9 комментариев к статье «Как добавить ссылки в Галерею в шаблоне DIVI и показать заголовок при наведении курсора мыши (Hover)»

    • Привет Серхио,
      Мне понравилась идея «деления». Многие из вас меня спрашивали и поэтому я это делаю 😉
      Генезис и Диви — очень разные видения. Divi гораздо проще спроектировать, но, на мой взгляд, Genesis надежнее, да, намного сложнее.
      Привет 😉
      Оскар

  1. ummMMMmm Я не знаю, что я делаю неправильно, но это не работает, это 2-й раз, когда я пытаюсь. Привет, Оскар 🙂
    Слушайте, если у вас есть минутка, это тестовый сайт, я использую его для проекта.
    Я использую изображения того же размера, что и в видео, 748 на 421 пиксель.
    Я пытался сделать их менее высокими, более узкими, и я не понимаю, хе-хе
    Правда версия Диви не та, что на видео, но я не думаю, что это имеет к этому какое-то отношение.
    пример здесь:

    ht — tps://txurrut.appbera.com/

ответ Чомина Отменить ответ