CursosEmpresasBlogLiveConfPrecios

Código personalizado

Clase 12 de 13 • Curso para Crear Sitios Web No-code con Notion y Super

Clase anteriorSiguiente clase

Contenido del curso

Primeros pasos
  • 1
    Crea tu página personal sin código: introducción

    Crea tu página personal sin código: introducción

    01:03
  • 2
    ¿Qué es Notion y Super?

    ¿Qué es Notion y Super?

    01:06
  • 3
    Setup en Notion y primeros pasos

    Setup en Notion y primeros pasos

    03:52
Conoce Super.so
  • 4
    Desplegando tu primer sitio en Super

    Desplegando tu primer sitio en Super

    03:08
  • 5
    El builder de Super

    El builder de Super

    09:45
Construye tu sitio web sin código
  • 6
    Proyecto: Construye tu blog

    Proyecto: Construye tu blog

    11:01
  • 7
    Proyecto: Construye tu portafolio de fotografía

    Proyecto: Construye tu portafolio de fotografía

    07:35
  • 8
    Proyecto: Construye tu portafolio de desarrollo

    Proyecto: Construye tu portafolio de desarrollo

    07:52
Lleva tu sitio más allá
  • 9
    Dominio personalizado

    Dominio personalizado

    04:53
  • 10
    SEO y extensiones

    SEO y extensiones

    09:40
  • 11
    Super + Google Analytics

    Super + Google Analytics

    04:11
  • 12
    Código personalizado

    Código personalizado

    12:37
Cierre
  • 13
    Cierre

    Cierre

    01:00
    Antony Diaz

    Antony Diaz

    student•
    hace 3 años

    Encontré una forma de agregar su dominio personalizado sin pagar. Tienen que seguir los pasos de Fruition que toma 10-15min y asi quedo el mio : https://antonydiaz.me :)

      Naudy José Romero Valero

      Naudy José Romero Valero

      student•
      hace 3 años

      excelente gracias...

      Erika Natalia Ballesteros Cetina

      Erika Natalia Ballesteros Cetina

      student•
      hace 3 años

      Gracias por compartir Antony!

    Jorge Trad

    Jorge Trad

    student•
    hace 3 años

    Les comparto cómo va quedando mi sitio ^^

    Screen Shot 2022-06-27 at 16.49.48.png
      Erika Natalia Ballesteros Cetina

      Erika Natalia Ballesteros Cetina

      student•
      hace 3 años

      Hola Jorge! Esta muy chevere tu página web, se nota el empeño que haz colocado y deseo que recibas frutos con ella, si me permites te hago una sugerencia: Revisa al dar click a los CV's en español e inglés, redirecciona a una página que dice error. De resto super interesante tu página. Felicitaciones.

    Miguel Angel Reyes Moreno

    Miguel Angel Reyes Moreno

    student•
    hace 3 años

    Aún faltan algunos detalles pero va mejorando poco a poco :D

    mi día en unos minutos

    Felipe Granda

    Felipe Granda

    student•
    hace 3 años

    Es curioso que el curso en general esté llamado No-code, cuando en esta clase estamos viendo implementación de personalizables de CSS dentro de Super, e include cuenta con una explicación sobre como definir estilos en CSS

      Víctor Macías Pincay

      Víctor Macías Pincay

      student•
      hace 3 años

      Está muy interesante porque si no se le mete esos trozos de códigos que ya los dan las páginas no se podría aprovechar la optización.

      Alex Camacho

      Alex Camacho

      teacher•
      hace 3 años

      Este tipo de CSS es dado hasta por herramientas de diseño como Figma, es recomendable tener ciertos conocimientos de CSS pero no obligatorios para construir la página como tal.

      Igual como dice Víctor, en este punto es donde podemos personalizar y diferenciar nuestros sitios 🚀

    Javier Flores Macías

    Javier Flores Macías

    student•
    hace 3 años

    Nunca está demás un poco de código para personalizar nuestro sitio web 🤓

    Víctor Macías Pincay

    Víctor Macías Pincay

    student•
    hace 3 años

    Me encantó esta clase, siempre viene bien un poco de código para mejorar o darle un estilo personalizado a nuestro trabajo.

    Giselle Alvarez

    Giselle Alvarez

    student•
    hace 3 años

    Buenas! como eatan? no entiendo como crear nuevas paginas, alguien me puede ayudar? tampoco se como generad el hipervinculo a un correo electrónico, para poner en el footer en "contáctenos" gracias

      Juan Calderon

      Juan Calderon

      student•
      hace 3 años

      Te recomiendo antes de aprender a hacer paginas webs de Notion, aprende a usar Notion. Creas un Notion y posteriormente tienes varias maneras de compartir esa pagina en notion, sencillamente el codigo para compatir que te ofrece el mismo notion, o como en el video poder personalizar de manera mas sofisticada un sitio web.

      Jesus Robles

      Jesus Robles

      student•
      hace 3 años

      Selecciona el texto y pon el cursor sobre el texto seleccionado. Te va aparecer un memo. Ahí selecciona “link”. Abre un cuadro y donde dice URL pon el correo electrónico. Espero ayude =)

    Jeshire Del Valle Blanco Ruiz

    Jeshire Del Valle Blanco Ruiz

    student•
    hace 3 años

    Para poder usar los códigos en CSS, tengo que tener membresía en Super? Me parece que no se pueden aplicar los cambios hasta que tenga una suscripción.

    Rodrigo Alles

    Rodrigo Alles

    student•
    hace 3 años

    En Super, puedes agregar código personalizado para personalizar aún más tu sitio web. Para agregar código personalizado, sigue los siguientes pasos:

    Abre la página de edición de tu sitio web en Super y haz clic en el botón de "Agregar componente".

    Selecciona la opción de "Código HTML" en la sección de "Agrega lo que quieras".

    Agrega tu código personalizado en el cuadro de texto.

    Haz clic en el botón de "Guardar" para guardar tus cambios.

    Es importante tener en cuenta que el código personalizado solo está disponible en la versión de pago de Super. Además, ten cuidado al agregar código personalizado, ya que un error en el código puede causar problemas en tu sitio web.

    En resumen, para agregar código personalizado en Super, debes agregar un componente de "Código HTML", agregar tu código personalizado y guardar tus cambios.

    Antonio Luis Fernandez Dromundo

    Antonio Luis Fernandez Dromundo

    student•
    hace 3 años

    Chicos, decidi emprender un viaje por latinoamerica y decidi abrir un blog, este curos me ayudo muchisimo para lograrlo! Les comparto mis resultados del curso

    Viajero Fachero

    Sergio N

    Sergio N

    student•
    hace 3 años

    Así va quedando el mío 🙈: @soyeseduran

    Misael Gomez

    Misael Gomez

    student•
    hace 3 años

    Comparto mi sitio donde voy a compartir mis aprendizajes https://misael-gmez-cuautle.super.site/ Link

    Kevin Morales

    Kevin Morales

    student•
    hace 3 años

    Quisiera agregar la nav bar pero al momento de agregar una página no me abra otra página en la web. Si no me direccione abajo a la sección que es.. Se podrá hacer eso?

    Jose Alejandro Pantoja Giraldo

    Jose Alejandro Pantoja Giraldo

    student•
    hace 3 años

    Cuando se pone el tema, te pisa las clases q tenias antes ! ?

      Nidia Carrillo

      Nidia Carrillo

      student•
      hace un año

      imagino que si

    Nidia Carrillo

    Nidia Carrillo

    student•
    hace un año

    Si no pago por el premium igual le podes sumar el código que le queres añadir para ir viendo lo que quieras con CSS, ya luego defines si quieres pagar

    Rodrigo Alles

    Rodrigo Alles

    student•
    hace 3 años

    Para crear una barra de navegación personalizada (custom navbar) en Super, sigue estos pasos:

    Abre la página de edición de tu sitio web en Super y haz clic en el botón de "Agregar componente".

    Selecciona la opción "Navbar" en la sección "Menú" de los componentes.

    Personaliza tu barra de navegación: En el panel de edición de la barra de navegación, puedes personalizar los elementos de tu barra de navegación, como agregar enlaces, cambiar el color de fondo, agregar un logotipo, etc.

    Guarda los cambios y publica tu sitio web en línea.

    Es importante tener en cuenta que la barra de navegación personalizada en Super solo está disponible en la versión de pago de Super. Si estás utilizando la versión gratuita de Super, la barra de navegación predeterminada estará disponible en tu sitio web.

    En resumen, para crear una barra de navegación personalizada en Super, debes agregar un componente de "Navbar", personalizar la barra de navegación y guardar los cambios. Recuerda que la opción de barra de navegación personalizada solo está disponible en la versión de pago de Super.

    JORGE MARIO GIRALDO MOLINARES

    JORGE MARIO GIRALDO MOLINARES

    student•
    hace 3 años

    Lo actualizaron y ya hay que pagar para insertar código personalizado 😭😭😭😭

    "Custom code will not be applied to your live site"

    You can preview custom code using the dashboard preview, but it will not be active on your live site until you upgrade your site plan.

    Luis Rodríguez

    Luis Rodríguez

    student•
    hace 3 años

    Uuffffff impresionante 🤯🤯🤯 estaba subestimando este curso desde que inició y siempre lo vi como meh 😒 una alternativa más para cuando se necesite, pero igual da si se siente plantilla, ahora me doy cuenta de la profundidad de personalización a la que se puede llegar. Ya puedo decir, increíble curso, increíble este contenido de Platzi 💚🙌🏼.

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads