Blog Post Carousel with No Extra Plugin - Elementor Wordpress Tutorial
Vložit
- čas přidán 21. 07. 2024
- Get that auto-scrolling carousel of blog posts.
Add this CSS to make the scrolling smoother:
(Thanks to Zoe Tame for the code)!!!!
selector .swiper-wrapper{
transition-timing-function: linear !important;
}
Blog Post Carousel with No Extra Plugin - Elementor Wordpress Tutorial
-----------------------------------------------------
- Get Code Snippets: r.freemius.com/10565/3304295/
- Get Elementor Pro: be.elementor.com/visit/?bta=2...
- Get Elementor Cloud Hosting: trk.elementor.com/bapnesbbfa9...
- Support us: paypal.me/Websquadron
- Mastery Membership: websquadron.co.uk/web-design-...
Hire us to work on your Website!
Contact us at info@websquadron.co.uk or visit websquadron.co.uk
- Facebook: / websquadrontraining
- LinkedIn: / imran-siddiq-7320a74a
- Instagram: / batswebsitedesign
- Twitter: / imranwebsites
-----------------------------------------------------
Equipment Used:
Softbox Lighting Kit (to focus main light onto me in a dark room): amzn.to/3feqH18
Soundproof Panels (to provide a dark setting, and prevent sound bounce): amzn.to/3HVfwqa
3m Ethernet Cat 7 Cable (to maximise the Internet Connection as the room is upstairs): amzn.to/3GlBvGw
Anker 6 in 1 Adaptor (for the Macbook Air to increase USB-C, USB-A, HDMI, Ethernet Ports): amzn.to/3tiukLA
USB-C to Lightning Port Cable (from my iPhone to my Macbook Air): amzn.to/3K2tGaU
Powerline Adaptor (boosts internet connection from downstairs 380mbs to the upstairs room 120mbs): amzn.to/3r8YcYc
Floodlights (positioned to glow onto the walls): amzn.to/33mRqWD
LED Light stands (either side of me): amzn.to/3Iaerez
Fifine Dynamic Microphone: amzn.to/3osbxu2
Floating Shelves: amzn.to/3Fhxyl1
Hanging Pendant Light Holders: amzn.to/3qgwnhg
Vintage Light Bulbs: amzn.to/3K0bQ8B - Jak na to + styl
This is what I have been waiting for 👍🏻
Amazing use of the testimonial carousel!
Glad you liked it!
Thanks for sharing! The CSS was a great addition too - great stuff!
This is brilliant Imran. Love these videos where you achieve amazing things without using any outside plugins. You're awesome 🙂
Big thanks
This is wicked! Look forward to trying this out sometime soon!
Just amazing. Thank you for sharing!
Very helpful and well-described. Thank you very much!
Very nice! You can control the speed under Testimonial Carousel > Transition Duration. 5500 worked for me.
Another awesome video. Thank you!!
Perfect tutorial boss
This is brilliant
You are incredible :)
I have a slider on my blog that I cant get rid of. How do I replace it with just a normal list of posts? My theme is Blossom Beauty.
Have you tried to use loop grid to build it how you want?
New invention 🚀🚀🙏
Thanks for the tutorial! Maybe you know, is it possible to create a progress bar under the loop items instead of the dots?
Not tried that myself.
@@websquadron Well I found a way to do that and wanted to share it with you :)
I've added the following CSS code and got a nice result -
/* Apply this CSS to the carousel with the class 'custom-carousel' */
.custom-carousel .swiper-pagination {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}
.custom-carousel .swiper-pagination .swiper-pagination-bullet {
width: 30px; /* Adjust the width of the lines */
height: 4px; /* Adjust the height of the lines */
background-color: #ccc; /* Adjust the color of the inactive lines */
border: none; /* Remove default border */
border-radius: 2px; /* Adjust the border radius if needed */
margin: 0; /* Remove spacing */
transition: background-color 0.3s; /* Add transition for smooth hover effect */
}
.custom-carousel .swiper-pagination .swiper-pagination-bullet-active {
background-color: #0073e6; /* Adjust the color of the active line */
}
/* Optional: Add hover effect */
.custom-carousel .swiper-pagination .swiper-pagination-bullet:hover {
background-color: #005bb5; /* Adjust the hover color */
}
Hi, as always very useful videos. Thank you. These short tutorials would benefit by not having 'your' video on display. Obviously for the Intro sign-off we'd love to see you but during the tutorial I'd get rid as its just a distraction. Nothing personal of course :-) hope you don't mind me suggesting this. Cheers J
Noted!
Hi Imran! How do I set the main image that is displayed when a blog post is shared? I've added an image to the hero of the blog post page with social icons below the post, but when I share, it displays something completely different.
Is the image in the featured image?
@@websquadron that's correct! Feature image is set.
@@darktisticstudiosbystanley3162 Is it a brand new post or one that's been out for a while before you changed the image?
@@websquadron Hey Imran, it's an older post. It's a clients site, was very messy. All is well except when they share a blog post.
Will this work with loop template? (Eli custom skin)
Should do.
How would you this do for home page just displaying categories rather than posts
Thanks
Let me double check
@@websquadron thank you it’s one thi one I can’t find an answer to , I know how to display posts under header for instance in a grid but can’t work out how to do categories , doesn’t have to be carousel although looks pretty cool
can i do the sam as a inserted podcast episodes carousel?
Yes, as long as you get the right RSS or feed into there.
Hi Imran, i've done everything like you say, but for me only appears de shortcode as content. it doesn't appear the post thumbnail. What do you say about it?
Are you viewing in preview or on the live site?
@@websquadron In preview
I checked on the live site and it worked! Thank you!
Can it be done with free version of Elementor?
You won’t have the carousel in free
It works great but for some reason my font is italic and wont change it xD...Edit: You have to change in typography of content defaul settings to normal :D.
Is there anything set in the Global typography
Very clever, but it isn't clear how to populate it with different posts. Did I miss it?
That is done with the Query part.
That's selected in each of the 6 templates. See around 3:50 of the video.
Ahh. Thanks.
Feel the pain
Live the grind
I can change
In my mind
Pick a lane
Commit and climb
The only way
To win at life
LOL testimonial Carousel is not free anymore
Are you not using Elementor Pro?