Menu

Curso De Elementor

Lecciones del Curso Gratuito

Introducción a Elementor

Hola cómo están muy buenas tardes mi nombre es priscila pazmiño y bienvenidos a este curso de elementos versión gratuita en este primer vídeo te voy a explicar realmente qué es lo que tú puedes lograr con esa versión gratuita muchos no tenemos el presupuesto realmente como para adquirir la versión pro con la que podemos hacer infinidad de cosas y también lo veremos en el curso de elementos pro pero en esta ocasión en específico pues quiero mostrarte la gran cantidad de cosas que tú puedes lograr simplemente con la versión gratuita entonces esta página que estás viendo en este momento es mi sitio web personal ok entonces vamos a hacer un sitio similar al que estás viendo en este momento con las mismas en este caso con el texto las fotos los botones sociales vamos a poder aprender a hacer una pantalla de inicio ok porque en este caso con este curso quiero enseñarte a que tú puedes hacer una página como ésta igual de profesional pero para el emprendimiento que tú tengas entonces vamos a ir viendo cada una de las herramientas que tiene elementos ok en su versión gratuita para que tú puedas lograr un espacio como éste como tú ves esta es la sección en este caso pues la portada de la página no aquí hay una sección en la que tú vas a poder mostrar en este caso los servicios los productos que te ofrezca ok el tema de tiendas es en este caso con un plugin aparte ok con otros planes que tú puedes manejar en wordpress pero en esta ocasión en específico vamos a ver el cómo crear la página como tal ok no vamos a ver plugins en este caso adicionales u otras cosas nos vamos a centrar netamente en elementos ok entonces tú vas a aprender a hacer por ejemplo secciones como ésta en la que tú puedes si tú ves que voy a deslizando el mouse ok va cambiando de color en este caso los cuadros vamos a aprender a personalizar esta parte de aquí cómo hacerlo cómo poner esta parte de los botones y que a su vez estos botones me lleven a otros espacios puede ser dentro de mi sitio web o fuera ok también vamos a aprender a hacer secciones como está ok como ustedes están viendo en las que hay una imagen un pequeño texto en el que nosotros podemos dar a conocer sobre nuestro proyecto sobre quiénes somos o qué recordemos que la página de inicio es como un resumen de todo lo que va a contener tu sitio web de todo lo que sería tu proyecto ok tanto los servicios que ofrece es quién eres por quién está compuesto tu equipo ok todo ese tipo de cosas suelen ponerse en la página de inicio porque porque la idea la razón de ser de la página de inicio es que allí quede claro el por qué de esa página el por qué ese proyecto por qué voy a encontrar allí ok entonces digamos que hay un resumen de todo en la página de inicio y eso es precisamente lo que vamos a aprender a hacer ok para aprender a darle uso todas las herramientas que tiene elementos en su versión gratuita ok entonces también veremos cómo hacer secciones comunes.

Cómo eliminar todo el contenido del tema Astra

Hola cómo estabas mi nombre es prince y la pazmiño y en este vídeo de hoy te voy a mostrar como tu puedes eliminar todo ese contenido todas esas en este caso opciones que vienen por defecto activadas con el tema astra ok con el tema astra para que para nosotros poder dejar nuestro sitio totalmente en blanco totalmente vacío y poder trabajar con elementos ok entonces este sitio que está viendo en este momento pues en mi sitio web personal no entonces todo este sitio lo he hecho desde cero con elementos entonces en este caso pues hay algunas personas que han preguntado priscila cómo puedo hacer yo ok para poder en este caso empezar totalmente desde cero con elementos borrando todo lo que tiene por defecto en este caso en un sitio web este okey este sitio web que les estoy mostrando en este momento es un sitio tal cual se muestra cuando nosotros instalamos el tema astra que es el que yo estoy usando para realizar en este caso mi curso de elementos ok que si no lo sabía va a encontrar la opción en la descripción de abajo del vídeo no entonces cómo voy a eliminar yo en este caso el encabezado como eliminó esta barra lateral como eliminó todo para que quede totalmente personalizable incluso este footer que encontramos en la parte de abajo ok entonces te voy a mostrar cómo no nosotros no vamos en nuestro escritorio de wordpress ok nos ubicamos en donde dice apariencia y hacemos clic en personalizar o kate ojo no todos los temas te van a permitir a ti poder eliminar todo hay unos temas que no te van a poder eliminar en este caso el footer hay otros que no vas a poder eliminar el menú ok depende muchísimo el tema que tú elijas en mi caso yo he escogido astra ok entonces nosotros estamos aquí en la opción de personalizado ok nosotros nos vamos a la opción que dice global ok y por ejemplo aquí en donde encontramos contenedor aquí nosotros vamos a poder en este caso por ejemplo en diseño vamos a poner ancho completo ok entonces ya se va a quitar como ustedes ven este fondo ok entonces diseño de la página nosotros también vamos a escoger en este caso ancho completo ok el diseño de la página del blog también todo lo vamos a seleccionar en este caso ancho completo ok perfecto entonces vamos nosotros a regresar ok a este menú principal hacemos clic en la opción que dice cabecera ok en la que dice cabecera principal que dice cabecera principal y aquí también seleccionamos ancho completo ok perfecto y en las demás opciones eso sí las dejamos tal cual vienen vamos a regresar nuevamente y hacemos clic en donde dice menú primario ok y aquí seleccionamos la opción que dice desactivar menú ok entonces como ustedes ven ya no aparece tampoco el menú en la parte de arriba perfecto entonces regresamos nos vamos en este caso a la opción que dice identidad del sitio ok identidad del sitio entonces si ustedes tienen en este caso algún logotipo o algo le sugiero que lo eliminen todo lo vamos a hacer el curso del evento ok todo lo vamos a hacer con elementos deslizamos un poco hacia abajo ok y desactivamos esta opción.

Encabezados y texto

Hola cómo estás mi nombre es priscila pazmiño y en este nuevo vídeo vamos a ver acerca de el texto y los encabezados en elementos si bien es cierto pues te había dicho que vamos a ver cada una de las herramientas que tiene el elemento en su versión gratuita ok para nosotros hacer un sitio como el que ya te muestre en el vídeo de introducción verdad entonces vamos a comenzar no nosotros estamos en nuestro escritorio wordpress ok tú deberías tener en este caso iniciada la sesión allí entonces algo muy importante para que tú puedas empezar que ya empezará a dictar esa página con elementos es muy importante que al tú ir a la sección de páginas ok en tu menú de wordpress en el lado izquierdo hacemos clic aquí ok y no va en este caso seguir la lista de todas las páginas que nosotros tenemos en este caso ok voy a hacer una página digamos de introducción sobre el curso de elementos gratuito ok entonces es muy importante si aquí no te sale editar con elementos tienes que hacer la configuración para que se pueda editar con elementos ok cómo lo vamos a hacer nosotros ya tenemos que tener en este caso instalado el plugin por supuesto que ya te había mencionado en el vídeo anterior de introducción ok que son dos plugins jim de elemento y el plugin de elementos heather footer and blogs ok entonces nosotros estamos ubicados aquí verdad en la página hacemos clic en edición rápida ok hacemos clic en la edición rápida y aquí en esta sección donde dice plantilla ok en este que estoy sembrando en este momento allí tienes que escoger aquí en esta lista elementos ancho completo ok es muy importante que tú definan esto porque si no en este caso no vas a poder editar toda la página como tal puede que te salga alguna barra lateral si tu tema tiene alguna barra lateral puede que te salga el tema de los widgets y todo lo demás entonces eso no queremos nosotros queremos editar al máximo esa página no entonces tenemos que seleccionar como plantilla elementos ancho completo ok en estado por supuesto la página tiene que estar publicada entonces una vez seleccionemos elementos ancho completo ahora si hacemos clic en actualizar ok y ahora sí pues ya en este caso ya va a quedar allí configurado que esa página está hecha para trabajarlas con elementos entonces una vez hecho esto nosotros simplemente ya hacemos clic ahora sí en editar ok y ahora si hacemos clic en editar con el elemento en la parte superior ok y ahora sí ya vamos a entrar al editor de elementos como tal no entonces esperamos simplemente un momento que cargue la página y listo si ustedes tuviesen algún tema que tiene un menú ya predefinido o en este caso un pie de página les va a salir aquí ok como les había mostrado pues nosotros estamos trabajando yo borre todo lo que venía con el tema estoy utilizando el tema astra ok pero eliminé el menú y elimine el pie de página ok porque quiero enseñarte a que tú sepas hacer desde cero un sitio completo ok si yo en este caso os actualizo la página vamos a ver ahora así que está todo en blanco porque porque hicimos ya la configuración de qué elementos va a ser en este caso el ancho completo como yo les dije seleccionen elemento ancho completo porque para que podamos en este caso editar todo ok como tú ves ya aparecía desaparecieron perdón esas barras que estaban en este caso en los extremos o que ese fondo como un poco gris los quitamos ok porque vamos a trabajar por completo ahora sí con esta página entonces es perfecto una vez dicho esto vamos a trabajar con esta primera sección que son los encabezados y el editor de texto ok entonces simplemente para ello empezar a utilizar el elemento toque por ejemplo hacer clic aquí en encabezado.

Secciones interiores

Hola cómo estás mi nombre es priscila pazmiño y en este nuevo vídeo vamos a ver en este caso el tema de las secciones interiores ok si bien es cierto habíamos visto ya cómo crear esta una portada muy similar a ésta como les digo esta va a ser nuestra página de ejemplo ok pero si la familia puntocom igual si quieres tomar algún ejemplo esta página te voy a dejar el enlace en la descripción del vídeo para que puedas verla y tomar ejemplo no entonces nosotros nos habíamos quedado hasta aquí ok habíamos aprendido a cómo hacerle en este caso un difuminado y en esta ocasión vamos a ver cómo añadir secciones interiores que yo les había dicho que algo muy similar a esto que estamos viendo aquí ok que hay dos columnas entonces vamos a seguir ok creando nuestra página ya en las secciones de abajo entonces para seguir agregando más secciones a mi sitio que debo hacer yo simplemente hago clic aquí en este símbolo que dice más añadir una nueva sección ok y seleccionó en este caso cuántas columnas yo quiero las columnas son esto de aquí ok es decir cómo voy a distribuir la siguiente para la siguiente sección ok de mi sitio web entonces en el caso de que nosotros por ejemplo deseamos ofrecer algo un servicio podemos utilizar por ejemplo las columnas productos servicios asesorías ok va a depender muchísimo realmente de cómo tú te quieras ir manejando ahora no te preocupes si por ejemplo eliges en este caso una sola sección ok con una sola columna y luego quieres añadir más como te había explicado anteriormente solamente tienes que hacer clic derecho aquí en editar columna ok y haces clic en añadir nueva columna y listo y así vamos añadiendo tantas necesites añadir nueva columna y así sucesivamente así que no te preocupes si no lo eliges bien a la primera ok entonces en este caso voy a eliminarla para eliminar es lo mismo clic derecho pero hacer clic en borrar ok o clic en borrar y nuevamente clic en borrar para solamente quedarme con una ok entonces aquí nosotros en este caso vamos a añadir una sección interior ok entonces qué sección interior es esta opción que ustedes ven aquí en básico ok nosotros simplemente arrastramos soltamos y que me va a permitir esto como tú lo ves ok dentro de esa sección grande voy a poder añadir otra sección pequeña ok entonces esto para que me va a servir por ejemplo en el caso en el que yo quiera poner algún título en grande ok y hablar de ciertas cosas de ese título por ejemplo esto de aquí que nosotros estamos viendo para que tú lo entiendas mucho mejor esto es una sección interior ok en la que aquí tenemos un título y aquí tenemos digamos otra distribución de columnas en la parte de abajo ok entonces cómo vamos a hacer esta esta parte de aquí nosotros en este caso en esta sección ok vamos a eliminarla para que entiendas cómo se hace una estructura como esa primero ok nosotros debemos añadir un encabezado es decir un título para esa sección y luego hacemos clic en estos cuadritos que están en la parte superior.

Añadir imágenes, vídeos, botones y mapas.

Hola cómo estás mi nombre es priscilla pazmiño y en este nuevo vídeo de este curso de elementos en su versión gratuita vamos a ver acerca de cómo añadir imágenes cómo añadir vídeos cómo añadir mapas y botones en nuestro sitio web nosotros en la lección anterior habíamos visto en este caso cómo añadir esas secciones interiores en las que vamos a meter allí botones imágenes como te había mencionado e incluso cajas de iconos cajas de imágenes que más adelante vamos a ver entonces nosotros en la edición de nuestro sitio web ok de nuestra página como tal en elemento nosotros estábamos en las secciones interiores ok entonces qué tenemos que hacer por ejemplo y nosotros en este caso queremos añadir una imagen ok recordemos que nosotros habíamos puesto en mi caso estoy haciendo una página ok una página sobre el curso elemento gratuito que estoy haciendo no voy a explicar en qué consiste el curso quién lo va a impartir ok una página muy profesional entonces aquí en donde dice que incluye este curso pues nosotros vamos a poner podemos poner allí imágenes como te digo botones o vídeos entonces por ejemplo nosotros podemos poner algún vídeo de introducción si es que de pronto tú estás haciendo alguna página para presentar tu proyecto ok puedes poner aquí algún vídeo de introducción entonces en mi caso como estoy haciendo lo del curso pues por ejemplo vamos a hacer en este caso una imagen la que vamos a añadir entonces nosotros simplemente arrastramos y soltamos pero suéltalo en este cuadrito no lo vayas a soltar por ejemplo en la parte de aquí arriba si ves porque se va a incluir en la parte de que incluye el curso y lo voy a soltar aquí para que veas ok como tú ves se añade justo debajo de que incluye el curso y nosotros no queremos tenerlo allí sino que te queremos tenerlo en la sección interior ok entonces hacemos clic arrastramos y soltamos aquí ok entonces ahora sí como tú ves ya me salen en este caso las imágenes allí entonces yo hago clic nuevamente en los cuadritos ok y puedo añadir una imagen en cada cuadro y hacemos clic en añadir ahora otra opción que tú tienes si quieres por ejemplo hacer ese proceso repetitivo yo que te sugiero hacer también por ejemplo haces clic derecho aquí en la imagen y haces clic derecho aquí y haces clic en duplicar ok dúplicas y arrastras la nueva imagen aquí depende como se te haga más fácil a ti puedes usar cualquiera de las dos vías ok yo por ejemplo utilizó el de duplicar porque sistema se como más más fácil más rápido más que todo aquí no entonces con el tema de las imágenes yo que te sugiero un tip buenísimo ingresa a esta página aquí te voy a dejar el enlace en la descripción ok que se llama iconos en png ok entonces tú aquí vas a encontrar cualquier cantidad de iconos que tú vas a poder usar en tu sitio web y todos no incluyen fondo qué quiere decir eso que vamos a poder por ejemplo si tú insertas aquí ok como tú es al yo poner el mouse encima de estas secciones se cambia el mouse perdón se cambia el color también aquí dentro de la foto como tal del y con it o sea el icono en sí son sólo las líneas ok si por ejemplo aquí está la ventana del texto pues ahí se pone todo blanco y todo celeste ok entonces lo mismo pasa con las demás figuras eso por qué porque estos iconos no tienen fondo ok es decir el fondo que yo le ponga se va adaptar como tú eras suele pasar que a veces nosotros ponemos un fondo a una imagen y se ve el cuadrito blanco ok de la imagen entonces eso estéticamente se ve mal entonces yo te sugiero que tú en este caso el tema de los iconos lo puedes manejar aquí ok tú puedes manejarlo aquí como te digo vas a encontrar cualquier cantidad de iconos sin fondo y eso viene muy bien entonces en este caso que estamos haciendo lo del curso nosotros podemos usar este buscador ok por ejemplo ponemos curso y hacemos clic en la lupita y nos van a salir en este caso imágenes que estén relacionadas a eso o que en este caso elemento es por ejemplo de computadora entonces por ejemplo yo puedo poner pc ok y me van a salir allí distintos iconos como te digo sin fondo que yo voy a poder utilizar en mi sitio entonces tú puedes descargarte cualquier aquí entonces encuentra alguno que te llame bastante la atención incluso hay unos que tienen por ejemplo como tú es una sección un cuadrito ok para que se vea más atractivo si quieres en este caso iconos que no tengan fondo sino que sólo sean línea como tú ves hay un montón realmente vas a encontrar bastante contenido o que hay bastantes iconos que te van a servir para que tú puedas personalizar tu sitio entonces esa parte de la voy a dejar a ti para que tú escojas lo que más te guste a ti.

Separadores y divisores de bloques

Hola cómo estás muy buenas tardes mi nombre es priscila pazmiño y estamos en este nuevo vídeo en el que vamos a ver ahora cómo añadir separadores y divisiones de bloques divisiones de secciones ok en tu sitio web entonces nosotros habíamos visto en este caso las lecciones anteriores pues cómo añadir distintas secciones como añadir columnas ok como irlas personalizando ahora vamos a ver cómo añadir divisiones para que para que se pueda diferenciar una sección de otra si bien es cierto tenemos aquí el título de una sección aquí el título de otro pero estéticamente todavía no se ve también nuestro sitio entonces vamos a partir desde la portada de lo más importante no entonces nosotros habíamos en este caso pues mostrado cómo añadir esta sección ok que aparece así como a un costado ok y también en este caso pues aprendimos cómo añadir imágenes entonces este espacio de aquí nosotros podríamos añadir algún botón o algo que nosotros querramos ok en los vídeos anteriores lo hemos visto en este caso a ver en este caso cómo añadir por ejemplo una división en esta sección de aquí como ustedes ven es como que muy brusco el hecho de que termina la portada y en la parte de abajo esto simplemente termina en una línea recta como que no se ve algún difuminado algo que esto que nosotros estamos viendo en este sitio web por ejemplo que es mi sitio personal si quieres vas a encontrar el enlace a mi página para que puedas tomarla de ejemplo en la descripción de este vídeo entonces por ejemplo esto que vemos aquí es más atractivo es como una ola por ejemplo entonces otra en este caso división es por ejemplo esta de aquí ok que como tú ves esto si es una franja pero es para destacar algo en esa página o también tenemos aquí otro tipo de división que son esta parte de que son montañas o que sean montañas entonces vamos a ver con nosotros podemos añadir eso a nuestro sitio entonces estamos en la portada vamos a ver cómo añadir una forma como ésta no entonces nosotros estamos en nuestro sitio web ok en la parte de sección de editar con el mentor entonces nos ubicamos aquí en donde está esta sección ok hacemos clic aquí en editar sección y aquí nos va a cambiar en este caso el panel en el lado izquierdo entonces qué tenemos que hacer nosotros vamos a esconder digamos a ocultar esta barra del fondo y nos vamos a ubicar en la sección que dice divisor de forma ok entonces aquí vamos a poder añadir un divisor arriba y abajo es decir vamos a poder añadir alguna forma una onda algo en la parte de arriba si así lo queremos y también en la parte abajo en este caso como estamos haciendo la sección de la portada sólo deberíamos añadir en este caso un divisor.

Implementando herramientas de Elementor en nuestra página

Hola cómo estás muy buenas tardes mi nombre es priscila pazmiño y en este nuevo vídeo de este curso de elementos en su versión gratuita ya hemos visto en esta primera sección que hemos visto todas las herramientas de en este caso les voy a mostrar todas estas herramientas del básico nosotros hemos visto cómo añadir encabezados secciones interiores imágenes texto y ‘dios botones separadores espaciadores mapas no entonces vamos a ver ahora ok antes de avanzar a la siguiente al siguiente grupo que es este grupo de general ok antes de empezar a ver este este tema del cual los cuadros de imágenes y demás vamos a ver como nosotros dejar ya lista ok las secciones en nuestro sitio para luego ir personalizando cada una ok nosotros estábamos haciendo este sitio web de prueba no estamos haciendo esta primera página sobre el curso del entorno entonces qué sería lo ideal aquí por ejemplo mantén siempre una digamos una misma línea si tú por ejemplo quieres que esto esté centrado entonces en la parte de abajo también elige que el texto esté centrado ok si por ejemplo quieres que todo esté alineado a la izquierda de que el título también esté alineado la izquierda que mantenga siempre un orden que mantenga siempre un orden entonces por ejemplo nosotros habíamos visto cómo añadir imágenes siempre asegúrate de añadir imágenes y cosas que se vean bien estéticamente ok que no tengan fondo por ejemplo ok que no en este caso pues tengan en este caso como les digo fondo blanco para que no se vaya a ver aquí la imagen y con un fondo blanco y se va a ver aquí un cuadro que realmente no se ve también entonces nosotros vamos a subir un archivo ok hacemos clic en seleccionar archivos entonces en mi caso pues voy a seleccionar una imagen ok esta de aquí en este caso sin fondo la voy a escoger sin fondo ok perfecto aquí está entonces hago clic en insertar medio y como tú ves se añade en este caso la imagen sin fondo que como te digo tú cuando en este caso escojas imágenes así asegúrate de que no tenga un fondo para que estéticamente se vea bien ok ahora con el tema de los cortes el cómo eliminar el fondo te sugiero en este caso pues que utilices herramientas profesionales ok para que no se vea por ejemplo si notas que se ve como que un poco el corte okey blanco entonces si yo lo pongo en un fondo de color si se va a notar que el corte está mal realmente entonces asegúrate de eso no asegúrate de que se vea bien más que todo porque es imagen tuya no imagen de tu negocio pero lo que voy a que por ejemplo se utilizan las imágenes así asegura asegúrate de que no tenga un fondo ok como esto por ejemplo que no tiene fondo y la de abajo por supuesto que sí pero es porque digamos como una casilla no es como una casilla entonces básicamente eso entonces aquí la idea sería de que tú insert es alguna imagen ok puede ser el logo de tu marca pero algo que se vea muy limpio ok algo que se vea muy limpio en este caso voy a seleccionar aquí la imagen en este caso el logo por ejemplo puedo seleccionar algún logo de puede seleccionar algún logo de tu empresa.

Cuadros de imagen

Hola cómo está mi nombre es principal miño y en este nuevo vídeo vamos a hablar o kate acerca de cómo añadir cuadros de imagen en nuestro sitio si bien es cierto nosotros estamos tomando de ejemplo mi página personal mi sitio web personal que va a encontrar el enlace en la descripción no entonces aquí nosotros por ejemplo teníamos esto de aquí estos son cuadros de imagen ok como tú ves la imagen es sumamente pequeña y en este caso lo que nosotros hemos venido tratando hasta ahora en esta etapa del curso pues hemos visto cómo añadir por ejemplo imágenes así entonces puede que a ti no te llame la atención una imagen tan grande quieres algo más pequeño algo más sutil ok algo como esto entonces vamos a aprender a hacerlo de las dos maneras primero adaptando esta sección que nosotros tenemos ok para que se vea como en este caso aquí esos botones y luego más hacer la prueba con una caja de imagen un cuadro de imagen ok para que veas la diferencia y tomes tú la decisión de cuál te gusta más entonces vamos a partir primero de esta sección no cómo hacer digamos nosotros un cuadro de imagen cómo hacerlo nosotros no entonces nos ubicamos en este caso aquí en la sección que dice editar con ok nos ubicamos aquí hacemos clic aquí y nos vamos a la sección estilo ok entonces nos vamos a la sección que dice borde ok y recuerda que nosotros habíamos visto el cómo añadirle ok los bordes en los botones entonces también podemos añadirle en este caso bordes a las columnas como tal ok si yo me pongo aquí voy a añadir un borde a toda esta franja todo este cuadro ok no sólo a la imagen si yo me coloco en la imagen le voy a añadir un borde sólo a la parte de la imagen por eso la importancia de que tienes que seleccionar columna ok entonces nos ubicamos en tipo de borde podemos poner por ejemplo sólido ok y recuerda ponerle un ancho porque si no no se te va a mostrar ningún borde ponemos uno ok por ejemplo y podemos ponerle un color en este caso podemos ponerle por ejemplo en verde un negro ok el color en este caso que tú elijas por ejemplo si le ponemos un 5 si vamos a ver el borde si le ponemos el 1 porque no lo vemos porque justo ocupa esta línea que está punteada aquí ocupa esa franja entonces por eso no la vemos pero no pienses que nos está añadiendo vamos a verla en un momento como es entonces aquí en radio va a ser como la sabía mencionó anteriormente es la curvatura ok la curvatura en este caso de ese borde entonces vamos a ponerle por ejemplo 50 que yo les dije que es un por de cuerdo y como ustedes ven ahora si ya se ven no la cajita ahora ya se ve la cajita entonces voy a hacerlo como que esté un poco más encajado que no quede todo porque si yo hago el mismo borde lo aplicó las demás pues van a estar las cajas como pegadas entonces si nosotros lo vemos aquí se ve como separado y se ve más bonito entonces vamos a hacerlo así no nosotros ok una vez que tengamos hecho eso por ejemplo si hacemos clic en sombra de la caja se va a añadir esa sombra que les estoy diciendo ok si nosotros quitamos aquí el número uno o simplemente quitamos el borde no ponemos nada se va a añadir un borde ok pero como ustedes ven con las sombras y resalta si yo le quito la sombra haciendo clic aquí no se nota pero si yo le añado las sombras y se nota esa curvatura del borde no entonces como le añado yo esa para que se vea como encajado y no se vea en este caso que ocupe al ras de la columna nosotros nos vamos a la sección avanzado ok y vamos a hacer uso de en este caso el relleno ok vamos a hacer uso del relleno entonces podemos poner perdón vamos a hacer uso en este caso del margen entonces nosotros no vamos a quitar aquí el enlace porque si queremos que se añada en este caso ese margen en todos lados entonces por ejemplo ponemos 10 aquí y como tú ves allí ya se encapsula esa sección ok entonces así es como tú añades por ejemplo tú haces una caja de iconos pero sin añadir la función caja de iconos y no ya es esto más bien es en el caso que tú quieras usar imágenes un poco grandes.

Cajas de icono

Hola cómo estás mi nombre es priscila pazmiño y en este nuevo vídeo acerca de este curso de elementos la versión gratuita vamos a ver acerca de las cajas de icono ok en el vídeo anterior pues habíamos aprendido cómo añadir en este caso cajas de imagen cuadros de imagen en los que podríamos hacer cosas como ésta o kate y también usando la caja de imagen cosas como ésta entonces ahora vamos a ver cómo hacer algo similar pero con iconos ok iconos que ya incluye elementos y que nosotros no vamos a tener en este caso que estamos buscando porque ya van a venir incluidos entonces vamos a ver cómo añadirlos no vamos a añadir una nueva en este caso sección aquí vamos a duplicar esta sección que se encuentra aquí para que ustedes vean la diferencia en cada uno entonces aquí vamos a borrar todo esto que se encuentra aquí y vamos a dejar solamente una ok y vamos a borrar el resto para poder nosotros añadir igualmente tres cajas de icono ok añadimos columna perfecto entonces nosotros nos ubicamos en estos puntitos que se encuentra en la parte de aquí arriba y seleccionamos bajamos un poco vamos a ocultar esta sección que dice básico y en esta sección que dice general vamos a encontrar caja de iconos ok vamos a arrastrar y soltar hemos aquí recuerden en la misma casilla en que ustedes desean insertarlo ok lo pegan aquí y lo mismo en este caso hacemos con el resto añadimos aquí otra caja y añadimos aquí otra caja no vayan a pensar que en esta hubo un error lo que pasa es que recuerden que solamente deje una columna y por ende pues me tomo s lo del borde y todo lo demás vamos a eliminarla para que no se confundan ok y vamos a duplicar esta columna perfecto ok entonces esto es una caja de iconos como ustedes ven el icono ya sale entonces nosotros simplemente nos ubicamos aquí en el lápiz y nos va a salir aquí biblioteca de iconos entonces vamos a poder escoger un icono de la biblioteca de elementos que va a incluir cualquier cantidad de iu con los chicos no importa si ustedes desean por ejemplo añadirle una computadora hay muchísimos por ejemplo si ustedes ponen en este caso por ejemplo van a encontrar allí compacto compresión ok si ustedes por ejemplo ponen pc van a encontrar en este caso snap tour o sea les va a encontrar en este caso los nombres que tengan esas palabras que ustedes están poniendo allí entonces ustedes pueden buscarlos aquí o también buscar los así nomás desplazándose para que ustedes vayan viendo cuáles son los tipos de iconos que se incluyen aquí y como les digo hay una gran gran variedad entonces por ejemplo nosotros vamos a poner allí una alguna computadora ok entonces simplemente nosotros nos deslizamos y buscamos el icono de alguna computadora o como les digo si ustedes ya se saben el nombre de ese icono como tal ustedes lo pueden seleccionar porque lo pueden buscar un buscador de arriba por ejemplo aquí hay una laptop no vamos a poner una laptop hacemos clic en insertar ok para que se inserten.

 Valoraciones de estrellas

Hola cómo estás mi nombre es priscila pazmiño y bienvenido a este nuevo vídeo de este curso de elementos en el que vamos a ver cómo añadir valoraciones de estrellas ok si bien es cierto nosotros estábamos haciendo en este caso una página de inicio ok entonces tú puedes querer por ejemplo que en tu sitio web se muestre no sé en alguna sección de tu página algo tipo comentarios ok comentarios de las personas valoraciones en tus productos ok como tú deseas puedes manejarlo entonces también vamos a tener la opción en este caso con elementos de poder añadir esas estrellitas ok que en algún momento tuviste que haber visto tanto en productos como te digo como en comentarios opiniones de personas ok y al lado de esos comentarios sale hay una valoración en estrellitas entonces eso por supuesto va a hacer que aumente ok esa confianza en este caso entre tu sitio y el visitante no entonces esta es la página que nosotros estábamos creando ok en esta sección por ejemplo de que dicen nuestros alumnos que estábamos haciendo voy a añadir en este caso un pequeño comentario muy breve y una valoración de estrellas ok entonces vamos a ver cómo podemos añadirlo entonces nosotros ok estábamos en este caso en el editor de elementos de nuestra página ok entonces nosotros nos vamos a ubicar aquí por ejemplo en la sección en la que nosotros querramos añadir esa valoración ok por ejemplo supongamos que aquí nos dice priscila palmeño y un pequeño texto no entonces nosotros hacemos clic en donde dice valoración de estrellas arrastramos y soltamos ok podemos soltarlo arriba o en la parte de abajo va a depender de nosotros donde queremos añadir esas estrellas no esa valoración entonces bien aquí nos van a aparecer las estrellas que si bien es cierto por el tema del color no se nota mucho no entonces que podamos hacer cambiar o que de cambiar el fondo en este caso recuerden que en este curso les he dicho que vamos viendo ok el tema de cómo estructurar la darle forma ya de manera real pero como ‘la tenemos el tema colores por supuesto va a depender muchísimo en este caso de cuáles será la paleta de colores de ustedes.

Carruseles de imágenes y galería

Hola como estaba mi nombre es priscila para miño bienvenidos a un nuevo vídeo de el curso de elementos versión gratuita en este vídeo de hoy vamos a hablar acerca de los carruseles de imágenes y la galería para que primero tengas una idea de para que puedes darle uso a cada una te lo voy a explicar ok los carruseles en este caso como tú estás viendo aquí en la pantalla de nuestro panel de elementos ok aquí tenemos la opción no estamos en la opción general ok de todas las herramientas hacemos clic aquí para ver las herramientas y seleccionamos general no entonces vamos a tener aquí carrusel de imágenes y galería como tú lo ves en la imagen un carrusel de imágenes no es más que imágenes que se van deslizando en que se van deslizando una hacia otra hacia la derecha a la izquierda ok en cambio una galería es en este caso algo similar a esto ok como tú estás viendo aquí que se nos muestran tres cuadros de imágenes ok en cambio la galería serían tres imágenes ok tres o cuatro dependiendo de eso lo podemos configurar pero esa es la diferencia que una en este caso son fotos imágenes que se van deslizando o que en cambio la otra están estáticas allí o que ya no salen todas las imágenes de golpe cambio en la otra pues nosotros podemos elegir si se van en este caso moviendo de dos en dos de tres en tres pero siempre con un deslizamiento que esa es la diferencia entonces vamos a verlo ya en la práctica aunque como podemos en este caso añadir una como podemos añadir la otra y personalizar cada una no para que tomes la decisión en este caso de cuál te gusta más cuál quieres aplicar de tu sitio entonces nosotros vamos a añadir una nueva sección ok vamos a hacer clic en la parte aquí abajo en el símbolo del más vamos a hacer vamos a seleccionar en este caso la estructura solamente de una columna ok y en esta columna vamos a añadir ok en primer lugar el carrusel de imágenes no recuerda nos ubicamos en los cuadritos ok para ver las secciones ocultamos esta sección básica y nos ubicamos ahora en la sección general no vamos a seleccionar carrusel de imágenes arrastramos y soltamos ok entonces perfecto ya no va a salir allí el icono por supuesto no sale la imagen porque aún no la hemos seleccionado que entonces en el lado izquierdo nos va a mostrar ninguna seleccionada nosotros hacemos clic aquí en este cuadrito que sale para añadir entonces yo voy a seleccionar estas imágenes ok para tu poder seleccionar varias imágenes recuerda tener aplastada la tecla shift ok recuerda tener aplastada la tecla shift y haces clic en una en la otra y en todas las que desees entonces añadí estas imágenes entonces vamos a hacer la prueba con el carrusel hacemos clic aquí abajo que dice crear una nueva galería ok entonces perfecto se nos van a añadir allí las imágenes en este caso hacemos clic en insertar galería ok y como tú ves pues ya nos sale allí nuestro carrusel de imágenes ok como sé yo que es un carrusel porque aquí incluso no salen las flechas ok si tú ves y haces clic aquí en la flecha como como te mencioné anteriormente siempre hay un deslizamiento no se van mostrando todas las imágenes ok entonces nosotros vamos a poder elegir en este caso el tamaño de cada imagen podemos elegir por ejemplo que se muestre medium son un poco más grandes.

Listado de iconos

Hola cómo estás mi nombre es priscila pazmiño bienvenida a este nuevo vídeo de el curso de elementos en su versión gratuita en el vídeo de hoy vamos nosotros aprender cómo añadir una lista de iconos ok para quien nos va a servir una lista de iconos para en este caso podemos añadir lo vamos a ver en una sección final de este curso como añadirlo en un menú en el futuro de nuestra página vamos a poder utilizar esa línea de esa lista de iconos para poder mencionar algunos beneficios de lo que nosotros ofrecemos para dar en este caso algunos tips ok las funcionalidades los extras cualquier utilidad que tuvo el steam es conveniente a esta sección entonces voy a explicarte cómo añadirla para que vayas abriendo un poco tu mente y vaya siguiendo en que lo puedas aplicar dependiendo de tu proyecto no entonces nosotros en nuestra página ok vamos a añadir una nueva sección y hacemos clic en el simbolito del más ok y seleccionamos en este caso una estructura de una columna ok entonces recuerdan en el lado izquierdo nos vamos a ubicar en donde están los cuadritos ok y vamos a seleccionar en este caso listado de iconos ok entonces vamos a seleccionar arrastramos y soltamos ok entonces aquí nos van a aparecer distintos elementos ok ya predefinidos pero no vamos a poder editarlo entonces en esta sección de aquí nosotros por ejemplo si hacemos clic aquí ok vamos a poder en este caso poner y rápido ok y vamos a poder también cambiar el icono ok por ejemplo si nosotros hacemos clic aquí en biblioteca de iconos vamos a poder añadir por ejemplo cualquiera de estos iconos que se nos van a mostrar aquí si nosotros en este caso por ejemplo escribimos card de carro vamos a poder incluso ver alguna algún icono sé por ejemplo os ofrecemos servicio de transporte ok queremos poner en este caso algún auto podemos hacerlo por ejemplo seleccionamos aquí ok que estamos clic en insertar y como tú ves se añade el icónico entonces por ejemplo si nosotros queremos que cuando la persona haga clic aquí lo lleve a algún lado también vamos a poder hacerlo o kate añadimos el enlace en la parte de aquí y vamos a llevarlo no importa si lo quieres llevar a una sección de tu página a una sección externa no importa puedes poner la dirección que tú desees ok recuerda que cuando sea un lugar que esté dentro de tu mismo sitio web déjalo tal cual pero cuando tú estés llevando a la persona a una página que sea externa a tu sitio web siempre acostúmbrate a hacer clic en donde dice opciones del enlace y hacer clic en donde dice abrir en nueva ventana porque porque si tú no selecciona en esta opción y tú lo dejas así en blanco entonces qué va a pasar que la persona va a hacer clic aquí y automáticamente va a salir de tu sitio web ok entonces eso no es bueno para el tema experiencia usuario para el tema tasa de rebote y todo lo demás no entonces ten cuidado con eso cuando tú lo lleves un sitio que es externo a tu sitio web siempre acostúmbrate a poner a abrir en una nueva ventana.

Contadores

Hola cómo estás mi nombre es priscila para miño y bienvenido a este nuevo vídeo del curso de elementos en su versión gratuita en este vídeo de aquí te voy a mostrar cómo añadir contadores a tu sitio web ok contadores para que contadores en los que tú vas a poder mostrar cuántos trabajos cuántos trabajos ha realizado por ejemplo tus clientes cuántos clientes tienen satisfechos cuántos proyectos has terminado se encuentra en cuántas cosas has colaborado en fin el uso que tú le quieras dar a esta herramienta de elementos de acuerdo a tu proyecto a lo que tengas en mente no entonces bueno vamos a comenzar no nosotros estamos aquí ok en el editor de mentor de nuestro sitio entonces vamos a realizar hacia abajo y vamos a añadir una nueva sección ok vamos a hacer clic aquí en este símbolo de lo más añadir una nueva sección y vamos a escoger en este caso esta opción que dice una sola columna ok si deseas añadir más contadores puedes añadir por ejemplo tres o cuatro columnas no importa si al principio no lo eliges bien luego vas a poder añadir más columnas ok entonces por ejemplo seleccionemos la estructura de cuatro columnas ok entonces nosotros nos ubicamos aquí en los puntitos que sean en la parte superior ok para seleccionar las herramientas recuerden que estamos trabajando ahora con el bloque general ok entonces realizamos un poco hacia abajo y vamos a encontrar aquí la opción que dice contador o que entonces vamos a arrastrar y soltar aquí porque entonces como tú es esto es un contador no una vez ya lo arrastres te va a salir aquí la opción para editarlo entonces aquí vamos a poder poner nosotros los números por ejemplo 20 ok si nosotros seleccionamos un prefijo de número y nosotros ponemos por ejemplo el + eso se va a mostrar antes de cada número ok y si nosotros ponemos sufijo en este caso de número podemos por eso se va a mostrar luego de el número que nosotros pongamos ok dependiendo si nosotros queremos poner por ejemplo hay sitios web que muestran el más antes en cambio de otros que lo muestran el más después del número cualquier opción es válida como te digo vas a poder escoger lo tu aquino si nosotros hacemos que por ejemplo en esta parte que dice duración de la animación aquí vamos a poder seleccionar qué tan rápido van aumentando esos números.

Barras de progreso

Hola cómo estás mi nombre es priscila pazmiño y en este nuevo vídeo te voy a explicar como tú puedes añadir en este caso una barra de progreso en tu sitio web para que para que tú puedas por ejemplo si tú estás realizando alguna landing o quieres hacer una página súper atractiva y añadirle una página de progreso que te va a servir muchísimo sobre todo en una landing ok entonces te animo a que me acompañes porque te voy a explicar cómo añadirle cómo personalizarla ok con elementos entonces bien vamos a comenzar no nosotros estamos aquí en nuestra pantalla ok de edición de una página en elemento entonces vamos a hacer clic en añadir una nueva sección ok y añadimos el ancho de una columna ok entonces perfecto una vez hemos añadido aquí el espacio vamos a hacer clic en los cuadritos que están arriba y vamos a ubicarnos en la sección general y vamos en este caso a la opción que dice barra de progreso ok hacemos clic y soltamos aquí entonces como tú ves aquí nosotros podemos hacerlo podemos darle un uso variado por ejemplo y tú estás creando alguna página web de tu portafolio ok a una web tuya como profesional como independiente como freelancer tú puedes en este caso añadir allí por ejemplo tal cual trabaja aquí mis habilidades y pues en este caso añadir pues varias habilidades que tú tengas ok por ejemplo no sé diseño creatividad estilo rapidez adaptación al cambio el uso que tú le quieras dar hablando en este caso de que vayas a crear un sitio web para un freelancer en este caso también le puedes dar otro uso que a una landing ok si por ejemplo tú estás creando una landing no sé si te ha fijado que por ejemplo cuando tú recién llegado a una landing te pone allí estás en el 10% y tú vas leyendo vas leyendo haces clic en quiero inscribirme y te lleva a otra página en la que en la parte superior te dice aquí ya estás a punto de terminar y te sale ahí 90% por ejemplo ese uso también tú le puedes dar ok si en este caso tú estás creando una landing estás creando un panel puedes también hacer uso de este tema de los contadores porque también ayudan muchísimo sobre todo y esa sensación de urgencia a el visitante o que ya es el lead que tú quieres en este caso generar entonces bien si tú no te ubicas aquí en donde dice título no te vas a poder asignarle un título como todo es aquí que dice mis habilidades por ejemplo entonces puedes poner allí tal cual puedes dejarlo por ejemplo en mis habilidades y donde dice tipo aquí te va a decir información ok como tú ve es el aspecto cambia un poco.

Recomendaciones/Testimonios

Hola cómo estás mi nombre es priscila pazmiño y bienvenido a este nuevo vídeo de mi curso elemento en su versión gratuita ok entonces en el vídeo de hoy te voy a mostrar como tú puedes añadir a tu sitio web a tu landing page o una sección de recomendaciones de testimonios ok para que tú puedas añadir por ejemplo algún comentario o alguna recomendación que te ha dado un cliente tuyo quieres plasmarla en tu sitio web vas a poder ok entonces te voy a mostrar cómo hacerlo no una vez nosotros nos encontremos aquí ok en nuestro editor de nuestro sitio web en elemento nosotros vamos a deslizar 2 y vamos a añadir una nueva sección haciendo clic en el símbolo del más ok vamos a seleccionar en este caso una estructura de una sola columna ok nos ubicamos en los cuadraditos que se encuentran en la parte de arriba ok vamos a seleccionar aquí y en la sección de general en este bloque general nosotros vamos a ubicar esta opción que dice recomendación ok 7 por esta ventanita que sale como de opiniones arrastramos y soltamos aquí ok entonces como tú es solamente voy a comer ya sabemos la estructura que tiene no entonces ahora vamos a personalizar esa estructura si por ejemplo aquí en contenido tubo ras todo ok vas a poder en este caso ver que escribir perdón que es lo que tú quieres que se muestre y en esa parte de tu sitio entonces por ejemplo podemos poner este curso y me han seguido de muchísima utilidad y ponemos allí y gracias perfecto entonces aquí tenemos un comentario y un recomendación de algún cliente entonces si nosotros hacemos clic en seleccionar imagen vamos a poder en este caso definir una imagen que salga aquí junto al nombre de la persona ok vamos a poder definir eso si por algún motivo no queremos en este caso que se muestre la imagen pues solamente nosotros deberíamos hacer clic en eliminar ok y como tú ves se elimina el cuadrito de la imagen ok si por ejemplo no quieren mostrar la foto de la persona trabaja poder mostrar el nombre no hay ningún problema ok entonces como tú ves así es cuando lo quitas vamos a hacer un ejemplo ahora añadiendo una imagen hacemos clic en seleccionar imagen en la parte de aquí y vamos a escoger en este caso una imagen no vamos por ejemplo esta de aquí hacemos clic en insertar medio y listo entonces en tamaño de la imagen aquí seleccionamos si queremos que sea tornel.

Pestañas interiores

Hola cómo estás mi nombre es priscila pazmiño y bienvenidos a un nuevo vídeo de mi curso de elementos en su versión gratuita en este vídeo de hoy vamos a ver cómo nosotros podemos añadir pestañas interiores personalizadas en nuestra página web ok entonces a qué se refiere esto no páginas pestañas personalizadas perdón es básicamente cuando nosotros por ejemplo estamos en un sitio no y supongamos que en la parte de aquí pues se me van mostrando distintas pantallas pero no forma parte del menú sino que forma parte de esta página en específico entonces si por ejemplo yo tengo alguna sección como ésta en la que me indica en este caso distinta servicios que nosotros podemos ofrecer entonces nosotros podemos hacer una segunda pestaña en dentro de esta misma página una pestaña que me hable de mis vídeos otra pestaña que hablé de mis emprendimientos y otra pestaña por ejemplo que hable de mi comunidad o qué vas a poder darle el uso que tú estime conveniente entonces vamos a ver cómo podemos hacerlo ahora sí aplicando en nuestro sitio web no nosotros estamos aquí en este caso en nuestro editor de elementos ok entonces vamos a añadir una nueva sección hacemos clic en este sea un bonito delmás en la parte de abajo vamos a seleccionar una estructura de una columna ok entonces nosotros hacemos clic en los cuadritos que se ubican en la parte aquí arriba ok nos vamos a ubicar en el bloque general y vamos a hacer clic en la opción que dice pestañas ok que como todo sale como una carpetita hacemos clic allí arrastramos y soltamos aquí ok entonces como tú ves así es como se muestra no el tema de las pestañas que yo te iba diciendo es como un menú pero está dentro de nuestra página entonces si por ejemplo yo hago clic aquí en pestaña número uno yo voy a poder editar esa sección de allí ok por ejemplo voy a poder poner en este caso productos ok puedo poner productos por ejemplo y en la parte de aquí yo voy a poder editar aquí por ejemplo puede poner producto 1 íbamos a poder añadir incluso alguna imagen por ejemplo producto 1 hacemos clic en añadir objeto en la parte de aquí ok íbamos a poder seleccionar por ejemplo una imagen producto 1 vamos a seleccionar en este caso este icono de aquí hacemos clic en insertar ok y como tú ves se va a mostrar allí en este caso esa foto nosotros podemos poner allí por ejemplo producto 1 perfecto excelente estado no sé excelente estado entonces así es como tú vas personalizando en este caso cada sección ahora sí por ejemplo sólo quieres mostrar productos puedes hacerlo así no tú quieres ok entonces vamos a añadir una nueva pestaña y nos dice pestaña 2 vamos a poder poner en este caso el portafolio o producto 2 y en la parte de aquí producto 1 o la de igual el uso realmente que tu estima es conveniente entonces aquí que estamos en productos vamos a poder poner otra foto u otra descripción o sea realmente el uso que tú le des va a depender si quieres mostrar imágenes o si quieres mostrar texto ok en qué caso tú vas a poder mostrar imágenes por ejemplo si tú estás vendiendo algún producto o qué estás ofreciendo algún servicio.

Acordeones/Alternar

Hola como estaba muy buenas tardes mi nombre priscilla para miño y en este nuevo vídeo te voy a explicar a cómo añadir acordeones y cómo añadir la sección de alternar y eso para que te va a servir para añadir una sección de preguntas frecuentes personalizada en tu sitio web algo muy en este caso útil que seguro en este caso te va a ahorrar muchísimo tiempo en tu sitio por supuesto si tu sitio aplica no entonces va a depender también del negocio que tengas de si le vas a encontrar un buen uso o no a esta herramienta entonces te voy a la tele voy a explicar lo que nosotros en este caso pues nos vamos al editor ok el editor de nuestro sitio web ok entonces con elementos una vez nosotros estemos aquí vamos a añadir una nueva sección ok hacemos clic en el símbolo más y añadimos una estructura no de una columna entonces nosotros aquí vamos a añadir en este caso una herramienta nos ubicamos en la sección de general ok y hacemos clic en esta opción de aquí abajo que dice acordeón ok vamos a seleccionar primero vamos a usar una con acordeón y luego vamos a seleccionar alternar ok que son básicamente son técnicamente lo mismo entonces vamos a ver las añadimos acordeón arrastramos y soltamos aquí ok entonces si tú te fijas en el lado izquierdo pues vamos a tener la opción de editar cada una de estas secciones aquí que sería lo ideal poner las preguntas frecuentes ok este es el uso que tú le puedes dar entonces pregunta 1 le podemos poner aquí es gratis ok y en la parte de aquí abajo entonces que sale para editar un texto aquí ponemos la respuesta este va a ser el texto que va a aparecer aquí ok la respuesta entonces vamos nosotros a poner por supuesto que sí ok vamos a eliminar perdón está este texto que sale primero y ponemos por supuesto que sí ok entonces así sucesivamente con las demás preguntas entonces vamos a hacer clic aquí en el título donde dice gratis para digamos minimizarlo ok íbamos a poder seleccionar la otra opción entonces aquí volvemos a poner otra pregunta ok como te digo esto es totalmente personalizable la idea es que tú allí pon más preguntas que de acuerdo a tu negocio de acuerdo a lo que tú necesites pues que ahorren tiempo la idea precisamente de la sección de preguntas frecuentes es ahorrar dinero y tiempo ok porque hay personas en este caso que requieren alguna cotización no requieren saber si tal cosa cuesta o no entonces nosotros lo podemos evitar creando esta sección.

Iconos sociales personalizados

Hola cómo estás mi nombre es priscila pazmiño y en este nuevo vídeo te voy a explicar cómo añadir iconos sociales a tu sitio web iconos sociales como súper personalizables por ejemplo en este que es mi sitio web personal el que estás viendo en este momento en esta sección de aquí donde dice conecta conmigo ok aquí tengo un enlace que lleva a mi canal de youtube ok si yo hago clic aquí me lleva a mi canal de youtube si yo hago clic aquí me lleva en este caso a mi página en facebook a mi página en instagram y así sucesivamente con cada una de las páginas que está bien entonces eso es lo que tú vas a poder añadir en este caso en tu sitio web ok si hacemos el tema de integrar botones sociales a tu página entonces vamos a ver cómo hacerlo nosotros estamos ubicados aquí en esta sección de elementos ok de nuestra página web ahora deslizamos un poco hacia abajo vamos a añadir por ejemplo en esta pantalla principal ok supongamos que ya no queremos un botón sino que queremos en este caso añadir unos botones sociales allí y entonces vamos a eliminar por ejemplo esta sección de botón aquí vamos a hacer clic en borrar ok esto ustedes ya lo han visto en los vídeos anteriores de este curso entonces vamos a ubicarnos aquí en la sección general deslizamos un poco hacia abajo y ubicamos esta opción iconos sociales ok entonces arrastramos y soltamos en la parte de aquí abajo ok entonces por defecto me van a salir esos tres esas tres redes ok que como ustedes ven en el lado izquierdo ya se me actualizo la página entonces vamos a ver cómo personalizarlas si nosotros hacemos clic aquí en facebook vamos a poder cambiar el icono ok si nosotros hacemos que en biblioteca de iconos vamos a ver otros logos en este caso de facebook aquí me van a salir ya los recomendados que son todas las redes sociales ok pero si yo me voy aquí donde dice todos los iconos ok por ejemplo como tú ves me sale en facebook con el ojo cuadrado me sale el logo de facebook messenger me sale el facebook pero sólo con la efe ok entonces por ejemplo yo hago clic en sololá efe insertar y como tú ves se pone ese icono que yo acabo de seleccionar ok entonces nosotros aquí en la sección que dice enlace tu vas a poner el enlace a tu página ok es decir facebook.com slice tu página ok en mi caso facebook.com es la crisis la familia mendoza ok si tú tienes tu fan page ya creada pone aquí el enlace en tu fan page y muy importante no te olvides cuando tú añadas el enlace siempre haz clic en abrir abrir una nueva ventana ok no lo dejes sin el visto en esta casilla por qué porque si tú le quitas el visto vas a hacer que cuando la persona haga clic en tu enlace en esa misma pantalla se abra el facebook y automáticamente va a salir de tu sitio y eso para el ceo no es bueno ok entonces recuerda que siempre tenemos que nosotros tratar de tener a la persona el mayor tiempo posible en nuestro sitio y si tú desactivas está casilla no te van a ayudar en eso ok entonces siempre haz clic en añadir en una nueva ventana añades aquí el enlace de tu facebook y eso es todo lo mismo sucede en el caso de las demás redes sociales si por ejemplo tú no tienes twitter ok pero quieres añadir a una otra red social no hay problema tú haces ok te ubicas en biblioteca de iconos y por ejemplo seleccionas whatsapp ok haces clic en insertar y ya se va a añadir whatsapp que incluso se cambia de nombre o sea no es obligación que utilices eso que están aquí puedes incluso eliminarlos y solo te quedas con los que vayas a utilizar ok entonces aquí tenemos youtube puedes también añadir más redes si así lo deseas hacemos clic en añadir elementos y añadimos por ejemplo clic en biblioteca de iconos puedes añadir por ejemplo correo ok puedes añadir otro con por ejemplo spotify chicos aquí tienen un montón de redes así que no voy a hacer la prueba con cada una de ellas ok recuerda poner el enlace aquí de tu red y hacer clic en opciones del enlace y siempre fijarte que esté marcada la casilla de abrir en una nueva ventana.

Mensajes de alerta

Hola cómo estás mi nombre es prince y la pazmiño y en este nuevo vídeo te voy a explicar cómo añadir mensajes de alerta personalizados en tu sitio web esto para qué para por ejemplo si tú tienes alguna sección en la que la persona tenga que iniciar sesión y tienes alguna sección en la que la persona tenga que llenar sus datos tengan que poner alguna información importante y tú quieras que al principio ok esté una sección en la que diga por favor revisa bien la información que va a ingresar o algún mensaje de advertencia como ese este vídeo es precisamente para explicarte cómo añadirlo ok entonces nosotros estamos ubicados aquí en nuestro editor ok de la página web de este curso entonces vamos a añadir nosotros una nueva sección ok hacemos clic aquí en añadir una nueva estructura y seleccionamos una columna ok entonces en el lado izquierdo de herramientas vamos a ubicarnos en la sección general ok vamos a deslizar un poco hacia abajo y nos vamos a ubicar en esta opción que nos dice alerta ok vamos a hacer a arrastrar soltamos y aquí se nos va a añadir como tú ves este es el aspecto que tiene ese mensaje de alerta si nosotros aquí en tipo seleccionamos por ejemplo advertencia se torna un color amarillo si seleccionamos correcto se portaban a un color verde o peligro ok se seleccionan se torna un color rojo entonces aquí ponemos podemos poner por ejemplo aviso importante dos puntos entonces aquí tú le puedes poner en este caso el mensaje que quiere transmitirle a la persona en este caso revisa la información antes de enviarla qué importante revisa la información antes de enviarla botón de descartar en este caso mostrar u ocultar esto qué es esto quiere decir que si nosotros queremos que se muestre como tú ves aquí ok sale una cruz entonces si la persona hace clic allí se va a cerrar ese aviso entonces yo puedo darle a la persona la opción de que ese botón de allí se muestre o que se oculte si lo oculto qué pasa que se va a quedar allí estático es si la persona no lo va a poder y ocultar ese mensaje siempre le va a aparecer ahí ese aviso.

Añadir música

Hola cómo estás mi nombre es prince y la paz miño y en este nuevo vídeo te voy a explicar cómo añadir música a tu sitio web ok lo vamos a hacer con una herramienta vamos a necesitar en este caso de esta página tener una cuenta ok en esta página que se llama soundcloud puntocom entonces solamente vamos a tener la opción de añadir música que se encuentre en este en este caso repositorio de música así que por esta ocasión de música pues no vamos a tener mucha variedad porque como les digo sólo vamos a poder utilizar esta música que vamos a encontrar aquí ok ahora como nosotros añadimos en este caso música de ser repositorio esto lo aclaro desde un principio porque por supuesto si quieres añadir música de alguna otra en este caso herramienta pues no vas a poder actualmente entonces como lo hacemos nosotros aquí nos ubicamos en donde dices a un club ok vamos a añadir una nueva sección elegimos la estructura una columna y vamos a arrastrar y soltar esta herramienta no de soundcloud arrastramos y soltamos aquí ok entonces por defecto como tú ves ya me sale aquí en este caso una música ya es una música por defecto pero yo puedo cambiarla como la cambio aquí en la parte aquí arriba ok me sale en este caso el enlace a esa música entonces yo aquí debo poner el enlace a la música que yo desee por ejemplo si yo estoy aquí ok y digamos que quiero en este caso poner esta música de aquí por ejemplo hago clic aquí ok y voy a escoger este esta url que está en la parte de aquí arriba la voy a copiar ok y la voy a pegar aquí entonces la voy a pegar espero un momento y como tú ves se carga ok nos fijamos que es la misma porque tiene la misma foto y todo lo demás entonces así es como tú añades en este caso música a tu sitio web ahora aquí nos dice reproductor visual si o no si nosotros escogemos que si ok se va a mostrar en este caso pues la portada como tal en este caso de la música que ok es como esta esta portada se nos va a mostrar en grande ok si tú quieres en este caso que no se muestre que sólo quede la música que de hecho estéticamente se ve mejor así lo dejamos en no auto reproducir qué quiere decir eso que cuando alguien ingrese a la página automáticamente se empieza a reproducir la música esto no se lo surgieron lo absoluto porque las personas no les gusta entrar a un sitio y en seguida empezar a escuchar música o sea si escucha música que sea porque yo le doy clic a escuchar la música perfecto entonces no seamos un poco lanzados con esa parte de publicarlo de cierto modo la persona que escuchen la música porque eso no va a ser bueno va a hacer que la persona en seguida se salga de la página y eso no queremos.

Añadir barra lateral

Hola cómo estás mi nombre es prince y la paz miño y en este nuevo vídeo te voy a explicar cómo añadir una barra lateral a tu sitio web en este caso en qué sección de tu página tú le podría sacar el máximo provecho a esto en la sección del blog ok si tú tienes algún blog y tú estás editando una a una tus entradas con elementos para darle digamos tu toque ok qué puedes hacer añadir una barra lateral entonces vamos a ver cómo hacerlo no nosotros estamos aquí en nuestra página o que llena que hemos estado trabajando entonces vamos a añadir una nueva sección aquí ok pero fijémonos que en este caso vamos a trabajar con dos columnas ok de las cuales una la vamos a destinar a la barra lateral y la otra va a quedar en este caso para el contenido general de la página ok en este caso el artículo las imágenes publicidades en fin entonces vamos a añadir la estructura de dos de dos columnas y como ustedes ven ya se añadió lo ideal es que esta sección de la barra lateral sea un poco más pequeña no que sea mitad y mitad sino entonces aquí nos ubicamos aquí en editar columna ok hacemos clic aquí y ponemos ancho de la columna podemos poner por ejemplo 30 por ciento como tú ves ya es una cantidad ya menos invasiva porque la mitad de la página si es invasiva esa barra o incluso podemos ponerlo en 25 ok lo dejas allí perfecto entonces nos ubicamos aquí en los cuadritos de las herramientas nos vamos a la sección de general y vamos a añadir barra lateral aquí está la opción ok entonces arrastramos y soltamos aquí ok entonces aquí me va a pedir seleccionar una barra lateral aquí nosotros vamos a poder en este caso seleccionar ok qué barra lateral queremos mostrar esto debemos tenerlo creado previamente en nuestro wordpress ok puedes dejar seleccionada la barra lateral principal ok que en este momento tenemos aquí estas opciones el botón de buscar entre las recientes ok esto es lo que me va a salir siempre y entonces yo voy a escoger donde en este caso la voy a ubicar por supuesto por lo general se ubica en el lado derecho ahora si tú quieres editar eso allí vas a tener que ir en este caso a wordpress entonces vamos a ver cómo hacer esta personalización de aquí no voy a hacer clic en actualizar ok voy a dejar allí esa página y vamos a ir nosotros a nuestro menú de wordpress ok en donde modificamos esa sección nosotros en este caso vamos a tener que ir en donde dice apariencia ok y nos vamos a la sección de widgets ok seleccionamos widgets y aquí vamos a poder editar esta que dice barra lateral principal ok si tú te fijas aquí se muestra buscar entradas comentarios entonces si nosotros vemos aquí buscar entradas comentarios entonces efectivamente es esa barra no si nosotros queremos en este caso quitar el tema de los archivos.

Anclas de menú

Hola cómo estaba buenas tardes mi nombre es priscila pazmiño y en este nuevo vídeo de mi curso de elementos en su versión gratuita te voy a mostrar cómo añadir anclas de menú a tu sitio ok antes que nada te voy a explicar realmente en qué consiste el ancla de menú en que me va a servir ok si nosotros en este caso tenemos alguna landing page o queremos que las personas cuando estén en nuestro sitio web ok hagan clic en ciertas secciones y los lleve por ejemplo al final en este caso de la página a la sección de en medio para eso nos van a servir las anclas de menú si aún no te ha quedado claro bien vamos a verlo en la acción no entonces voy a añadir unos bloques ok voy a añadir unos bloques de imágenes con sus respectivos títulos netamente para que entiendas ok en qué consiste este tema de las anclas de menú ahora voy a añadir en este bloque una imagen ok voy a añadir una imagen y un título ok esto es simplemente para que entiendas ok el porqué de las anclas de menú entonces a este primer título le voy a poner beneficios ok perfecto voy a duplicar este bloque y le voy a poner aquí en el segundo bloque cursos y voy a añadir otro bloque más y vamos a poner aquí registro por ejemplo ok supongamos que son distintas secciones de nuestro sitio ok supongamos que son distintas secciones entonces perfecto no vamos a añadirle para que aún así existe un poco de espacio vamos a añadirle un pequeño espaciador ok debajo de cada zona vamos a ponerle allí 100 listo vamos a duplicar el espacio y lo ponemos en la sección de aquí abajo nuevamente lo duplicamos y lo ponemos en la última sección ok perfecto ya lo tenemos aquí entonces hacemos clic en actualizar para guardar los cambios ok y en nuestro sitio se va a ver de la siguiente manera tenemos allí la landing perfecto beneficios texto imaginemos que es un texto o cualquier cosa allí no tenemos otro bloque que dice cursos y otro bloque que dice registro ok entonces vamos a hacer que aquí vamos a dar la opción por ejemplo beneficios y me va a llevar a esta sección voy a poner otro en este caso o texto que diga cursos y me va a llevar al bloque directamente de aquí y voy a añadir un botón en el que diga registro y me va a llevar a esta sección de aquí ok para eso me va a servir el ancla de melo entonces vamos a hacerlo nosotros nos ubicamos en el editor de elementos ok y aquí vamos primero vamos a añadir los botones ok tienes tres maneras de hacerlo puedes hacerlo por medio en este caso de encabezados puedes hacerlo por medio de texto y puedes hacerlo por medio de un botón vamos a añadir uno de cada uno para que tú entiendas cómo se debe hacer ok entonces vamos a hacer clic en las herramientas y seleccionamos encabezado vamos a añadir aquí un encabezado ok vamos a añadir en un editor de texto y vamos a añadir un botón ok perfecto ya tenemos aquí las tres maneras en este caso para enlazar vamos a editar esta primera sección.

Shortcodes

Hola cómo estás mi nombre es priscila pazmiño y en este nuevo vídeo y último vídeo de mi curso de elementos de su versión gratuita te voy a enseñar cómo poder añadir short coach en tu sitio web ok si nosotros estamos creando nuestro sitio web con elementos es de hecho no te aconsejaría para nada que tú crees por ejemplo un formulario con w forms es un ejemplo ok para añadirlo a tu sitio porque por supuesto en su versión en este caso pro de elementos incluye la opción de añadir formularios ok entonces si aún así puesto no tienen la versión pro y quieres añadir un formulario a tu sitio web pero utilizando elementos te voy a mostrar la manera de cómo hacerlo entonces bien yo tengo en este caso creado un formulario de contacto ok lo creé con el plugin de w forms que es sumamente sencillo crear un formulario allí ok y estéticamente bueno se ve tan mal entonces nosotros vamos a hacer clic aquí en esto que dice short con ok como tú ves en el lado derecho y vamos a sombrear esto y lo vamos a copiar ok lo vamos a copiar entonces en nuestro sitio web vamos a deslizar un poco hacia abajo y vamos a añadir una nueva sección entonces en esta sección voy a añadir ese formulario ahora si tú están añadiendo ese formulario en una sección por ejemplo de contacto y quieres que el formulario esté allí en medio te aconsejo que tú por ejemplo añadas una sección de tres columnas ok te sugiero que añadan una sección de tres columnas en este caso en las cuales el formulario va a estar aquí en medio porque para que te sirva en este caso las otras columnas de espacio esa es una opción que tienes ok la como te digo tú haces clic aquí donde sale la columna y pones por ejemplo en ancho de columna sub-20 por ejemplo ok un espacio y aquí en la siguiente columna también editas el ancho y pone por ejemplo 20 y como tú ves te queda allí el espacio para poner el formulario vamos a hacer la prueba de esa manera y luego con una columna para que tú elijas la que mejor estime conveniente no entonces perfecto vamos a hacerlo en esta primera ocasión así vamos a seleccionar los cuadritos para añadir en este caso la herramienta vamos a deslizar abajo ok y seleccionamos surcos entonces arrastramos y soltamos aquí en medio ok entonces aquí me va a decir introduce tus orcos vamos a pegar ese enlace que nosotros acabamos de copiar ok y recuerda que es este de aquí ok esto que dice surco entonces como tú ves allí está el formulario ok estéticamente pues no se ve también va a depender muchísimo en este caso de cómo lo hayas creado ok por ejemplo aquí me dice nombre apellidos nuestro correo electrónico ok te va a salir el formulario tal cual tú lo has creado en w forms ok entonces una vez ya lo hayas añadido simplemente pues haces clic en aplicar ok ya estará como tú ves ya queda allí nuestro formulario ya una vez que hagamos clic en aplicar ya se muestra ahora si estéticamente como lo habíamos configurado.