Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #1257084

    1. I want to have a post slider with this look https://kriesi.at/themes/enfold-2017/elements/post-slider/ but for the moment I just have a post slider like that https://kriesi.at/themes/enfold/shortcodes/post-slider/
    How can I do ?

    2. I want also to reduce space between the column at 1%, how can I do

    Many thanks in advance


    Hey atelieremiliegayet,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,


    I give you below the link to the page where I put what I want to have as post slider and what I have
    Thanks in advance for your help


    PS : here is my custom css for masonry & post slider
    /* ————————MANSONRY———————— */
    /* Modifier la taille et le style du texte dans masonry */
    #top #main .av-masonry-entry .av-masonry-entry-title.entry-title {font-size:20px; color:#009da5; font-weight:400;}

    /* Modifier le texte du filtre masonry */
    #top div.container .av-masonry .av-masonry-sort {font-size:20px; text-align:left; text-transform:uppercase; font-family:’Oswald’;}

    /* Cacher la date dans masonry */
    #top span.av-masonry-date { display: none; }

    /* Ajoute une ombre aux vignettes dans masonry */
    #top .av-inner-masonry {box-shadow: 0 0 10px rgba(0,0,0,0.1);}

    /* ————————Post Slider———————— */

    /* personnalise les fleches de deplacement du slider */
    .avia-slideshow-arrows a::before {border-radius: 0px;}

    /* Cacher la date */
    .avia-content-slider .slide-meta .slide-meta-time {display: none;}

    /* Cacher les separator */
    .avia-content-slider .slide-meta .slide-meta-del {display: none;border:none;}
    .html_elegant-blog .avia-content-slider .slide-meta {display: none;border:none;}

    /* Cacher les Meta area */
    .html_elegant-blog #top .post-entry .blog-categories {display: none;}

    /* marge du texte des vignettes */
    #top .avia-content-slider {padding:0 10px;}
    #top .avia-content-slider article.slide-entry {margin-bottom:40px;}

    #top .avia-content-slider .slide-content {padding: 30px 20px;}

    /* personalisation du titre h3 */
    .html_elegant-blog .avia-content-slider .slide-entry-title {text-align:left;letter-spacing: 0px;font-size:20px; color:#009da5; font-weight:400;}

    /* Ajoute un fond et une ombre aux vignettes */
    #top .avia-content-slider article.slide-entry {box-shadow: 0 0 10px rgba(0,0,0,0.1);background: #F8F8F8;}
    .avia-content-slider .slide-image img {border-radius: 0px;}
    .avia-content-slider .slide-image {border-radius: 0px;}

    /* Text area */
    #top .avia-content-slider .slide-content {padding:30px 20px;margin-top:-10px;}



    Please go to Enfold theme options > Blog Layout > Blog Styling and choose “Modern Business” :)

    Best regards,


    Thanks for your answer but nothing change with the “Modern Business” style :-(



    Please add following code to Quick CSS in Enfold theme options > General Styling

    .html_elegant-blog .avia-content-slider .av-vertical-delimiter {
        display: none;
    .html_elegant-blog #top .post-entry .post-title, .html_elegant-blog .avia-content-slider .slide-entry-title {
        margin-bottom: 0;
    .avia-content-slider-inner div .av_one_third {
        margin-left: 2%;
        width: 31.334%;

    Best regards,


    Thanks, it’s working :-)

    1. It’s working but only for 3 columns, if I put less or more columns it’s not working anymore :-(

    2. For the image overlay do I have to put .image-overlay {display: none !important;} only ?

    3. How add an effect on the image as the masonry example ?

    Thanks a lot !



    1- Following code should be adjusted for other column counts as well

    .avia-content-slider-inner div .av_one_third {
        margin-left: 2%;
        width: 31.334%;

    2- If you would like to disable it globally, please go to Enfold theme options > Advanced Styling and edit “Linked Image Overlay” and if you would like to remove it from post slider only, you can use the code as following

    .avia-content-slider-inner .image-overlay {display: none !important;} 

    3- Please add following code to Quick CSS as well

    .avia-content-slider .slide-image:hover img {
        -webkit-transform: scale(1.05,1.05);
        transform: scale(1.05,1.05);
    .avia-content-slider .slide-image img {
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;


    • This reply was modified 3 years, 7 months ago by Yigit.

    Beautifull !! Everything is well working :-)
    Thanks, amazing support !



    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/

    If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

    Enjoy the rest of your day!

    Best regards,

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Post Slider Custumization’ is closed to new replies.