So you’re new to Webflow, eh? Let’s dive in.

Jabes Fuentes Ltda.

This visual guide will walk you through important responsive web design concepts and how to implement them visually inside Webflow.

#1 ¿quienes somos?

#2 ¿QUE HACEMOS?

#3 GALERIA

#4 CONTÁCTANOS

BIENVENIDO A NUESTRO WEBSITE !

Favor de visitar nuestro sitio en Facebook !
Ante cualquier sugerencia y consulta, no dudes en contactarnos.

#1 ¿quienes somos?

¿Quienes Somos?

Somos un grupo de estudiantes de último año de Universidad, con mucha experiencia en creaciones y servicios orientados a la informáticas, tales como:

· Creación de Websites.
· Asesoría Computacional.
· Asesorías de Procesos .
· Creación de Sistemas en diferentes tipos de Lenguajes.
· Otros.

A Section takes up 100% of the width of the browser window if you add it to the Body (the canvas of a website).
It’s great for the big horizontal sections of a website.

Section Element

A Container is a 960px block centered in the middle of the browser. Usually most website content is added inside of a Container so that it’s centered. Containers are usually added to the Body or a Section element.

Container Element

Adding Columns are the fastest way to build a unique website layout. To edit how many columns you want in different devices, just click on the Gear Icon in the top right corner to access element settings.

Responsive Columns

#2 ¿QUE HACEMOS?

Styling your elements

Select an element and add a class in the right style panel (Brush Icon). In this panel you can add text and graphic styles like font color, line height, gradients, borders, shadows, and more. Visual web design is way more fun than coding right?

button design example

Add to Cart ➜

Style it yourself

Button Text ➜

TIP: This button already has a class ”Button” with some basic styles. Select the button and try to add the gradient, border, rounded corners, inside/outside shadows, hover state styles, and transition for the hover styles – all using the style panel.

What you created

Button Text ➜

apply the ‘button’ class

Button Text

TIP: In web design you can apply a class to many elements to make them look the same. Apply the “Button” class that you styled to the link above by clicking the [+] at the top of the Style panel and typing “Button” to find that class.

Typography example

Lakewood Stout

The Dark Beer of Lakewood, Colorado

The legendary stout was born out of the beautiful matrimony of a mountain man and his most beloved thing, the city of Lakewood in Colorado. The mountain man also loved his axe and his single-shot Remington rifle, but not as much as he loved his city. He dreamed of her flowy rivers and majestic mountains. So he named his greatest stout after her. Thus the glorious stout was birthed out of a mountain man’s heart.

“I crafted this glorious beer to express my undying love for my beautiful city.”

- Mountain Man

Style it yourself

Lakewood Stout

The Dark Beer of Lakewood, Colorado

The legendary stout was born out of the beautiful matrimony of a mountain man and his most beloved thing, the city of Lakewood in Colorado. The mountain man also loved his axe and his single-shot Remington rifle, but not as much as he loved his city. He dreamed of her flowy rivers and majestic mountains. So he named his greatest stout after her. Thus the glorious stout was birthed out of a mountain man’s heart.

“I crafted this glorious beer to express my undying love for my beautiful city.”

- Mountain Man

TIP: Go ahead and add custom typography and styles to the background. Cool tip: If you add typography styles to a parent block, all of its children text elements will inherit those text styles. In CSS this behavior is called “cascading”.

#3 GALERÍA

Building web layouts with CSS

Similar to adding style to an element, to change the position of an element first add a class and then edit the position properties. You’ll learn about Margin, Padding, Display, Float, Overflow, and Position.

Margin & Padding example

Breaking News

Federal Agents Raid Gunshop, Find Weapons

Store owner Steve Witmere previously arrested for blackmarket bazooka trading. Confesses to involvement in Russian mafia.

Among the numerous bazookas found in the gunshop were tens of thousands of illegally obtained paintings valued at at least $10,000. Thats a heavy price to pay for these dumb paintings.

Description: Margin and padding can be found in the Position palette of the Style panel. Adding Margin will add space outside of a block, and adding Padding will add space inside of a block.

Add spacing Yourself

Breaking News

Federal Agents Raid Gunshop, Find Weapons

Store owner Steve Witmere previously arrested for blackmarket bazooka trading. Confesses to involvement in Russian mafia.

Among the numerous bazookas found in the gunshop were tens of thousands of illegally obtained paintings valued at at least $10,000. Thats a heavy price to pay for these dumb paintings.

TIP: Start by adding padding on all sides of the main grey block (parent element). Then add bottom margin to add spacing between the individual text elements (children elements). Hint: Hold SHIFT while using the margin/padding control to apply to all sides and ALT to also apply to the opposing side.

‘Display: Block’ examples

This heading is set to Display: Block

This paragraph is set to Display: Block. So it fills the width of the parent window and stacks on top of other blocks.

Button with Display: Block Button with Display: Block This link is set to Display: Block This link is set to Display: Block

Description: Setting elements’ Display Setting to Block will make them stack on top of each other and fill 100% the width of its parent block. Most elements actually have this setting by default.

Make them ’Display:Block’ yourself

This is a Button This is a Button Links are Display: Inline by default Links are Display: Inline by default

TIP: Select these elements (some are Inline Block and some are Inline) and make them Display: Block so that they stack on top of each other.

‘Display: inline-block’ example

Download Edit Delete

Description: Setting elements’ Display Setting to Inline-Block will make the width of the block conform to the width of the contents inside it. That means if their content is small enough they can stack next to each other. You can copy paste the buttons above and edit the text inside to see how it works.

make them inline-block yourself

Download Edit

TIP: Select the elements above and make them Display: Inline-block so they stack next to each other. You’ll see that the images stack next to the buttons. Tip: Dropping the buttons and images into separate Div Blocks will make them stack on top of each other (because Div Blocks are Display: Block by default).

#4 CONTÁCTANOS

Datos BASICOS

Thanks!

Your rock my socks!

Oops! Something went wrong while submitting the form :(

e-mail

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

TIP: Escriba todos los campos, estos son obligatorios para nosotros saber cuál es su nombre y su petición; su correo también es necesario para poder contactarnos con usted.

** Ningún dato es guardado, esto es necesario para la seguridad de la información **

Absolute Position Example

My Cup of Joe

This is a photo caption text.

Featured

Description: If you set Position to Absolute on an element, you’ll be able to position it in anywhere inside its parent block. To choose which parent to position inside of, set the parent element’s Position to Relative. Note: When elements are absolute positioned they float above other elements.

Style It Yourself

My Cup of Joe

This is a photo caption for my favorite cup of Joe.

Featured

TIP: First select the Image Wrapper element and set its Position to Relative. Next select the caption, drag it into the image set it’s Position to Absolute and choose the 7th preset. To position the Featured badge into the correct place choose the 2nd preset and manually position it.

#5 más

¿Necesitas más ayuda?

You got it! There are tons of people learning Webflow and web design every day. A great place to start is the video tutorials. Then head on over to the support center or community forum.

Video Tutorials

tutorials.webflow.com

Facebook

forum.webflow.com

Help Docs

help.webflow.com

(You can click on the links above by going into Preview Mode – the eye icon in the top left corner)