martes, 13 de mayo de 2025

DISEÑO DE UNA PÁGINA WEB


 

🧩 ¿Qué es Wix?

Wix es una plataforma online para crear páginas web sin necesidad de saber programar. Utiliza un sistema de edición visual (drag and drop) que te permite diseñar tu sitio web arrastrando y soltando elementos como texto, imágenes, botones, formularios, etc.

Es ideal para:

  • Páginas personales o portfolios

  • Tiendas online

  • Blogs

  • Sitios para negocios y marcas personales

Wix ofrece plantillas prediseñadas, alojamiento gratuito (con subdominio), y opciones de pago si quieres usar un dominio propio o funciones avanzadas.


🛠️ ¿Cómo se usa Wix?

  1. Crear una cuenta en www.wix.com

  2. Elegir una plantilla según el tipo de página que quieres crear.

  3. Editar visualmente con el editor de Wix (puedes cambiar textos, imágenes, colores, secciones, etc.).

  4. Agregar funcionalidades desde el panel lateral: formularios, mapas, botones, menús, blogs, e-commerce, etc.

  5. Publicar el sitio (en wixsite.com o con tu propio dominio si tienes un plan premium).

También puedes usar Wix Studio (antes "Editor X") si quieres más control sobre diseño responsivo y personalización avanzada.


🎨 ¿Se puede usar Bootstrap (CSS) en Wix?

Directamente no se puede usar Bootstrap como en HTML tradicional, porque Wix no permite importar frameworks externos completos como Bootstrap. Pero sí puedes usar fragmentos de código CSS y HTML personalizados en secciones específicas. Aquí te explico cómo hacerlo:


🔧 Cómo insertar código CSS (inspirado en Bootstrap) en Wix

Opción 1: Usar bloques de "HTML iFrame" con estilos

  1. En el editor de Wix, haz clic en “Agregar” → “Insertar código” → “HTML iframe embebido”.

  2. Pega el siguiente ejemplo de código:

html

<style> .boton-bootstrap { background-color: #0d6efd; color: white; padding: 10px 20px; font-size: 16px; border: none; border-radius: 0.375rem; cursor: pointer; } .boton-bootstrap:hover { background-color: #0b5ed7; } </style> <button class="boton-bootstrap">Haz clic aquí</button>

Este botón simula el estilo de Bootstrap, pero está escrito con CSS personalizado.


 Mi pagina de Wix es antigua de otro año pero sirve como ejemplo:

        https://carlosx8ttr.wixsite.com/my-site

No hay comentarios:

Publicar un comentario

Sesión 4. Practica JavaScript

  En esta sesión, vamos a añadir diferentes funciones a la página web que realizamos anteriormente, mediante la creación de un archivo con l...