Tagged: reviews, testimonials
-
AuthorPosts
-
January 15, 2023 at 10:29 pm #1378799
Love the enfold theme! good work!
There is however a functionality that I think is present in some building blocks of enfold, but not in the testimonials block, which only offers ‘arrows’ ?
I would love to have a dots navigation under the testimonial slider. Can I somehow utilise that function as a navigation for testimonials, for it to appear under the content of the testimonials?Hereby an example:
example- This topic was modified 1 year, 8 months ago by the_digital_manager.
January 15, 2023 at 10:44 pm #1378802Hey the_digital_manager,
Try this modificationBest regards,
MikeJanuary 16, 2023 at 8:52 am #1378823here is an edited testimonials.php on basis of the newest enfold : https://pastebin.com/9hje0Pg5
you can see here some styling including the dot navigation: https://webers-testseite.de/testimonial-styling/
for the dots in quick css:
.responsive #top .avia-slideshow-dots.avia-slideshow-controls a { display: inline-block; bottom: -20px; } /*** if you like to show the dots always synchronized with the arrows - not only on hover ***/ .avia_desktop #top .avia-slider-testimonials.av-slideshow-ui.av-nav-arrows-visible .avia-slideshow-dots a { opacity: 0.5; } .avia_desktop #top .avia-testimonial-wrapper.avia-slider-testimonials.av-nav-arrows-visible:hover .avia-slideshow-dots a { opacity: 1 }
- This reply was modified 1 year, 8 months ago by Guenni007.
January 16, 2023 at 12:44 pm #1378847January 27, 2023 at 12:53 pm #1395560@guenni007 thx for sharing, but I got countless of errors when I tried your php file. It started with an error about the lines with the code ‘protected funtion’. The enfold error code stated that these had to be changed to ‘public’. When I did that for all the public lines, after which I got several other error codes,.
So, I tried the route @yigit proposed, I made a testimonials.php in the shortcodes folder and added the code to the child theme functions.php. I also added the CSS. Which changed nothing on the homepage, see https://schoonheidsinstituutdiane.nl/ section ‘hoe mijn klanten mij beoordelen’. What am I doing wrong?
- This reply was modified 1 year, 8 months ago by the_digital_manager.
- This reply was modified 1 year, 8 months ago by the_digital_manager.
January 29, 2023 at 1:43 pm #1395802Hi,
I found that the file Guenni007 linked to added the navigation dots to my testimonial element, this is the steps that I followed to add it to my child theme. First I ensured that my child theme functions.php had this code:function avia_include_shortcode_template( $paths ) { if( ! is_array( $paths ) ) { $paths = array(); } $template_url = get_stylesheet_directory(); array_unshift( $paths, $template_url . '/shortcodes/' ); return $paths; } add_filter( 'avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1 );
Then via FTP I added the directories /shortcodes/testimonials/
Then I downloaded Guenni007 linked file above
and uploaded it via FTP to my child theme testimonials directory so the structure from my child theme is like this:
/enfold-child/shortcodes/testimonials/testimonials.php
Then the css I used is:.responsive #top .avia-slideshow-dots.avia-slideshow-controls a { opacity: 1; } .avia-slideshow-dots a.active { background: #b0b0b0; } .avia-slideshow-arrows.avia-slideshow-controls { opacity: 0; }
This shows the navigation dots always and hides the navigation arrows:
Thank you Guenni007 for thaking the time to edit this file and sharing it with us 🙂Best regards,
MikeFebruary 3, 2023 at 11:49 am #1396533@mike @guenni007
thx a lot! I didn’t place the testimonials in a folder with that name, perhaps that was the cause of the error, or perhaps the order I approached this (first uploaded the file, then added the code to functions.)Anyways, it’s getting there! I’m only struggling with overlap between the nav-dots-slider and the element/content that comes under it. I’m trying to tackle this by the following css, but I can’t seem to get it right. see https://mondzorgcentrum-winschoten.nl/ontmoet-ons/
.avia-slideshow-dots { bottom: -40px; padding-bottom: 20px; }
can you advice?
February 3, 2023 at 2:55 pm #1396548Hi,
Try adding this css:#top #team .avia-slider-testimonials.avia-testimonial-wrapper { overflow: visible; }
BTW, I couldn’t see your not-active dots because they are white, you might want to use an off-white so they will show like this:
.avia-slideshow-dots a.goto-slide { background: #ccc; }
Please see the screenshot in the Private Content area for the results I received
After applying the css, please clear your browser cache and check.Best regards,
MikeFebruary 3, 2023 at 5:47 pm #1396570@mike, the overflow works, thx!
I added this code to change the colours
.avia-slideshow-dots a.goto-slide.active { background: #003e78; } .avia-slideshow-dots a.goto-slide { background: #969696; }
the dots aren’t centered yet though.
Also, is it possible to add arrows next to the images? to make it more clear that users can ‘swipe’ ?
- This reply was modified 1 year, 8 months ago by the_digital_manager.
February 3, 2023 at 7:58 pm #1396580Hi,
I see that you have this custom css:@media only screen and (max-width: 767px){ .myslider { margin-left: -40px; margin-right: -25px; margin-top: 25px; margin-bottom: 0.5px; } }
To center the items please change it to this:
@media only screen and (max-width: 767px){ .myslider { margin-top: 25px; margin-bottom: 0.5px; } }
and then add this css:
@media only screen and (max-width: 767px) { .responsive #top #team .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial { padding: 0; font-size: 0.85em; display: flex; justify-content: center; } }
Then to show the arrows remove your custom css:
.avia-slideshow-arrows.avia-slideshow-controls { opacity: 0; } .avia-slideshow-arrows { display: none !important; }
Then add this css:
#top #team .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a { opacity: 1; }
Please see the screenshot in the Private Content area of my test results.
Best regards,
MikeFebruary 3, 2023 at 11:19 pm #1396612seemed like i messed up my CSS a bit along the way haha, thx!
bonus question, answering this will result in me purchasing another 2 yrs of enfold support at least or an amount of donation to the enfold team, whatever your team prefers.how do I get the arrows to be centered in the photo, just on the side of the image? so it looks neat.
February 4, 2023 at 5:07 pm #1396667Hi,
Try this css:@media only screen and (max-width: 767px) { #top #team .av-large-testimonial-slider .avia-slideshow-arrows a { top: 88px; } }
Best regards,
MikeFebruary 15, 2023 at 8:49 pm #1398133Hi @mike, I’m trying to accomplish the same on another enfold site of mine, see https://schoonheidsinstituutdiane.nl/. but I am struggling for 2 hrs to get the image centered, make the arrows visible (they seem to be hidden at first, can’t find this in the CSS… and the previous given code to centre the arrows doesnt seem to work. what to do?
February 15, 2023 at 9:31 pm #1398135Hi,
For the new page for mobile up to 450px please try this css:@media only screen and (max-width: 450px) { #top .avia-testimonial-content { width: 100%; } #top #main .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a { opacity: 1; top: 12%; } }
Please see the screenshot in the Private Content area of the expected results
Best regards,
Mike -
AuthorPosts
- The topic ‘Add dotted navigation to testimonial block’ is closed to new replies.