How to Design Custom Blog Page in WordPress with Elementor Pro (Elementor Custom Skin Loop)
Vložit
- čas přidán 20. 09. 2021
- Today I'll show you how to Design Custom Blog Page in WordPress with Elementor Pro and Elementor Custom Skin Loop.
✅Get Elementor Pro:
makedreamwebsite.com/elemento...
✅Get Domain & Webhosting (SAVE 50%):
makedreamwebsite.com/bluehost
✅Get Custom CSS code snippets:
makedreamwebsite.com/how-to-d...
✅Get creative templates on my Template Shop:
templatish.com
In this tutorial, I’ll show you how to customize blog page in WordPress using Elementor. Normally, when you’re using a free theme your blog page looks super boring, and honestly speaking it’s not enough to attract your visitors. I’ll show you how to transform the look and feel of your blog page to a custom blog page in Elementor. And here each of the content, the layout and everything is 100% customizable. I’ll show you how we use Elementor Pro to create beautiful blog page and additionally here we'll also see you how to design the Elementor post loop layout and how to create special hover effect by applying some tricks. Then, finally I'll make the page fully responsive for all of the devices.
First, we have created a custom blog page template and add a banner inside our blog page. Then, we included all the blog posts by using the Archive Posts widget. Here, we also use the Elementor Custom Skin plugin to make a custom loop template for our each blog post. With this plugin, we can customize the content and layout of the individual post grid with Elementor Editor. So, from the custom blog page loop template, we have created a custom blog post design. We have also add a load more button at to bottom to load more blog posts.
Then, additionally we also add an awesome hover effect with some cool tricks and using some custom CSS codes.
After that, we make it responsive for all of the devices. We have also add an additional breakpoint (laptop) to make the layout for perfect.
So, that’s how you can design blog page in WordPress by using Elementor. If you enjoy this - blog page design and Elementor Custom Skin related video, don’t forget to like and subscribe. I’ll see you on my next.
This is one of the most amazing Blog Post tutorials so far.. Thank you.
Wow, thanks!
1min. No bullshit. And it fixed my issue. Perfect! Thank you!
I am inspired. God bless the day I fell on your channel 🙌🏿
Thank you
This was such a great vid! Excellent
Thanks
Great job!! Many thanks!
Thank you too!
Beautiful. Man you are the best. You earned a subscriber. God bless
Thanks 😇
thank you so much!!! i love it
You're welcome
Awesome tutorial, thanks a lot! Can I add a title (See article) to appear on each blog post? It wouldn't be a dynamic tag, but the same text on each article. Also, this plugin looks really complete. It is possible to use the loop grid that is now available in Elementor for the same effect? I need the post title and the "See article" to appear on hover along with a semi-transparent background overlay. Your CSS could work again, right?
Thanks a lot!
You're welcome!
What is your MOST recommended plugin for media manager, and file manager fir WP6? Please share.
Hello! Thank you for this video. I have a problem at 20:36. When I paste the code it doesn't move up and it somehow pastes the post loop template into the second section below. When I check the css code of the second section, it's gone and if I paste the code again it just adds another loop. I would be so thankful if someone would help me, cheers!
edit: I didn't put the CSS classes ''post-hover'' if anyone had the same problem
Excellente video, but the custom css doesn't seem to work for the hover part. My post is only showing a blue color
Can also add some gorgeous shadows to the boxes :)
Awesome Dude!
Thank you
I have some problems with the layout. For some reason the first blog post and second back is spread horizontally too big can't be clicked, any idea what could be going wrong?
Awesome!
Thank you 😊😊
thank you thats great
You're welcome!
This is amazing... Please do more designs tutorials focusing on layout design. Thank you
You're welcome... Yes, I'll try. All of the images I have used here from unsplash.com and those are free to use.
wow.... great work
Thank youuu..
dosnt work the last code, i mean when you paste the 5. Code snippet in Custom Loop 3rd Section: dosnt visualize well in the other page!!! D: you know how i can fixed? the padding of the boton in the page ?
Really liked this archive blog post setup, but right now i am struggling with my button, it looks good in my builder, but when i visit my website it doesnt work in the right way... Does someone know this problem and how to solve it?
Thank you in advance!
Very good video!
Thank you Visualmodo ❤️
Can i use this with loop carousel widget, i tried but css didnt work
Bro why your channel is so underrated 🤔
Good Job Really
Thank you
Can we show specific type of posts ? If i want to exclude a category how can i achieve this ?
Hello Bro can We just make the entire Post clickable I was Guided with this Video perfectly but it is very difficult to click the links .
Please How do I make the entire Column a Post Link URL ?
Please share a video where we can add tranlation in any language throuth coding without plugin.
hope you will share
Hello Everyone. I am getting unwanted date URLs because of my blogs. I have already tried going to Settings>Permalinks and selecting the "post name" option but it does not work. The date URL is being created because of the published date of my blogs. How do I remove those automatically generated URLs?
Great video! However, my images seem to be to large for the blog design. Your images seem to fit perfectly within each one? How do I fix this please?
Can you email me your page link so I can figure out the issue
Great video! Would it be possible to have a tutorial to add a filter and search box to make it more user-friendly? I feel like when there is that many blog posts it is really required.
Yes please!
Great suggestion!
Yes please I have been trying to create a custom drop down filter for listing cat's
Hi bro , i have a problem with my pagination it's not appear in my blog , please if you can help me ! thanks
Very cool design, I would like to see how you would tackle the single post page, customly.
Ok, I'll try to make that soon.
@@MakeDreamWebsite i am still waiting for that
@@SleepySweetDreams I've already made it. you can check this - czcams.com/video/_8QRAEOmjgM/video.html
I made this blog disain to my website, but now the SEO is bad. It does not find my blog posts in google search. Have you had this problem?
Hey there my friend. this might be silly question but im having a problem. when i add my post tile widget, it pastes custom loop template. what am i doing wrong. btw you have an amazing eye on design. i just subscribed and i will be studying your every move. thanks my friend and looking forward to your reply!!!!
Many many thanks. Maybe for some unexpected reason your - post title widget don't work properly. So, another thing you can do, you can take a normal title widget and from the dynamic tag option set it to: post title.
Hello! Nice tutorial. I have a problem with the button that click on image, when I paste that code it s display only on the middle of the post, where I do wrong?
You can email me your page link
Hi! I am getting this error after applying custom skin to the plugin, could you help me out?
Warning: Trying to access array offset on value of type bool in C:\Users\*****\Local Sites\mysite\app\public\wp-content\plugins\elementor-pro\modules\dynamic-tags\tags\post-featured-image.php on line 36
Question the end part the button Link I keep on getting the button and section under the posts even thou the back end is has been aligned correctly any thoughts why ??
Did you find a solution?
Hello, this tutorial is wonderful. Pretty much succeeded, everything is looking good but whenever I'm clicking "Load more" button, the next series of card are showing thin... Like out of proportion and I don't understand why. I mean if it was CSS issue, it would be the whole archive post widget but no... Some have encountered this issue or ? Would gladly need help !
You can email me your page link
I have some issues, when I published loop and did “archive post” title of my blogs suddenly disappeared, can you help me out with that?
You can email me your page link so I can figure out the issue
I wonder, can't you do this with a flipbox widget in a custom loop and use the dynamic tags to pull the post data?
Yeah, That's also another way, but flipbox option is limited. You can't put anything (as you wish) on the front and back side using that widget.
@@MakeDreamWebsite yes I know, but you can use the functionality of the flipbox (or even CTA) so you don't need CSS for this type of design. Anyway, I haven't test it yet, but I'm pretty sure you can pull the post title, image, exerpt and meta data.
Yeah, that's also great. Then, you need to write custom CSS code..
@@MakeDreamWebsite huh, no you don't. You can use the inbuild functionality of these widgets.
Many things he can do using elementor pro feature but he didn't. He just using CSS again and again.. 😂😂
Where can I get that background image please?
BTW, thank you, looks gorgeous, amazing work :)
Thank you! You can get them from Unsplash.
I’m having some issues with the design. For some reason, the first blog post is extending horizontally, overshadowing the others. Any idea on what could be going wrong?
Can you share the link of your page. So I can figure out the issue..
Having this same issue... Please sir, help provide a fix
@@digitaljunkie2799 Let me check. I'll tell you update later
@@MakeDreamWebsite Alright sir, expecting that.
@@MakeDreamWebsite Thank you. Just sent an email.
great done! I am inspired very much. But for me to creat in so long journey, I have no enough patience. Can you save this as a template and let us to download. You deserve to charge a price.
Thank you for your interest. But, I have already deleted that template 😥 From next time, when I'll create anything, I'll save them as template. Feel free to contact me for that😊
Is it possible to create this blog website with free elementors
You can create the default theme design with Elementor Free
hi can i only show case only sub categories here?
From the post widget settings, you can specify a specific category...
@@MakeDreamWebsite hi thanks for replying, i want to only show sub categories which are link with the current parent not their products
As i have 120 parent category so do i need to create 120 pages?
No, for all categories you can create 1 category page from the theme builder
@@MakeDreamWebsite i have tried its showing same category many times
Video is good but you did not teach us about the CSS. If we don't know how to use css in this. How can we can create thi..
Thank you for your appreciation. In this tutorial, if I teach all the the CSS code snippet, then the tutorial would be so long. That's why I skipped that part. For the next time, I will also try to explain CSS if possible.
Can I buy this template from you? :D
I don't have this ready yet... I'll inform you if I have this template...
Bro upload its next part, custom post page, contact page, and about page.... 😊
Ok, I have a plan to upload a full blog website. Stay tuned...
@@MakeDreamWebsite Ok bro❤️
What if i do not know css
You don't have to know, just copy and paste the code from my website
bro how to add filters on it?
On the post widget there is an option query id: where you can add the id of your custom query. Which you can do with the help of writing some php code...
@@MakeDreamWebsite ok bro but can u help me actually i dont know coding
The Title should be name 'How to Design Custom Blog Page with a Dancing Mouse'.....the tutorial is good but your mouse makes me dizzy.
I'll try to keep it stable...