Dynamic Series #02: Archives Template in Elementor PRO

Подписаться 32 тыс.

Просмотров 63 тыс.

50% 1

Building static pages with Elementor is a piece of cake job. However, WordPress is actually made to deal with the dynamic content, and it wouldn’t make much sense if Elementor is not prepared for that kind of a deal as well. How to compose dynamic templates for a single post, archives, custom post type, custom taxonomy? How to use Elementor’s dynamic fields? How to get rid of expensive “premium” WordPress themes and build websites on the budget?
You can learn all of that by watching my Dynamic Series video tutorials.
Sharpen your Elementor skills without spending a dime!
Hello Elementor parent theme:
wordpress.org/themes/hello-el...
Download Hello Elementor Child theme:
github.com/oooh-boi/Kariboo-H...
Ele Custom Skin plugin homepage:
dudaster.com/ecs/

Хобби

Опубликовано:

1 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 266

@TheWoodyTiger 4 года назад

It's nice to see the channel, where we not only have a tour of the available functions, but the author can really do something specific and amazing. And every time he shows some great tricks. This is a whole new level in all this flood of "guides" on YT. Thanks a lot!

@adnanamin1843 3 года назад

This is exceptional! I haven't found such clean and creative tuts anywhere in RU-vid! Appreciate your efforts. :)

@wisdomisaac7819 4 года назад

Oooh Boi you're the man! I love the depth of your tutorials. Good work man!

@donnacasey8524 4 года назад

This is so USEFUL!! The default archive loops are so boring but I wasn't sure how to create something more interesting and here it is. I love your channel and thanks for sharing such great info! :)

@JonathanSachs99 4 года назад

Love this guy so much! Love listening to his gentle accent, patient presentation from basic to deep stuff, brings you right along. I learn stuff each time, even about how to think about Elementor. Huzzah!

@OoohBoi 4 года назад

Thanks, buddy, that was kind!

@leonardliu3028 2 года назад

it took me quite some time to understand well, I had to watched again and again, but it's worthy! Better also explain "loop items" and "archive posts" with pictures, thus easier for non-English speakers!

@bennguyen750 4 года назад

Awesome man. Been sitting here waiting for another video from you. Insane value yet again.

@russelllogan9305 4 года назад

Finally a blog design that simply works, looks good, and is responsive. Very good presentation. Many thanks.

@OoohBoi 4 года назад

Glad you like it!

@kylebennett5977 4 года назад

Thank You for this video! Without it I would have never found this plugin!!

@jasonbeard 4 года назад

I luv it when ONE rules them all, bring it onnnn!

@JoeGator23 3 года назад

You Sir are kick-ass at opening up the possibilities of Elementor Pro for us... they should hire you to explain these concepts and tools, you're great at it. Nothing worth doing is easy, but I would have never figured this out without you.

@OoohBoi 3 года назад

Thanks mate, I appreciate your feedback!

@MattyPod27 4 года назад

Very cool, thanks for taking the time doing this ! Waiting for the next episode :D

@blagojelukic 2 года назад

This guy knows his ......The best i have seen on RU-vid..hopefully more videos!

@magnusdahlbacka2169 3 года назад

You just earned yourself a new subscriber! Outstanding teaching, clear, compact and right to the point!

@OoohBoi 3 года назад

Welcome aboard! There will be more...

@chronobytes971 2 года назад

Very profound tutorial. You are the king of elementor.

@victoriagabaldon8469 4 года назад

Great info! Great Tutorial and helped me find little elements I was not aware of! Thank you!!!

@ludovicverbeeck 2 года назад

As always when I need a solution, oooh Boi is the man! this little plugin Ele Custom Skin is amazing! Thanks!!!!

@stevechong65 2 года назад

Just superb! I was designing a photography website to showcase the work of the photographer. I have many categories to display, such as portraits, landscape, still life and etc. By using this method, I only need to create the categories and create a link and point to this template, and it works beautifully! Thanks Boi!

@2woodpecker 3 года назад

You are an amazing source of knowledge and do an excellent job of presenting and teaching your knowledge and skills. Keep up the good work. Thank you!

@OoohBoi 3 года назад

I appreciate that, and trying my best to keep it alive!

@yanivfel 3 года назад

Ohhh Boi! This video throws my website creation capabilities with Elementor to the next level. Thank you!

@OoohBoi 3 года назад

Glad I could help!

@cabi94andre 4 года назад

BEST FREE LESSON ON ELEMENTOR

@avigailomichael 4 года назад

You're amazing! Thanks! Looking forward to more videos!

@amsuk9163 4 года назад

Excellent stuff! ...I definitely gonna use it for my future projects!

@rukkyneel2174 4 года назад

one of the best channel to do a lot more with elementor pro and other default setting. Thanks brother.

@OoohBoi 4 года назад

I appreciate that!

@2almar2 3 года назад

Awesome! Thank you for publishing your ideas. You've energized the reboot of my website.

@OoohBoi 3 года назад

Happy to help!

@aerialiskites 4 года назад

Excellent stuff! ...which I definetly will be using for my designs! :-) Keep up your great work!

@tektak2513 4 года назад

Amazing tutorials, Keep going man!

@saulomarques6449 3 года назад

I literally love you! It's outstanding! The addon and your tutorial. Thanks a lot!

@OoohBoi 3 года назад

Glad you like it!

@flyinjs1 4 года назад

Oooh Boi what a great design template series...I learned so much...thanks!

@OoohBoi 4 года назад

Well, thanks for watching!

@hosseinkhanmohammadi4770 3 года назад

Very nice. I like your style in web design and the way you teach things. Thank you very much.

@OoohBoi 3 года назад

Thanks buddy!

@megacasiful 4 года назад

You are a STAR!!!! I was looking for that for month........

@aashirch9304 3 года назад

super useful content, i have been looking for custom archive page widget and got more than what was required! thanks

@OoohBoi 3 года назад

Glad it was helpful!

@andonisr 3 года назад

Again, a very nice tutorial! Great you pointed out all the different display conditions that one has to think about with Archive pages! I do agree, Ele Custom Skin, kicks ass :-))

@OoohBoi 3 года назад

Thanks for watching!

@mayaraw850 3 года назад

SPOT ON ajd streight to the point 💫 Thank you 🙏🏼 so much for sharing this knowledge!

@OoohBoi 3 года назад

You are welcome, thanks for watching!

@michellewhittaker651 3 года назад

Great tutorial! So helpful and you made it easy to follow along. Thank you!

@OoohBoi 3 года назад

You are so welcome, thanks for watching!

@priyaranjan279 4 года назад

Highly useful. Thank you Oooh Boi Babai

@darktemplarcm666 2 года назад

This tutorial helped me a lot! Thank you buddy!

@BD-hy8bl 4 года назад

Dankeschön.Oooh Boiii. Keep up the great work.

@murphylee1095 3 года назад

Thanks for the tips on using an additional add-on. A big help on designing my own.

@OoohBoi 3 года назад

Glad to help!

@maksym9228 4 года назад

Amazing, thank you for awesome tutorial!

@moabdullah1343 4 года назад

You're an absolute legend mate. You've saved my ass for sure buddy. Thank you.

@OoohBoi 4 года назад

Oh, glad to read I did! Thanks for the feedback!

@bang-bangtv1116 3 года назад

oooh Boi ! best tutos ever ! thx !

@MsVision2000 4 года назад

Super useful! That is what I needed right now :-)

@tonnykibiwott3725 4 года назад

Thanks for the tutorial G.

@cbserey 3 года назад

Great tutorial Oooh Boi thank you !

@joychetry 4 года назад

07:20 Here's the CSS Code /* Rotating Object - Heading Text in Elemenetor */ selector { writing-mode: vertical-rl; transform: rotate(360deg); }

@kirank5281 4 года назад

For mobile view?

@nisoPlay 2 года назад

Superb, your legend, keep going, waiting for next tutorial 👍

@zipitrik1 4 года назад

You SAVED me !!! I'm totally broke right now, but I will find a way to buy your own plugins to support you and give you more than a thumb up , you rock I've been looking for a way to do that for days. Thanks again, YOU rule them all :)

@OoohBoi 4 года назад

Glad to read I saved you, no worries for the rest!

@Phoenix_Arise_J 3 года назад

Oh my! And you are saying hopefully you learned something from this tutorial? Well, thanks to you I've learned a lot!

@OoohBoi 3 года назад

I hope so, thanks for watching!

@MrJohntra 3 года назад

Great layout skills. Thumbs up!

@OoohBoi 3 года назад

I pozdrav, naravno!

@MrJohntra 3 года назад

@@OoohBoi veliki pozdrav :)

@wgm247 4 года назад

This is worth its weight in gold

@loucassoteriou576 4 года назад

Awasome friend...thanx a lot for the amazing video

@marielaquintero 4 года назад

Thanks for this awesome tutorial!

@OoohBoi 4 года назад

Glad it was helpful!

@rutiklex 4 года назад

Very helpful, I have been trying to figure out how to customize the Elementor "posts" feature for a while now. Thank you!

@OoohBoi 4 года назад

Glad it was helpful!

@tomaseklund2299 2 года назад

Not only is this tutorial extremely useful, handy and all around helpful - but the designs Oooh Boi are creating while just demonstrating functionality are absolutely stunning and very creative too. The functionality of the plugin mentioned in this video should absolutely, undoubtedly, definitely be in Elementor Pro Core. This video is now two years old and I wonder if Elementor Custom Skin still is the best plugin for this purpose, or if something else might have popped up? Why haven't I learnt of this sooner?

@mateenmehmood4778 3 года назад

Awesome Content. Ooh Boi

@nayeemahmed163 4 года назад

Just awosome. ❤️❤️

@chrakesh5181 4 года назад

This is what am looking for... thanks

@silveriomazive3440 2 года назад

Already Subscribed. Thanks

@abdullahalmaruf7852 4 года назад

Thanks for this tutorial...

@camerafamilyikinderfotogra6808 3 года назад

Thanks a lot for the series! So much to learn from you, thanx!!!! Looking forward to #3 and #4. Are they still available?

@OoohBoi 3 года назад

Well, certain things have changed with Elementor 3.0+ and I'll make the rest. Sooner or later, of course!

@seo2marketingdigital688 3 года назад

Excelente! gracias😎👍

@muhammadehsan5355 4 года назад

Amazing.

@rodlivz 2 года назад

Such an amazing Tutorial, no one is doing such amazing tutorial like you do, thank you. Are you going to create the other 2 videos in this series?

@OoohBoi 2 года назад

Thanks! I wanted to do the sequel as well but back in a day something was wrong with the CPT in Elementor, and I gave it up. Anyhow, the topic is still in fashion and I'll give my best to finish up the series.

@versanews9867 Год назад

awesome ! :)

@jasminem360 4 года назад

this video saved my life！

@OoohBoi 4 года назад

OMG, I'm so glad if it did!

@pellekarlsson152 4 года назад

You are awesome Oooh Boi I hope you can do ACF, Custom Type and FacetWp filter videos ! I use ACF and Custom Type but the "slug" does not shown in custom fields in Elementor Skin and why do I have preview with 4 images can I disable preview in Eleemntor skin template loop, how do I do motion effect on the image when I hover it on archive page?

@yogiselevate 4 года назад

More Dynamic Series please.

@blindmanche Год назад

Great tutorial Would love to know now how to filter

@sharonkhor7433 4 года назад

Hi like your vid. Just wondering why you need a archive loop instead of a plain archive. Thanks

@godgrace467 Месяц назад

thanks bro what a tutorial hatts of iam looking for something other query and found this video solved many issues. but one question ihave create webstories and tag with new categories but idont know why? those category not visible in wordpress new created menu for webstories menu bar any solution ? . and can we do same with webstories as you done for post categories template condition for all in one for just webstories archieve?

@sunflowerhk100 4 года назад

I have successfully created an archive template for my blog posts following your video :) THANKS!! But I have a problem with adding the social media share buttons in the archive template. For "target page", it gives me the option of "current page" or "custom". Since I will be using the archive template on my front page, it would be incorrect to set share buttons' "target page" to the "current page" (which will be just sharing the front page). How can I make the social share buttons to share the individual blog post?

@BlogEvent 4 года назад

Thanks!

@jdlitson 3 года назад

Great!

@koonhungmak7302 2 года назад

Excellent tutorial on Elementor Pro with Ele Skin and Loop template inside Archive Template! It works on WooCommerce too (Post as Products (Product Archive Template instead of Archive Template)) For some themes, there are some widgets to change the Sort By (eg. Latest, average_rating, Title) and toggling between List Mode (Single column) & Column Mode (2 or more columns), is there any way to add these 2 widgets to the page? Thank you very much.

@funnyfromadam 2 года назад

Does it also allow to edit existing archives or just archive templates created with this add-on? Thanks.

@neil78 4 года назад

Great video. This cleared up a lot for me because I was confused at how limited the default Elementor post controls are. Just a question about the loop itself. You did a single loop per row but if I wanted let's say something that would look good in a 2 column archive layout would it be designed as a 50% column loop? Also can the loops be used to load posts into a page as well? I have a static page that I would like to load posts into for a portfolio. Thanks

@OoohBoi 4 года назад

I always reply with "give it shot and see what happens". I'm doing that all the time and I always end up with something unexpected.

@imranhossain7873 2 года назад

where are the other two? your tutorial is good.

@nayandas-jy6tw 3 года назад

Thank you so mutch

@OoohBoi 3 года назад

Any time

@Sunny-uf5nd 2 года назад

How did you pull a value for reading_time? I want to add that to my single post pages but I don't know where to start creating the meta data from

@wzafar77 4 года назад

hey can you make a quick video on ele skin custom grid option and what is the use of that

@leonardliu3028 2 года назад

I want to customize the loop item design thus on hover another image is displayed. I already set an ACF filed image "hover image", now on hover another image is displayed, but it's not displaying correctly, it's only displaying the upper left corner part of the image, even though I already set the image size to "container", don't know why? Can anyone help? I already tried two ways, one way is to set the cover image in the column background, another way is to use the flipbox widget.

@JaySnow 4 года назад

Awesome videos - watch both and get a lot of new things! One question: in some cases you choose div, in other - span. What`s the criterion?

@ioriamt9774 Год назад

that's amazing but... where are #3 and #4 of the serie... I am really looking for them

@pellekarlsson152 4 года назад

Awesome video Oooh Boi! please more ACF dynamic with Elementor pro videos:)

@OoohBoi 4 года назад

I had to pause or postpone this series until Elementor gets better with Custom Post Types. It still depends on the third-party add-on but that might change soon.

@pellekarlsson152 4 года назад

@@OoohBoi Yes it would be nice and more customize cart and checkout page in woocommerce:)

@OoohBoi 4 года назад

@@pellekarlsson152 Not just WooCommerce mate, WooC is kinda well covered by third-party add-ons but rather just an "everyday custom post type"...

@pellekarlsson152 4 года назад

@@OoohBoi Do you why image does not showing in elementor editor mode? I can't see it but when preview it in the browser it works fine. (This case single product image) Can ! force editor with css?

@OoohBoi 4 года назад

@@pellekarlsson152 Are you telling me that no images are getting displayed in the editor? That's kinda strange mate, I haven't seen it before nor experience anything alike. Did you try to reinstall Elementor or use different Browser to run Elementor at? Not sure about the theme that you use, is it Hello Elementor or else? In case there are some add-ons or third-party Elementor plugins active try to disable temporarily and see whether it helps.

@juliascanlon8083 3 года назад

hi, seriously brilliant tutorial! thanks so much and love your work! Only have one challenge with using this approach. I hope there is a simple solution or some trick I'm missing? :) I would like them all to be the same height, no matter how much copy there is. How do you do that? At the moment the height of the loop output varies depending on the length of copy... 🤔

@OoohBoi 3 года назад

Thanks! You could "lock" the height of the wrapper (column or section) but hence you're dealing with dynamic content, what's the point of keeping the height locked? Isn't there a chance that the content gets cut off due to that reason?

@aleksandrbakharev5199 2 года назад

thanks

@sigridthomas1347 3 года назад

What a great plugin, and very well explained, thank you! Any chance to make the whole blog-post item link to post URL without switching to custom skin pro? some magic css maybe? I'd say for UX reasons the picture should link to blogpost as well, not only the title.

@OoohBoi 3 года назад

I think that Teleporter can help you with making the entire column clickable - if that was your question. Teleporter is one of the extensions that are the part of Steroids for Elementor.

@chrakesh5181 4 года назад

How to view posts or archives date wise..like if we had three posts today. The data should be heading and posts should be under the date

@prof.cipolla7039 2 года назад

Great class. o you have any video about how to include a FAQ in product page? A diferente one, depends of each category the product is.

@OoohBoi 2 года назад

Thanks buddy! Sorry, no such video yet, I actually never did a video on the WooC topic 😁

@ravindersharma1604 3 года назад

Sir GREAT loved this style a unique one. After watching this I created one for myself the Archive Post was looking great. Have one question if possible please answer when I try to insert the template on the Blog page it is not behaving properly. some times the image becomes blank or sometimes the text but if I view the template it shows every thing. Maybe I am missing something. Please Help

@OoohBoi 3 года назад

My friend, I can't know what's happening on your own machine but something is obviously wrong. I usually start all over when things don't look right over and over. Elementor can be really stubborn when it comes to caching tho...

@medodoha84 4 года назад

Thanks for this tutorial and I have a question Please. How to Create a Grid/List Toggle in WordPress custom post types archive pages? Thanks.

@OoohBoi 4 года назад

I don't think that's possible in Elementor by default, something like that would require an add-on, some kind of Posts widget extension...

@DrKarenHoving 4 года назад

Brilliant! As a elementor neophyte (I'm on my second personal website but STILL clueless) a question: I set up a header for my blog section...the archive page doesn't affect that correct? ALL that amazing stuff is how the archive is presented below the header (I was a bit confused when you picked a picture to put all the other stuff on...). I adore your videos...omg so many questions. Can we be new best friends??? LOL thanks as always...amazing!

@OoohBoi 4 года назад

The archive page does not affect any header and you can have as many different headers as you like. All you gotta do is to handle the Display Conditions for each of them. And yes, of course we can be new best friends. We have always been best friends but sadly you don't remember me. However, the present life wouldn't have much sense if we remember all the past lives, right? 🙄

@pierrejoubert394 3 года назад

awesome great video. Question: I want to do something similar but create a carousel section from posts. Any advice on this?

@OoohBoi 3 года назад

I think I've seen the plugin that allows you to create the Posts carousel/slider. However, I'm not sure you can create/design your own carousel item (like with the Ele Custom Skin add-on). It would be great to have a feature like that built into Elementor tho...

@pierrejoubert394 3 года назад

@@OoohBoi just did some reading up. Seems like their Pro version has this feature.

@designsosimple2269 4 года назад

Downloaded child theme from above link, but upload to my site failed because it said it was missing the CSS Style Sheet. Where can I get this theme complete with everything please?

@OoohBoi 4 года назад

In WordPress, you can’t install and activate the child theme unless parent theme exists. It should only exist (be installed) because the child theme relies on the parent theme “style.css”. A child theme can be taken as an extension of the parent theme rather than a replacement. Hope it makes sense.

@CreativeRamy 2 года назад

im new to elementor and just found this video - i will watch the other in the series. But it seems there isnt a in depth overview of elementor to give a newbie the basics of incorporating theme builder as a foundation before doing anything. I assume the theme builder is to set up ones own custom designed 'templates' which then add to other pages or posts.. i could be wrong.. i dunno

@marcusburnett890 3 года назад

What happens if you want to retain the 3 items across layout? Should you design the custom skin in only one smaller column or shrink the section down?

@OoohBoi 3 года назад

Did you mean 3 posts per page? If true, then go to WP Admin, Settings > Reading and reduce "Blog pages show at most" to 3.

@firozfaizan 4 года назад

Great !!! Will you please also mention how we can achieve the archive template to show each row with alternating left and right featured image with content, ie one row with left image and content on right and second row with right image and left content and so on. Thanks in advance.

@OoohBoi 4 года назад

Alternating templates feature belongs to Ele Custom Skin PRO version which means it's not available in the free version of this plugin. No matter what, I'm having a plan to make something quite close to what you've mentioned. So stay tuned.

@firozfaizan 4 года назад

@@OoohBoi Thanks for your reply