Desarrollar páginas estáticas perfectas en Bubble

En este vídeo aprenderás los consejos y trucos esenciales para crear páginas con contenido estático en Bubble.io. Las páginas estáticas son relevantes para los sitios web con mucho contenido de texto que no cambia por el contenido del usuario; ejemplos son el pie de imprenta, el descargo de responsabilidad, la política de privacidad, los términos y condiciones en Bubble io.

Las páginas estáticas son inbesodere relevantes cuando se trata de mostrar texto puro y no necesariamente imágenes, grupos, botones o plugins.

En el pasado programé páginas estáticas con muchos elementos de texto individuales en Bubble; sin embargo, resultó que, especialmente con el Responsive Layout, muchos elementos individuales diferentes conducían a problemas considerables.

En primer lugar, veamos el diseño de la página en https://bubble.io:

En el sitio web https://gs.statcounter.com/screen-resolution-stats puede ver las resoluciones de pantalla más comunes de los usuarios de Internet en diferentes regiones.

• Los dispositivos móviles tienen principalmente una resolución entre 320px y 414px.
• Las páginas de los ordenadores de sobremesa y de las tabletas tienen entre 768px y 1280px, y muchas personas tienen también 1920px. Por lo tanto, optimizamos nuestro sitio para una resolución de 320px a 1280px; pero somos responsivos para los navegadores que tienen una resolución mayor (1440px, 1920px).

Por lo tanto, nuestra página estática tiene un ancho de 1280px en Bubble. El elemento de texto tiene una anchura de 1000px con una anchura mínima del 35% y una máxima del 120%.

Rellenamos el contenido con el generador Lorem Ipsum en https://www.loremipsum.de .

Primero creamos los diferentes tamaños en el Editor de Texto Enriquecido en el campo Texto de Burbuja. Es importante que el tamaño de la fuente 1,2,3,4,5,6,7 sea siempre fijo en HTML; independientemente del tamaño del texto del campo de texto.

Por ejemplo, el tamaño de la fuente 6 en el editor de texto enriquecido es siempre de 32px, independientemente de que el tamaño inicial del cuadro de texto en el estilo sea de 12px o 40px.

Definimos una línea horizontal mediante [hr ] para delimitar visiblemente las zonas. HR significa regla horizontal.

Las listas ordenadas y desordenadas pueden crearse utilizando el Editor de Texto Enriquecido (tenga en cuenta el formato) o introducirse manualmente utilizando [ol]...[/ol ] para la lista ordenada y [ul]...[/ul ] para la lista desordenada. El elemento individual de la lista se introduce a través de [li]...[/li].

Puede crear diferentes fuentes mediante [font=fontname]...[/font]. Esto también puede hacerse directamente a través del editor de texto enriquecido. Puede crear colores utilizando el editor de texto enriquecido o el código [color=#000000]...[/color]. Por último, puede crear enlaces en el editor de texto enriquecido con la URL: o el código [url]...[/url] o directamente en el campo de texto puede marcar la casilla de reconocer enlaces y correos electrónicos; estas dos opciones son mutuamente excluyentes.