Cómo crear una PÁGINA WEB PARA RESTAURANTE | tutorial paso a paso (COMPLETO) - 2022

Cómo crear una PÁGINA WEB PARA RESTAURANTE | tutorial paso a paso (COMPLETO) - 2022

hoy todo mostrar en tan solo seis pasos cómo crear una página web para restaurante para cafetería para bar o en general para cualquier tipo de negocio de comidas y al final de este vídeo podrás crear una página web que se vea como esta y te voy a enseñar cómo crear cambios en el diseño para que se vea más diferente y única ahora el primer paso para obtener el alojamiento y esta es nuestra recomendación site ground se ha convertido una de las compañías más importantes y de hecho con mejor servicio en alojamiento web anteriormente recomendamos mucho brujo gusto go daddy y estas compañías están bien pero hemos visto que es hay ground está invirtiendo lo bastante dinero ahora la relación con el canon el consumidor a la tecnología que tienen la velocidad de las páginas son pues es bastante son bastante buenas y entonces te recomendamos de hecho entonces que si lo deseas nuestra recomendación es que uses site ground y si quieres entonces hacerlo con site ground tenemos un cupón de descuento que está en la descripción de este vídeo simplemente le das click al enlace y aquí entonces vas a ver vas a obtener tres ventanas principales que han dependen de la localidad si estás en latinoamérica si estás en españa si estás dentro eeuu esto se ajusta dependiendo del idioma y también pues los servidores creo que también se ajustan dependiendo de la cola de la localidad supongamos que entonces escoges el servicio de latinoamérica le damos entonces aquí clica activa anti cupón de descuento el 70 por ciento de descuento y una vez estés aquí adentro entonces vas a ver que hay tres opciones la primera opción es la más sencilla que de hecho entonces te permite a mí instalar solamente una página web te permite quedar dominio gratis y te da entonces también te dan muchos correos electrónicos vamos a ver dónde están los correo electrónico gratuitos también más otras cosas que también son bien importantes pero el correo electrónico también es bien importante porque muchas personas se preguntan cómo crear un correo electrónico que tenga el nombre del dominio y esto lo incluye todo este paquete incluiría el dominio el alojamiento e incluiría también el correo electrónico corporativo o correo electrónico con el dominio que de hecho tenemos otro vídeo donde explicamos cómo hacer la configuración de este correo electrónico y cómo checar esos correos directamente en tu cuenta personal de gmail y si lo quieres ver está en la descripción aquí en esta en esta pestañita donde le puedes dar entonces ahí va a aparecer el vídeo y puedes pues puedes ver el tutorial completo ahora los otros planes estos planes que también dependen entonces digamos si quieres más de una página web entonces es la segunda opción está de varios sitios web puede que sea entonces la más pues más adecuado hay un hay otro plan que se llama go y que de hecho pues tiene muchas más cosas tiene como copia seguridad avanzada tiene otras cosas que si las necesitas pues puedes adquirirlas ahora pero si estás comenzando y solamente tienes bueno estás pensando crear solamente una página web con un dominio web entonces en ese caso te recomendamos que contrates o que compres este primer este primer plan que es el plan más sencillo y aquí entonces colocaría el nombre del dominio que de hecho te recomendamos si no sabes si no has establecido el nombre del dominio de tu negocio hay otro vídeo también donde lo puedes ver en la pestaña que está acá arriba también a donde te explicamos paso a paso cómo sacar el dominio perfecto o el nombre perfecto para tu dominio y para y para tu negocio obviamente supongamos que en este caso el negocio se llama a comidas a 4 p algo así vamos a ver puntocom entonces el dominio creo que está incluido en este plan va a ser incluido entonces aquí y simplemente colocas tu información personal para que entres a la cuenta esta información es bien importante la información del país código postal etcétera y luego entonces también aquí colocas la información de la tarjeta para realizar el pago y aquí escoges entonces si quieres 12 meses 24 36 puedes escoger de hecho un mes pero incluye está este costo de configuración que es casi de 15 dólares que en mi opinión no no vale casi la pena porque pues estás pagando 20 dólares por un mes en vez de digamos que tenemos vamos a escoger el plan de 12 meses dúplicas un poco el valor bueno duplicar un poquito más de duplicarlo pero obtienes 12 meses es un año completa entonces pues este es el plan que pues generalmente recomendamos si estás comenzando una vez elijas el tiempo entonces lo único que tienes que hacer es confirmar que pues si así has leído y acepta las condiciones de servicio y privacidad y entonces le das aquí pagar ahora para realizar el pago obviamente pues aquí no funciona porque no está la información completa ahora una vez estés dentro entonces lo que tienes que hacer es te vas a websites y aquí vamos a crear un nuevo website para escoger el dominio entonces en este caso como ya registrarse el dominio dentro de la cuenta porque te lo ofrecieron gratis entonces lo que vamos a hacer es darle a vamos a ver existen domain y vamos a escoger el dominio que en este caso vamos a colocarlo como demo o pones raya 01 online pero en tu caso entonces va a ser el dominio que escogiste para tu negocio ahora una vez entonces tengamos el dominio le damos continuar vas a obtener un mensaje pero éste como ya está registrado dentro de esa y crown es no hay problema entonces le damos continuar y vamos a comenzar una nueva una nueva página web le damos clic acá y vamos a seleccionar se wordpress y aquí entonces esta información es importante porque es la información que vas a usar para entrar a wordpress y estás de hecho está este paso es la del segundo paso que es la instalación de wordpress es lo único que debes colocar acá es el correo electrónico puede ser tu correo electrónico personal supongamos que en este caso aprueba y aquí colocas entonces la clave que vas a usar para luego entrar a wordpress entonces le damos continuar si quieres adicionar esto lo puedes hacer pero en realidad pues no está esto es para monitorear que pues no haya no hayan ataques a la página web pero inicialmente no nos sentimos que sea tan necesario por lo menos no al principio entonces le damos finalizar ahora que ya terminó si tu dominio estuvo registrado con side ground que probablemente es el caso no vas a necesitar tener que hacer este paso que está aquí que es de hecho direccionar el dominio web porque si el dominio no está dentro de saiz ground hay que cambiar estas direcciones dns para que entonces entienda que el dominio está por fuera y va a apuntar entonces al alojamiento web dentro de esa gran pero si escogiste el dominio dentro no deberías tener ningún problema y no debería aparecer de hecho esto en este caso nos aparece a nosotros porque de hecho ahora recuerdo que el dominio no está dentro de sant grau ni está hecho dentro de un chip que de hecho si quieres obtener varios dominios amplia consigamos que sea pues bueno este experto una opinión personal pero es mejor de hecho entonces tener los dominios en una compañía que sea pues independiente a veces del alojamiento web eso es lo que nosotros hacemos también como que tenemos toda la lista de todos los dominios dentro de nietzsche y todos estos dominios se apuntan a las diferentes compañías de alojamiento qué entonces lo hace más fácil para tener la jeringa y mantener la gerencia y mantener como que las fechas de caducidad y todo esto ahora que ya terminaste entonces lo que tenemos que hacer es nos vamos al dominio al dominio correspondiente ya sea que bueno cualquier cualquiera que sea el nombre del dominio que hayas escogido y te vas a seguridad porque vamos ahora entonces a instalar el certificado ssl que es bien importante para que tu página se vea segura bueno se asegura y se vea segura es nos vamos a ssl manager y aquí les vamos a escoger alguna de estas dos opciones la primera o la segunda da igual en realidad y unas de algunas diferencias técnicas pero no son pues no son tan diferentes le damos a obtener y una vez termines vas a ver que entonces van a estar listados aquí los certificados que te instalas te y te aconsejo también que te vayas a esta sección que se llama https en force donde lo que haces es entonces en forzar y obligar a que el certificado se aplique en todas las páginas de la página web y no sé si has visto que cuando aplicas un certificado ssl a un dominio o una página lo que aparece bueno la página aparece ya con un candadito acá y entonces el dominio completo o la url completa es https y entonces esto es lo que lo hace segura y por eso es que se ve segura es bueno esto es bueno siempre para cuando las personas están haciendo transacciones dentro de la página o incluso para posicionar tu página web dentro de los navegadores como google porque ahora ellos lo ven como que pues si tu página es segura entonces la rankean o la posiciona mucho mejor a que si no pues en comparación a que no tuviese el del certificado instalado ahora ya instalamos wordpress en uno de los pasos anteriores y para tener acceso a wordpress lo puedes hacer desde aquí le das instalar y aquí ya está instalado entonces lo único que tenemos que hacer es darle clic a esta opción y ya va a entrar entonces ya una vez estemos adentro lo que te aconsejo es que instales primero primero que lo cambias de español si no lo tienes en español y luego que instales el tema de hasta que de hecho bueno ya lo tenemos aquí instalado pero lo único que tendría que hacer es añadir uno nuevo y aquí en populares probablemente va a estar como el tercero - del primer puesto de hecho porque estos se instalan por defecto los primeros tres y la primera posición en realidad es ésta si no lo ves ahí entonces simplemente buscas astra y al buscar hasta entonces vas a ver que va a aparecer una vez lo tengas entonces le das click aquí bueno ya está vamos a activarlo y una vez esté activado entonces le das clic a esta opción nos vamos a esta opción de astra desde astra ahora en esta sección vas a ver que entonces hay muchas más opciones porque el tema es gratuito pero la versión pro de hecho tiene muchas más opciones que pues te da mucha más flexibilidad en términos de la funcionalidad y el diseño de la página web y si estás interesado puedes ir al enlace que se encuentra bueno que soy explique o si mostrando aquí en la pantalla donde entonces siempre alistamos los descuentos actuales de todas las entradas en realidad de todas las herramientas que usamos y dentro de ellas está que es muy recomendable y que lo recomendamos mucho es es la plantilla de hasta ahora si te regresa esa apariencia y le das clic a esta de nuevo al tema y le das clic entonces a éste a esta opción que se llama starter templates que es donde están entonces todas las plantillas que ellos tienen que muchas de ellas de hecho son gratis aquí escoges entonces el maquetador que vas a usar que en este caso vamos a usar elementos haz clic aquí vas a ver la lista de todas las plantillas que tienen disponibles algunas son gratuitas bueno la mayoría muchas de ellas son gratuitas algunas tienen este está este título aquí que se llama am agencia o ley en sí pues ese es para la versión pro pero en este caso vamos a la versión gratuita y vamos a buscar entonces restaurante y tienen algunos modelos como puedes ver entonces tienen dos que son gratuitos bueno vamos a ver aquí tienen bueno casi que 33 tienen casi tres diseños en realidad todos estos diseños puedes escoger cualquiera y luego entonces hacer los cambios de diseño usando la el plugin de elementos y eso es lo que te vamos a enseñar al final de este vídeo entonces pero para comenzar vamos a tomar una de estas plantillas vamos a tomar esta que se llama fresco y vamos a importar le das a esta opción importar sitio web completo y aquí te va a preguntar que si quieres bueno vamos a importar todo esto que si quieres borrar el sitio ha importado anteriormente y eso te lo aconsejamos para que entonces elimine todos los archivos y no haya como pues cruce de información o cruces de diseño a veces nos instalan bien porque no se borró todo lo anterior entonces te aconsejo que les explica esta opción le damos importar ahora una vez termine vas a ver que entonces va a aparecer un mensaje que dice importado correctamente y pues ya tenemos entonces el sitio web entonces le damos clic aquí ver el sitio y como puedes ver entonces este es el diseño inicial puedes ver que está todo bien se ve todo bien tiene todas las secciones vamos a ver entonces en el menú vamos a ver el menú y en el menú completo como puedes ver entonces tiene buenas imágenes tienen un menú pues que en mi opinión está bien pues bastante bien diseñado por lo menos en la computadora se ve bien no sé cómo se vea habría que ver cómo se ve entonces en los dispositivos móviles también tiene una sección respecto a bueno acerca del restaurante va acerca de tu negocio como para que puedas escribir entonces el negocio como tal aquí puedes ver entonces más cosas puedes ver las personas que están ahí y tiene una sección dada para contar para contactar ahora este diseño está bastante llamativo pero como lo podrás este imaginar probablemente muchas personas están usando el mismo diseño y pues no brinda aunque cuando cambias y cambias las imágenes entonces ahí le va a dar un carácter un poco diferente a la página pero en mi opinión lo que a nosotros siempre nos gusta es comenzar con un tema o una plantilla y de ahí empezar a hacer entonces cambios que es que tenga más más relación con respecto a la marca como tal desde el negocio la marca de tu restaurante que de hecho si quieres saber más de cómo establecer una marca para tu negocio para tu restaurante tenemos otro vídeo donde te explicamos paso a paso cómo hacerlo ahora te puedes quedar con este diseño pero hoy te vamos a mostrar entonces cómo de hecho entonces tratar de hacer algo parecido a un diseño que se vea así como este que de hecho esto es un diseño que pues simplemente nos gustó desde el tipo de diseño que tiene este negocio y este pues estaba esta página web y vamos a tratar de estimularlo y van a ver que es bien sencillo con elementos es bien sencillo hacer todos estos cambios hacerlo un poco más como en mi opinión es un poco más colorido un poco más creativo el diseño que está aquí que tenemos aquí es un poco más clásico obviamente esto depende del tipo de negocio que tenga si tienes un restaurante italiano pues probablemente esta va a ser una mejor opción en comparación a lo que está aquí pero usualmente nosotros tratamos de manejar diseños un poco más modernos más coloridos con bloques que existen ahora estas tendencias que pues llama mucho en mi opinión llama mucho más atención ahora si tienes algunos ejemplos de páginas web que te gustaría como puedes usar como plantilla o como como pero como referencia en realidad no estamos copiando nuestras copias nuestras como buscan la inspiración para el diseño si tienes varios ejemplos y quieres usar el tipo de color que ellos tienen o el 5 de tipografía para hacer esto bueno para entender o para saber qué tipo de colores o cuál es el color exacto y la tipografía que usan si usas google chrome puedes darle click derecho y le puedes dar entonces inspeccionar y aquí puedes ver por elementos vas a poder ver entonces los colores que tienen entonces digamos que este naranja es este código que este código lo puedes usar luego entonces para agregar eso dentro de elementos que ahora te vamos a enseñar cómo hacerlo y así puedes entonces investigar todos los colores supongamos que este naranja te gusta le das clic a este elemento y va a parecer menos naranja ya los escogimos vamos a escoger el amarillo ahora entonces vamos a buscar en amarillo y ahí está el tipo de amarillo vamos a buscar el tipo de letra digamos que me gusta bastante este tipo de letra puedes ver que este es el tipo de letra que está ahí entonces vamos a ver si aquí lo muestra de mostrarlo acá boogie aquí es el buki bueno no sé cómo puede pronunciar bien pero esa es la esa es la letra entonces si puedes de hecho inspeccionar y usarlo como referencia si quieres puedes usar el tipo de letra de los colores de otras de otras páginas web ahora una vez tengas la tipografía y los colores es importante que tenga las imágenes listas y las tengas optimizadas con el tamaño adecuado y como puedes ver aquí ya estamos usando canvas para esto es algunas imágenes que están dentro de la versión pero que andan bueno de nosotros tenemos disponible pero de hecho tiene ayuda de una versión gratuita que yo creo que te da cierto porcentaje imágenes gratis aunque mi opinión es que uses imágenes de tu restaurante que tú sean propias de la comida y que pues no engañes a tus clientes tratando de mostrarles algo que pues no existe por lo menos no tienes disponible en tu negocio ahora el siguiente paso es que tengan listo el logo de tu negocio de tus restaurantes y ya lo tienes está perfecto si no tienes un logo en este vídeo que también está en la pestaña aquí de arriba vas a poder ver el paso a paso cómo crear un logo dentro de camba de forma gratuita no tienes que pagar nada es gratis y es bien fácil de hacer y ahí te explicamos todos los detalles una vez tengas las imágenes también recuerda que es importante optimizar el tamaño y para eso hay un plugin que sé por píxel dentro de wordpress no es necesario que lo instales nosotros usualmente lo que hacemos es ir a optimizar las imágenes por fuera usando la página web como lo ves aquí y simplemente las descargas que ya están entonces ya van a estar optimizadas entonces descargamos todo y una vez tengamos todo esto listo entonces lo primero que vamos a hacer es dentro de wordpress te vas a ir al sitio vamos a ir al sitio web y la primera sección que vamos a editar es esta primera sección de acá arriba donde vamos a cambiar el logo y vamos a cambiar el tipo de letra aquí arriba también entonces le damos entonces personalizar y en personalizar le vamos a darle clic a cabecera nos vamos a identidad del sitio y vamos a escoger entonces el logo que de hecho ya lo tenemos vamos a subirlo donde está luego esto somos comprimidos una vez lo tengamos entonces le damos seleccionar vamos a estar seleccionado y aquí puedes ver entonces que ya está podemos entonces cambiar un poco entonces del tamaño del logo vamos a agrandar el para que está bastante grande vamos a dejarlo así ahora vamos a cambiar el tipo de letra acá que está en esta sección entonces si nos vamos y le das clic acá vas a ver que de hecho este botón de reservación lo tienen enlazado astra pero pues en tu caso debes enlazarlo a la página correspondiente para la reservación y vamos entonces a cambiar el tipo de letra y para cambiar el tipo de letra de hecho entonces nos vamos a vamos a revisar nos lo realizamos al inicio y nos vamos a globo y aquí en tipografía tipografía base sigamos la tipografía wassen tenemos a buscarla la letra la cambio vamos a componer la negrita bueno de hecho entonces vamos a poner la más culta no vamos a poner la ultra negra ok entonces aquí le damos vamos a cambiar el tamaño pongamos 25 puede que esté bastante grande pero pues esta es la idea que el diseño se va bastante grande ahora ahora una vez tengamos esto entonces podemos de hecho también cambiar este botón no me gusta la forma redondeada que tiene entonces vamos a personalizar el estilo del botón y aquí vamos a ver entonces en el borde aquí puedes escoger entonces el radio vamos a ponerlo como en 10 para que sea un poco más cuadriculado ahí lo puedes cambiar a tu gusto en realidad es el diseño es bien subjetivo y es bien subjetivo a la de las cosas que a ti te gusten le damos publicar cerramos aquí ahora vamos ya los ya está esta parte demasiado puede que sea demasiado en negrilla pero este es un ejemplo simplemente para que veas que tienes control sobre muchas cosas en el diseño y estas cosas las puedes cambiar bien fácilmente usando las herramientas adecuadas el tema de astra te permite hacer estos cambios y elementos te va a permitir hacer otros cambios adicionales que de hecho hacer en realidad elementos a usar para la parte como principal para la parte del cuerpo porque el menú y estas cosas se cambian dentro de la plantilla pero digamos que imágenes o estos títulos que están aquí generalmente usamos elementos para hacer estos cambios le damos de editar con elementos y aquí vas a encontrar una cantidad enorme de opciones que muchas son gratuitas de hecho pero algunas tienen esta opción este este candadito que pues vienen vienen con la versión pro y que si te interesa obtener la versión pro en la descripción de este vídeo también tenemos un enlace donde fueron deslizamos todas las herramientas que usamos y está ahí dentro también la versión pro de elemento que es bien importante que bueno si quieres avanzar un poco más y ahorrar mucho tiempo porque de hecho nos ahorra mucho tiempo esta herramienta cuando usamos en todos nuestros diseños recuerda que si tienes preguntas de cualquier tipo respecto a todo el diseño respecto a este procedimiento así sean preguntas bien particulares puedes usarla por la forma de suscripción que se encuentra en la descripción de este vídeo donde entonces se te pide que coloques el correo electrónico te enviamos un correo de bienvenida y en ese mismo correo de bienvenida vas a poder entonces enviarnos todas las preguntas que quieras a través del correo electrónico y la pues obviamente el apoyo es más personalizado porque pues vamos a vamos a tratar de ayudarte a ti individualmente y puedes ayudarte a pues a mejorar el diseño o si ha hecho nunca has hecho esto antes entonces te vamos a guiar paso a paso para que lo puedas hacer tú mismo te digamos que queremos crear un bloque como este entonces le vamos a dar entonces a adicionar un bloque más vamos a colocar la que adicionar esto vamos a dejarlo así y aquí vamos a seleccionar la imagen entonces si le das clic a estos puntos acá le damos estilo vamos a colocar entonces vídeo no clásico vamos a ver una capa de fondo si le das aquí a fondo y le hace esta opción entonces aparece esto de imagen y aquí podemos cargar entonces vamos a cargar las imágenes que tenemos vamos cargar esta esta y esta que son las que están optimizadas una vez tengamos es tanto le vamos a dar insertar y vas a ver entonces que aparece un poco un poco de la imagen pero para que aparezca bien pues vamos de hecho entonces a agregar supongamos que una imagen aquí no vamos a agregar supongamos vamos a mirar aquí el diseño que tiene acá vamos a agregar un bloque que tenga texto vamos a agregar un bloque que tenga que un encabezado y aquí va a saber entonces vamos a colocarlo de color digamos color blanco obviamente es la letra que queremos pero vas a empezar a ver que si agregamos más texto la imagen de hecho estaba demasiado amplificada antes vamos a regresar nos le hasta le das clic aquí a estos puntos y vamos a ver la la posición por defecto vamos a ver centro centro y no se ve bien desplazamiento vamos a dejarlo de repetir no tamaño entonces vamos a colocar que abarque antes que abarca o que contenga que contiene o colocamos personalizado y aquí puedes ver entonces que al hacerlo centrocentro por defecto vamos a dejar entonces por defecto si aquí no lo repetimos y aquí que contenga entonces el tamaño completo vas a ver que aparece esta sección de esta forma que puede que sea bastante útil entonces lo posible si lo quieres dejar de esta forma vamos a ver si lo podemos de hecho cambiar disposición entonces le vamos a dar acá hunter vamos a darle ancho completo y vamos a darle actualizar vas a poder ver que creo que entonces estábamos no estamos ignorando esta opción de ancho completo para que cubra completamente la pantalla y luego en el estilo de la imagen aquí en esta imagen entonces le damos a abarcar para que entonces contenga completamente la imagen ahora vamos a arreglar esta parte del texto entonces para arreglar eso una vez a grace el texto entonces vamos a ver que entonces aquí en estilo del texto en tres lo podemos colocar tipografía y vamos a buscar el tipo de tipografía que queremos que en este caso va a ser la misma mont ésta montserrat y la vamos a dejar por peso por defecto a una sala normal bueno vamos a colocarle bold vamos a agregar unos espacios entonces también puedes colocar espaciadores aquí arriba uno acá arriba otro espaciadora aquí abajo vas a ver entonces cómo va tomando forma obviamente sólo debes ajustar con cuidado para que entonces se vea bien en varios dispositivos una vez tengamos el texto correcto entonces y aquí el problema es que no se ve bien el texto por el background la imagen de fondo entonces te aconsejo que digamos nos vamos a quedar en avanzado cuando está editar texto editar encabezado porque en realidad es un encabezado nos vamos a fondo y en fondo le vamos a dar color y le vamos a poner el color que entonces corresponde a la que de hecho este naranja que está acá arriba no corresponde idealmente pero eso se puede cambiar y lo podemos lo podemos hacer al final entonces una vez tengamos esto también podemos de hecho entonces cambiar el borde vamos a cambiar el borde vamos a ponerle un borde que tenga redondeo y como vas a poder ver vamos a actualizarla y aquí ves entonces que ya agregamos el texto con esta caja pero no menos un me gusta que se ve que es bastante pegada a la orilla de la caja entonces lo que vamos a hacer es nos vamos a regresar y le vamos a dar a editar acá y aquí en avanzado vas a ver que entonces podemos tener podemos poner relleno o dejarlo así le vamos a actualizar y desde entonces que cambió ahora vamos a cambiarle entonces el color a este botón que también como que me molesta un poco que lo tengan que vamos a personalizar y aquí en global entonces vamos a colores y en colores base vamos a cambiar este color del tema vamos a ponerle el naranja que es este naranja que es y con eso ve que ves que entonces cambió este color falta cambiar el color de este entonces vamos a ver en botones acá y aquí puedes cambiar el color entonces vamos a color de fondo y puedes cambiar entonces también de hecho el color de fondo bueno del texto pero no lo vamos a bajarlo así bueno entonces vamos a cambiarlo porque parece que cuando le damos clic si cambia le damos a actualizar y vas a empezar a ver y entonces como va tomando forma vamos aquí puedes agregar más botones vamos a la siguiente sección supongamos que quieres agregar estas dos cajas que están aquí entonces nos vamos otra vez al elemento y aquí vamos a buscarlo donde está elementos donde está elemento de aquí está el evento le agregamos esto y le vamos a agregar entonces dos cajitas rápidamente y aquí entonces la vamos a dejar en vamos a dejarlo en blanco por ahora y vamos a agregar entonces encabezados aquí va a ver un encabezado es a eso obviamente se nos el tipo de letra que queremos vamos a agregar otro encabezado acá y a este le vamos a poner de fondo vamos a mirar a ver si se puede colocar de fondo vamos a ver contenido fondo vamos a poner de fondo entonces vamos a poner de fondo una de las imágenes entonces ya tenemos aquí una de las imágenes vamos a ver si podemos colocar esta vamos a colocar esta ves que entonces no se ve tan bien pero eso es porque tenemos que cuadrar aquí algunas cosas vamos a colocarle a centro centro donde está centro centro vamos a ponerle que no repita vamos a ponerle tamaño que contenga bueno entonces se ve muy pequeño vamos a que abarque la que abarca ser un poco mejor pero antes hay que mejorarlo el texto vamos a buscar el texto entonces editar encabezado vamos a buscar entonces el estilo y aquí en tipografía vamos a buscar entonces el tipo de letra que queramos y vamos a usar quesería le damos clic acá esta es la que estamos buscando y ahí está antes vamos a cambiar el color vamos a cambiarlo bueno de revisión nos regresamos a estilo el color del texto le damos blanco vamos a ver cómo se ve no se ve tan bien en realidad porque entonces vamos a generar más espacios les vamos a agregar aquí un poco de espacio en la parte de arriba no vamos a quitar esto vamos a agregar un poco más de espacio vamos a ver que lo mejor entonces es que de hecho vamos a agregar aquí vamos a darle editar y en avanzado vamos a agregar relleno entonces ahí quedaría así vamos a dejarlo de esa forma por ahora vamos a darle actualizar y ahí puedes ver cómo va tomando forma obviamente hay que optimizar la un poco más entonces vamos a buscar vamos a agregar un botón para el menú vamos a colocar aquí botón entonces colocamos aquí un botón creo que la imagen vamos a quitar la de acá porque parece ser que entonces no me va a abarcar todo lo que quiero nos vamos a estilo vamos a mirar entonces no era avanzado y nos vamos a fondo y esto lo vamos a eliminar porque lo que quería era en realidad colocar la imagen aquí que hay dos cuadritos aquí que que en realidad significa que es el fondo o todo lo que tiene que ver dentro de este espacio entonces le damos estilo y aquí le damos fondo y aquí si escogemos la imagen entonces vamos a escoger supongamos que esta imagen listo entonces vamos a colocar entonces vamos a colocar por defecto y aquí vamos a no repetir y aquí vamos a dejarla contiene vamos a ver qué contiene no vamos a dejar la que abarca desde aquí abarca como puedes ver entonces vamos a colocar el botón del mismo color que de hecho tenemos el color aquí donde está en estilo le damos clic acá text color que sería no entonces no es éste sino en el fondo nos vamos a avanzado y nos vamos aquí y aquí en color recuperamos el color ops le damos clic acá y aquí le damos clic a esta opción y le damos control ce para copiar el color y pegar sólo entonces al botón que está acá donde está contenido no esto sería estilo vamos a colocar color de fondo entonces vamos a colocar el ejemplo que de hecho podemos usar algunos de los otros colores que tiene el esquema de la página que no solamente es vamos a colocarlo blanco de hecho entonces se puede colocar vamos a dejarlo blanco el color de fondo que sea blanco y el color de texto entonces que sí sea de ese color y ya está ya está bien entonces vamos a alinear un poco más del texto entonces editar encabezado vamos a ver vamos a ponerlo de esta forma pero no lo uno lo quiere recibir porque cuando le dimos avanzado vamos a darle clic aquí al lápiz hito en avanzado aquí vamos a colocar derecha entonces vamos a desenlazar los los cambios y en derecha vamos a poner 20 supongamos si ponemos 2 entonces sería antes de ser izquierda entre 74 74 y en esto y aquí en izquierda colocamos 20 y ves que estar un poco va a estar un poco más inclinado hacia la izquierda antes vamos a ver cómo se ve presentó es que se ve esa forma pero no me gusta como se ve con las letras porque la imagen entonces no ayuda entonces podemos hacer lo mismo de nuevo con el texto vamos a ver entonces si le ponemos en el estilo vamos a ver sombra vamos a colocar a ver si se puede colocar un tipo de sombra el texto ahí está la sombra pero parece que no es tan fuerte en realidad ahora si quieres extender esto totalmente hasta esta sección lo que vamos a hacer entonces es le damos clic acá le damos clic a sus puntos y nos vamos a estilo y aquí le cambiamos de caja a ancho completo y vas a ver entonces que abarca todo el ancho que se ve de esa forma entonces puedes darle clic acá vamos a ver entonces de hecho podemos entrar este este botón lo podemos entonces entrar con esta opción va a saber que entonces ya está disponible ahí tiene el espacio vamos a buscar entonces otra opción para este para este caso antes vamos a buscar vamos a agregar algo parecido a esto entre spanair restaurant entonces supongamos que vamos a escoger el color que el color es éste vamos a escoger el color que el color de fondo quiero que sea de esta forma entonces vamos a colocar el color y aquí el texto entonces va a ser el mismo que tenemos acá que es el tipo bueno de hecho podemos copiar este entonces le das clic derecho le das copiar y vamos a eliminar esta que está aquí borrar y le vamos a dar pegar entonces al que estaba acá y vamos a entonces a copiar obviamente bueno el mensaje que no lo tienes que copiar obviamente pero and your restaurant entonces aquí puedes colocar entonces otro otro enlace supongamos que copiamos entonces le damos pegar a cada pegar haz clic acá antes vamos a ver cómo se ve aquí ahora si quisiéramos agregar una sección completa como ésta antes vamos a colocar otra vez de nuevo otra sección entonces le vamos a agregar le vamos a agregar sección completa vamos a buscar ese color y ese color entonces es este que está acá que es con este código le damos vamos a regar con vamos a agregar colores entonces en estilo la colocamos entonces el color ese es el color y aquí vamos a copiar entonces también el texto entonces vamos a copiar acá que de hecho creo que se separa por dos secciones si éste tendríamos que separarlo de hecho entonces vamos a agregar se agrega añadir una nueva columna y aquí como podemos colocar entonces pegar el texto wolf y flavor fit se puede colocar entonces acá vamos a colocarlo de esa forma y lo vamos a cambiar entonces de color derecho a negro jaja le colocamos color negro entonces puedes ver que ya se ve así ahora vamos a colocar una imagen no vamos a aclarar una imagen pequeña que quiero colocar el logo acá abajo les colocamos el logo vamos a buscar el logo que estaba por acá desde luego que está en blanco y negro entonces bueno de hecho podemos colocar el otro que se ve más llamativo por el color que tiene entonces le vamos a insertar aquí entonces está muy separado en la parte de abajo entonces nos vamos a avanzado y vamos en la parte de abajo vamos a ponerle uno y aquí queda entonces de esta forma vamos a entonces agregar esta digamos que esta información y para hacerlo entonces simplemente vamos a ir a agregar un texto entonces aquí agregamos a meditar texto lo colocamos entonces aquí ya está vamos a colocar el texto sin que copia el código html no me gusta como se ve porque entonces se ve demasiado el tipo de letra en realidad no no en este caso vamos a buscar la tipografía por defecto entonces vamos a buscar el tipo de letra es en este caso eso por defecto normal espero entonces que ahí entonces no puede ir e ir cambiando eventualmente entonces a como quieras que se vea exactamente digamos que lo quieres así de esa forma le damos a actualizar vamos a hacer algunos cambios aquí porque no me gusta como se ve de esta forma vamos a colocar entonces que se extienda de nuevo disposición vamos a la casa entonces ancho completo y ahí ya se extiende completamente vamos a agregar unos espacios bueno de hecho vamos a le damos clic a esta cajita que está aquí para que le dé más espacio de relleno vamos a agregar el espacio de relleno listo entonces con ese espacio de relleno le vamos a actualizar como puedes ver entonces tienes muchas opciones para hacer el diseño y hay mucha flexibilidad incluso con las herramientas que son gratuitas y la idea este vídeo para mostrarte qué pues hay mucho potencial puedes hacer muchas cosas esta no va a ser obviamente una página final el diseño final estamos haciéndolo como ejemplo rápidamente para que veas qué hambre existe la frente todos estos cambios en el diseño y no tienes que quedarte con el diseño inicial dentro de astra si quieres ver otro diseño desde cero puedes darle click a este vídeo que está acá donde desde cero comenzamos otro diseño totalmente diferente y te explicamos paso a paso cómo hacerlo para si quisieras que tu restaurante vendiera productos en línea en este otro vídeo si le das click para saber entonces las instrucciones de cómo hacerlo cómo vender productos en línea y esto lo puedes hacer dentro de tu página web y recuerda que también te puedes suscribir con el botón que está en esta parte simplemente le das clic que se suscribe automáticamente

Noticias relacionadas