Repeating group logos: Getting started with Bubble (Lesson 1.8)
HTML-код
- Опубликовано: 2 окт 2024
- Section 1 (Lesson 8/10): In this lesson, we’re implementing repeating groups on our marketing page. Repeating groups are a foundational element in Bubble that allow you to dynamically display content, like posts on a social feed, products in an online store, or listings in a marketplace. This functionality is crucial for creating scalable and interactive applications that can handle vast amounts of data without compromising on design or user experience.
In this lesson, you will learn:
• The concept of repeating groups in Bubble and their significance for building dynamic and scalable applications, illustrated with real-world examples like Instagram, TikTok, and Facebook feeds.
• Step-by-step guidance on setting up your first repeating group within Bubble, including how to connect it to your database and configure it to display content dynamically.
• Practical tips on overcoming common challenges associated with repeating groups, like ensuring good responsive behavior, to provide a seamless experience across devices.
Resources folder:
➡ e6387a14ba6d0b...
Bubble editor:
➡ bubble.io/page...
* * * * *
Subscribe to this channel to be the first to hear about new videos!
Bubble is a software development platform that enables anyone to build and launch web applications without writing code. Rather than specializing in one or two aspects of web development (like designing landing pages or building databases), Bubble’s full-stack visual programming interface does it all. That means anyone from first-time entrepreneurs to enterprise-level companies can take an idea from concept to fully functional, scalable reality - faster and cheaper than you could with just code.
Have a question? Please visit bubble.io/support.
Learn more about Bubble:
Homepage ➡ bble.io/rrmDzZ
Twitter ➡ / bubble
Blog ➡ bubble.io/blog 
Наука
From this session it becomes a little more difficult. really good guide.
I like your videos, for this one though I don't know if I'm the only one - I had to replay the 2nd half of this video a few times to make sure I was putting the right numbers in the right contextual as my logos were all squashed and on top of each other. Got it eventually! On to the next video!
Could help me with this?
There are 30 trip places in lifting group. Trip is conduct in order from 1 to 30. And the details of each trip are shown in a popup window instead of on the page.
In this situation,
Is it possible to set up two links in the trip 2's popup page that go to the trip 1's popup(previous) and 3's popup(next)?
Thank you,sir!
My icons were tiny compared to yours when first uploaded. Thought it would get better as tutorial moved on but no
That's ok - just resize them as I do in the lessons. Checkout the demo app if you're struggling. The link is in the lesson description.
Great videos. Thank you Greg ❤️
1:45 i found a mic
Damn 😅
🤣
Great videos. However, I'm confused about the company logos option set part. I can see only the name of the logos but I'm wondering where they are kept or stored. Can someone explain?
It would be great if bubble would implement a workflow that's similar to how webflow handles the responsive design were you design it for one size and it carries on all the sizes smaller. So instead of having different conditionals for each page with you can just modify the parameters right on the element
Mic manifested out of thin air at 1:47.
Hey everyone... I could not edit or add a custom screen size to the screen sizes in the responsive tab of the bubble design page. I need help on what to do and how to do it. or is it only available to paid users?
Do you not see the + button next to the 375px breakpoint?
I followed exactly how you created the option set and setting up the structure for the repeating group. however, after I click on the preview, no logo appears. I may need to re-watch the whole tutorial again. thanks, this is a great video tutorial.
Make sure that the logo in the first cell has a data source - current cells logos img.
Amazing course! one quick question, for any screen width below 479 i get a white gap on the right side of the screen, any clue on why could this happen? thnk you!
Sounds like you have padding or margin set on one of your section groups.
I dont seem to be able to copy paste styles or in this case the option set from the demo app to my app (im on the paid starter plan). to clatify, i can click 'copy' on the demo option set but I dont see a 'paste' option in my app
Add an option set manually first, just one. Call it 'delete me'. Then on top of that first option set, you should be able to right click and paste the one from the demo app. i.e. You need to have an existing Option set to enable the paste option.
One of the confusing things about following along is that, often, my results will be different. I added the "We work with great companies" text element but it stretched the whole width and it can take a moment to work out why it doesn't look the same as yours (because of the fixed-width option for anyone who's wondering). Any reason I don't have the same default options set as you do?
Also, I was confused as hell for a moment as you suddenly went (at 16:44) from editing the repeating group to editing the image. Given that people are going to be looking at their own projects as they listen to you, you REALLY need to be clear on the fact you're changing the element on which you're working.
Bubble rolled out some changes to the way elements behave mid way through creating this course. From Section 3, these changes will be back in sync and my editor will behave the same as yours.
@@gregory-john Ok, now i understand the problems i'm having
Did anyone else notice the mic-drop at 1:46?
Great videos. Great Flow.
Where is the "Demo app"? I can't find it.
In the description
I can't add 576px. Is this a paid feature?
On the responsive editor, next to the 320px breakpoint there should be a + button. You can add breakpoints here.
@@gregory-john Ah, I was pressing "Enter" rather than clicking the little tick icon. This now works, thanks
Greg you are the man.
Editing the Debugger URL does not make it go away anymore. How can I do it?
Change ?debug_mode=true to ?debug_mode=false or just delete ?debug_mode=true from the URL.