- 33
- 80 204
Soap - Bubble Agency
Приєднався 3 вер 2021
We are Bubble.io experts & developers. Partner with us to build amazing apps. We work with clients all over the world.
Hey I am Lucie, co-founder of Soap and Bubble developer/expert. Before becoming a passionate Bubbler I worked in marketing for 10 years.
Hey I am Lucie, co-founder of Soap and Bubble developer/expert. Before becoming a passionate Bubbler I worked in marketing for 10 years.
Intro to Responsive Design in Bubble.io
Bubble's biggest asset - a great freedom to build your own design - is also its biggest flaw.
If you design your app without knowing the rules of responsive design in Bubble, you will end up with an app that is not responsive and you will spend a lot of time fixing those responsive design issues afterwards. 🤯
👀 In this video, I teach you the few simple rules to know to make sure you build a responsive app and how to check that it's responsive. ✅
Here is my Responsive Design Cheatsheet for Bubble:
➖ Page Settings:
▫️ Recommended width page size: 960px
▫️ Fixed width: No
▫️ Minimum width: 33%
➖ 2-column:
▫️ 2 groups of 480px each
▫️ Each group has a minimum width of 66%
➖ 3-column:
▫️ 3 groups of 320px each
▫️ Each group has a minimum width of 99%
➖ For all designs:
▫️ Add a 20px padding for content (text, image, etc.) inside the groups.
➖ Bonus tip: 📱Sometimes, if your mobile design needs to be very different from your desktop design, I recommend you to create a specific page just for mobile. In order for your app to display it on mobile devices, you need to go in your desktop's page Property Editor and to choose your mobile's page in the "Mobile version" dropdown.
If you design your app without knowing the rules of responsive design in Bubble, you will end up with an app that is not responsive and you will spend a lot of time fixing those responsive design issues afterwards. 🤯
👀 In this video, I teach you the few simple rules to know to make sure you build a responsive app and how to check that it's responsive. ✅
Here is my Responsive Design Cheatsheet for Bubble:
➖ Page Settings:
▫️ Recommended width page size: 960px
▫️ Fixed width: No
▫️ Minimum width: 33%
➖ 2-column:
▫️ 2 groups of 480px each
▫️ Each group has a minimum width of 66%
➖ 3-column:
▫️ 3 groups of 320px each
▫️ Each group has a minimum width of 99%
➖ For all designs:
▫️ Add a 20px padding for content (text, image, etc.) inside the groups.
➖ Bonus tip: 📱Sometimes, if your mobile design needs to be very different from your desktop design, I recommend you to create a specific page just for mobile. In order for your app to display it on mobile devices, you need to go in your desktop's page Property Editor and to choose your mobile's page in the "Mobile version" dropdown.
Переглядів: 5 032
Відео
How to Use the API Connector in Bubble.io?
Переглядів 9 тис.3 роки тому
You'd like to connect your app to another tool but couldn't find this tool's plugin in the Bubble plugins marketplace? 😢 No problem! You'll still be able to do it by using the API Connector plugin. Bubble's API Connector allows you to define your own API calls directly in the Bubble editor and use them in your app. 👀 In this video, I'll show you how to install the API Connector plugin and how t...
How and When to Use Custom States in Bubble.io?
Переглядів 3 тис.3 роки тому
When I first started to create apps in Bubble, I was quite intimidated by custom states. I didn't understand when and why I should be using them. 🤔 That's why I took a particular care to make a detailed video about custom states. Custom States are essential to temporarily store information that you don't want to save in your database. 👀 In this tutorial, you'll learn how to use custom states to...
How to Embed your Bubble.io Calculator App on Your Own Website? (3/3)
Переглядів 6 тис.3 роки тому
Here is the iFrame Generator tool I've been using in this example: www.iframe-generator.com/ Even if in some cases it can be interesting to use your calculator as is on your own Bubble page, many marketers are looking to integrate it into another website or blog that is not managed with Bubble. 👀 In this tutorial, I will show you how to embed your calculator in your own blog or website through ...
How to Build a Calculator App in Bubble.io? (2/3)
Переглядів 5 тис.3 роки тому
Building a calculator in Bubble is easy if you follow some simple steps. 👀 In this video, I will teach you how to build a calculator app in Bubble by using the Expression block of the Toolbox plugin. Here is the Toolbox plugin I've been using in this example: bubble.io/plugin/toolbox-1488796042609x768734193128308700
Building a Calculator App with Bubble.io: Intro and Examples (1/3)
Переглядів 2,1 тис.3 роки тому
Have you ever thought of building a calculator to use as a lead magnet? Calculators are a great lead generation tool for both B2B and B2C businesses. 🎯 👀 In this video, I show you some examples of calculators, so you can get inspired. Here are the links of the examples quoted in the video: ▫️ Hubspot ROI Calculator: www.hubspot.com/roi-calculator ▫️ Bankrate Mortgage Calculator: www.bankrate.co...
How to Deploy and Launch your Bubble.io App
Переглядів 8 тис.3 роки тому
Watch my videos 'How to Optimize Your Bubble App for SEO?' & 'How to Define Privacy Rules in Bubble?' before deploying and launching your app. Once your app is built, you will most likely want to deploy it for the whole world to see! 🌎 Before you hit the "publish" button there are a few things to check: ▫️ Is your app working properly and responsive? ▫️ Is it SEO friendly? ▫️ Are you showing on...
How to Define Privacy Rules in Bubble.io?
Переглядів 9273 роки тому
Most apps need different privacy levels depending on the user profile. 🛑 On Airbnb, for example, everyone can see the pictures and the cost of rent of the houses listed. But only owners can see the income generated. In Bubble, you can use conditions to decide the elements' visibility depending on the user's profile. But that's not enough. You also have to make sure that only authorized people c...
How to Optimize Your Bubble App for SEO?
Переглядів 1,9 тис.3 роки тому
Wondering if it's possible to optimize your Bubble site or app for SEO? It is definitely possible! 👀 In this tutorial, I'll show you all the actions you can take for a well optimized website for SEO: ▫️ ad H1, H2, H3, tags, ▫️ edit your title and meta descriptions, ▫️ customize your URLs, ▫️ etc. ➡️ More on that in the video!
How to Install and Use Plugins in Bubble.io?
Переглядів 2,1 тис.3 роки тому
If you're a marketer, I'm sure you already use plenty of tools, and you would like your Bubble app to communicate with your existing tools. ⚒️ 👀 In this video, I will show you how to connect Bubble to your existing tools thanks to plugins. The plugins of the main tools used by marketers are all available in the Bubble marketplace. ➡️ Check out the video to find out how to install them!
How and When to Use Repeating Groups in Bubble.io?
Переглядів 5223 роки тому
Repeating groups are one of the Bubble topics that may seem a bit scary at first. And yet, they are essential if you want to display lists of elements dynamically. It can be useful to display a marketplace, an outline, a list of features, any list really! 📝 👀 In this tutorial, I will show you how to display a list of products thanks to a repeating group. Let's build your first repeating group t...
What are Parent Groups in Bubble.io?
Переглядів 1,8 тис.3 роки тому
If you've already started using Bubble, you may have already come across the term "parent group". 👀 Do you wonder what it means? This tutorial is for you! You'll learn what a parent group is in theory and how it translates into practice!
How to Create a Sticky Header in Bubble.io?
Переглядів 7 тис.3 роки тому
Wonder how to create a sticky header in Bubble? 🤔 👀 Now that we have seen how to build a simple header, I will show you how to create a sticky header thanks to the floating group element in Bubble. Sticky headers are a great solution for your users to always have access to your main call to action and are easy to build in Bubble. ➡️ More on that in the video!
How to Use Reusable Elements in Bubble?
Переглядів 2,2 тис.3 роки тому
👀 In this video, you'll learn how to use reusable elements to create a header or a footer. Reusable elements are blocks that you can use and reuse wherever you like in your Bubble app. They allow you to avoid redesigning the workflow and the design of identical parts. 🏗️ In this example, you'll learn how to create a header and how to add it to your pages.
How to Define Styles in Bubble?
Переглядів 3213 роки тому
By now you should already know how to change the font of an element, but do you know how to change the font of all the texts in your app in one click? That's where the Styles tab comes in! 🎨 👀 In this video, I'll show you how to use the Styles tab to manage all your visual elements' style: text, inputs, groups, buttons, etc. A good use of the Styles tab will allow you to save a lot of time and ...
How to Use URL Parameters in Bubble.io?
Переглядів 5 тис.3 роки тому
How to Use URL Parameters in Bubble.io?
How to Preview and Test your App in Bubble.io?
Переглядів 2,6 тис.3 роки тому
How to Preview and Test your App in Bubble.io?
How to Build your First Workflow in Bubble.io?
Переглядів 8633 роки тому
How to Build your First Workflow in Bubble.io?
How to Define Workflow Actions in Bubble.io?
Переглядів 6463 роки тому
How to Define Workflow Actions in Bubble.io?
How to Define Workflow Events in Bubble?
Переглядів 4323 роки тому
How to Define Workflow Events in Bubble?
How to Create a Workflow in Bubble.io?
Переглядів 9653 роки тому
How to Create a Workflow in Bubble.io?
How to Create Database Entries Manually in Bubble?
Переглядів 6013 роки тому
How to Create Database Entries Manually in Bubble?
How to Define Data Types and Data Fields in Bubble.io?
Переглядів 1,2 тис.3 роки тому
How to Define Data Types and Data Fields in Bubble.io?
How to Build a Signup Popup with a Reusable Element in Bubble.io?
Переглядів 2,5 тис.3 роки тому
How to Build a Signup Popup with a Reusable Element in Bubble.io?
How to Create an Input Form in Bubble?
Переглядів 4,2 тис.3 роки тому
How to Create an Input Form in Bubble?
Getting Started with Bubble.io Design Tab
Переглядів 6853 роки тому
Getting Started with Bubble.io Design Tab
Getting Started with Bubble.io Main Tabs
Переглядів 5743 роки тому
Getting Started with Bubble.io Main Tabs
allez les bleu
Perfect!
одна вода.
7:12 what do you mean by “you need to input your data again”? I have some reference tables in my app - do I need to manually enter all that data? Is there no way to copy it to the live database?
Hi, did you manage to solve this?
Nice smile
t'aurais pu faire en français lol merci pour cette vidéo !
If I built a form on bubble and wanted it placed on a website is it possible to execute the workflow from website?
Hello, thanks for the video, I am using Expressions in my app. The problem is that when i preview, the results (Expression Value) is showing on my computer but not on any mobile device. Is ther a known problem with expressions on mobile devices (browsers)?
Hi Lucie, Very well explained Could you please share again the link of your eBook.
Awesome. Thanks for sharing, this is very helpful.
Thanks for the tutorial. May I know how google would react to dynamic SEO titles? E.g i show 100 products on a single page with dynamic element. Ia google able to identify all 100 variations of the same page?
i can add plugins login service ChatWork, can you help me.
Your smile made me subscribe🙂
Hi there and thanks for this video. I went live and am having trouble getting Stripe and Bubble to communicate since switching from test to live. Do you have any videos on this? Thanks so much!
could u plase help me for free implementing things in my bubble app
how can i add google ads on my website that is created on bubble?
how can i add google ads on my website that is created on bubble
plane and direct explanation , I really hope to see more video especially about data configuration and relation parent groups and workflow . this channel deserve more 1
Vivre le france
Hi thank you for sharing The bubble io should be in paid plan -liver version, right?
l'usage des url est tellement vaste! Dans le cas d'une application web qui devait se comporter un peu comme une application mobile, je les utilise pour afficher les groupes présents sur ma page en fonction de l'icône pressé sur mon footer. Un peu à la Insta, quand l'user clique sur le feed, cela envoi une URL spécifique à ma page actuelle (sans la charger) et le groupe feed la détecte et s'affiche! Tellement magique. Du coup ça me permet de fluidifier un max la navigation de l'user. As-tu déjà eu l'occasion d'utiliser les URL à cet effet? Je demande pour avoir un retour d'expérience 😀
Hi. Can it recommend a different way to embed a bubble app into the page other than iFrame? I want a method that is a little more native. Thanks
You are one of very few honest youtubers. Your videos are short, clear and straightforward. Thanks a lot
Thank you
I wanted to know how to lunch my in the APPSTORE and PLAYSTORE , can you give a hand please
Just 6 minutes into this video and you solved a problem I was trying to fix all day!! Great job presenting such a complex concept.
thanks ! mine is'nt work at first because this configuration 1:25 ! thanks !
Très très clair. Bravo.
Amazing! Thanks a lot. :)
danke!
How to do a custom state for a menu button so that the button stays active until i click another button. (different colors)
thanks for sharing, I had seen several tutorials and as you say they intimidated me, and I always put them aside, no one explained that the values could be saved anywhere even on the page, great
Hello Lucie, thanks for nice tutorials. You are very patient and clear. I've watched quite a few and it helps a lot. Wondering if you could share which screen-recording and editing software you are using to make this youtube video ? Especially because your presenter's window is round, which is different from other channels. Thanks in advance !
Thanks, very helpful video!!
could u plase help me for free implementing things in my bubble app
Can I just ask - can this work on a free plan? I would like to make a simple calculator and embed it into a page. Nothing fancy, but it seems like I can't deploy - so I should have to pay even for something this small?
You said how to install, but not how to use or implement in the app? I think finding plugins is fairly obvious, people watching this video will want to know how to actually use them once installed.
Yes, this video is stupid
great course
Your video was perfect for what I needed, thank you very much!
You're a fabulous angel.... I've been stuck on this for 2 days. I've used the same methodolgy to use the postionstack API to geocode addresses. Many, many thanks 🎉
version française stp, en anglais c'est un peut dure pour moi 🙏🏻😭
eeek you missed the most important steps!
Is it possible to do it without Toolkit?
Thank you so much for this video! p.s. I love your accent! -I know my people when I hear them. Go France!
your smile is very cute
Great tutorial! Exactly what I needed
Thanks. That was a great intro course to bubble. Why did you stop?
but every app must be on a paid plan, right? Can you build more than one app on a single plan or would you have to pay for each app? That quickly becomes prohibitive to build small apps like this.
Hola Lucie, muy buenos tus videos pero en este de diseño responsivo no obtengo resultados me faltaría saber tanto la página Index como cada grupo que tipo de Container layout tienen definido: Fixed, Align to parent, Row ó Column ? Muchas gracias !!
trying to get in contact withyou.. do you have any business email or phone number?
very interesting video do you know how to call a search with a dropdown menu and best matches for specific terms inserted in the input?
Merci pour la vidéo (j'ai reconnu l'accent français^^)