Avisos
Vaciar todo
Administración WordPress
3
Respuestas
2
Usuarios
2
Reactions
12
Visitas
Topic starter
Hola,
En https://www.sollercitrusroute.com he introducido diferentes páginas con el widget de html - creo que es por eso - y al hacer scroll en desktop va muy lento, se detiene. He tenido también problemas con fijar el menu superior. Uso el them Efor,
¿Podeis decirme donde puede estar el problema?
Contenido solo visible a usuarios registrados
Respondido : 03/10/2025 7:34 am
Hola Juan Jose.
Es muy probable que el problema venga del código HTML, es común en Elementor porque el widget espera fragmentos de código limpios, no una página HTML completa con <html>, <head> y <body>. Eso genera conflictos con la estructura de la página principal de WordPress/Elementor, como elementos duplicados, recursos que se cargan dos veces (CSS, JS, fuentes) y posibles interferencias con el scroll suave nativo de Elementor.
Ten en cuenta que no damos soporte a código y tampoco se el código que estas añadiendo pero bueno revisando con el navegador puedo ver algo en la pagina de inicio, parece que tienes dos bloques de HTML.
.- Desactiva el segundo bloque que es de css
.- Modifica el primer bloque por el siguiente código, primero realiza una copia del código que tienes ahora, por ejemplo puedes hacer un copia y pega en un archivo txt :
<!-- Preload fonts (opcional, para LCP) -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&display=swap" rel="stylesheet" />
<style>
:root { --scr-orange: #f97316; }
html { scroll-behavior: auto !important; } /* Arregla el stuttering en Elementor */
body { background: #f9fafb; font-family: 'Cormorant Garamond', serif; }
/* Hero */
.hero-slider { position: relative; width: 100%; min-height: 70vh; height: clamp(60vh, 90vh, 90vh); overflow: hidden; background: #111; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease-in-out; box-shadow: 0 10px 30px rgba(0,0,0,.5); will-change: opacity; }
.hero-slide.active { opacity: 1; }
.hero-slider::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.15) 100%); pointer-events: none; z-index: 1; }
.hero-content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; color: #fff; z-index: 10; padding: 4rem 1rem; }
.hero-content h1 { color: #fff !important; font-size: 2rem; }
.hero-content h2 { color: #fff !important; font-size: 1.5rem; }
/* Carousel text */
.carousel-text { background: rgba(0,0,0,.45); border-radius: 14px; padding: .5rem 1rem; font-size: 1.1rem; font-style: italic; margin-bottom: 1rem; }
@keyframes fade { 0%,100% { opacity: 0; transform: translateY(8px); } 20%,80% { opacity: 1; transform: translateY(0); } }
.carousel-text { animation: fade 4s infinite; }
/* Buttons */
.custom-btn { display: inline-block; border-radius: .75rem; font-weight: 700; padding: .75rem 1.25rem; transition: transform .12s ease, background-color .2s ease, color .2s ease; box-shadow: 0 6px 16px rgba(0,0,0,.15); text-decoration: none; }
.custom-btn:focus { outline: 2px solid #fb923c; outline-offset: 2px; }
.btn-primary { background: var(--scr-orange); color: #fff; }
.btn-primary:hover { background: #ea580c; }
.btn-ghost { border: 2px solid var(--scr-orange); color: var(--scr-orange); background: transparent; }
.btn-ghost:hover { background: var(--scr-orange); color: #fff; }
/* Gallery */
.swipe-gallery img { transition: transform .25s ease, box-shadow .25s ease; box-shadow: 0 4px 15px rgba(0,0,0,.25); aspect-ratio: 4/3; object-fit: cover; border-radius: .75rem; width: 100%; height: auto; }
.swipe-gallery img:hover { transform: scale(1.03); }
/* Footer text overlay helper */
.hero-footer { position: relative; z-index: 10; }
.hero-footer p { font-size: .9rem; line-height: 1.4; }
/* Mobile */
@media (max-width: 640px) {
.hero-slider { height: auto; min-height: auto; overflow: visible; padding-bottom: 1.25rem; background: #111; }
.hero-content { position: relative; inset: auto; justify-content: flex-start; align-items: center; padding-top: calc(env(safe-area-inset-top) + 5.5rem); padding-left: 1rem; padding-right: 1rem; padding-bottom: .75rem; }
.hero-content h1 { font-size: 1.6rem; line-height: 1.15; margin-bottom: .5rem; }
.hero-content h2 { font-size: 1.05rem; line-height: 1.3; margin-bottom: .5rem; }
#carousel-text { margin-bottom: .75rem; }
.swipe-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hero-footer p { font-size: .8rem; }
.cta-group { width: 100%; max-width: 22rem; margin-inline: auto; }
.cta-group .custom-btn { width: 100%; }
}
@media (max-width: 375px) {
.hero-content { padding-top: calc(env(safe-area-inset-top) + 6.25rem); }
.hero-content h1 { font-size: 1.45rem; }
.hero-content h2 { font-size: .98rem; }
}
@media (max-width: 320px) {
.hero-content { padding-top: calc(env(safe-area-inset-top) + 6.75rem); }
.hero-content h1 { font-size: 1.32rem; }
.hero-content h2 { font-size: .92rem; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.carousel-text { animation: none; }
.hero-slide { transition: none; }
}
/* Ghost button high-contrast for hero */
.btn-ghost-hero { color: #fff; border: 1.5px solid rgba(255,255,255,.9); background: rgba(0,0,0,.35); backdrop-filter: saturate(120%) blur(2px); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.btn-ghost-hero:hover { background: var(--scr-orange); border-color: transparent; color: #fff; }
.btn-ghost-hero:focus { outline: 2px solid #fff; outline-offset: 2px; }
/* General Tailwind-like utilities */
.max-w-6xl { max-width: 72rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-16 { margin-top: 4rem; margin-bottom: 4rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.text-center { text-align: center; }
.mb-12 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-6 { margin-bottom: 1.5rem; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.md\:grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gap-8 { gap: 2rem; }
.gap-4 { gap: 1rem; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.sm\:flex-row { flex-direction: column; }
@media (min-width: 640px) { .sm\:flex-row { flex-direction: row; } }
.gap-3 { gap: .75rem; }
.gap-2 { gap: .5rem; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
@media (min-width: 768px) { .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } }
.text-5xl { font-size: 3rem; line-height: 1; }
.md\:text-6xl { font-size: 3.75rem; line-height: 1; }
@media (min-width: 768px) { .md\:text-6xl { font-size: 3.75rem; line-height: 1; } }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
@media (min-width: 768px) { .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-gray-700 { color: #374151; }
.text-white { color: #fff; }
.text-opacity-90 { opacity: .9; }
.text-opacity-80 { opacity: .8; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.rounded-lg { border-radius: .5rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.overflow-hidden { overflow: hidden; }
.p-6 { padding: 1.5rem; }
.w-full { width: 100%; }
.bg-white { background-color: #fff; }
.bg-gray-900 { background-color: #111827; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.italic { font-style: italic; }
.font-bold { font-weight: 700; }
.underline { text-decoration: underline; }
.hover\:text-orange-300:hover { color: #fdba74; }
</style>
<!-- Hero Section -->
<section class="hero-slider" role="region" aria-label="Hero slideshow">
<div class="hero-slide active" style="background-image: url('https://www.sollercitrusroute.com/wp-content/uploads/2025/07/port.jpeg');"></div>
<div class="hero-slide" style="background-image: url('https://www.sollercitrusroute.com/wp-content/uploads/2025/06/hero-tramuntana.jpg');"></div>
<div class="hero-slide" style="background-image: url('https://www.sollercitrusroute.com/wp-content/uploads/2025/07/biniaraix.jpeg');"></div>
<div class="hero-slide" style="background-image: url('https://www.sollercitrusroute.com/wp-content/uploads/2025/07/mg_8992.jpg');"></div>
<div class="hero-content">
<h1 class="mb-4">Exclusive Citrus Tours in Sóller</h1>
<h2 class="mb-6">Private Journeys, Premium Collection, and Transformative Workshops</h2>
<div id="carousel-text" class="carousel-text flex items-center justify-center gap-2" aria-live="polite">
<span class="ct-icon" aria-hidden="true">🍊</span>
<span>Book Your Private Citrus Tour Today</span>
</div>
<div class="cta-group flex flex-col sm:flex-row gap-3">
<a href="https://www.sollercitrusroute.com/citrus-route/" class="custom-btn btn-primary">Book VIP Tour</a>
<a href="https://www.sollercitrusroute.com/signature-collections/" class="custom-btn btn-ghost btn-ghost-hero">Shop Limited Edition</a>
</div>
<p class="mt-4 text-white text-opacity-90">
Discover Sóller's heritage at
<a href="https://www.ciutatdesoller.org" class="underline hover:text-orange-300" rel="noopener noreferrer">ciutatdesoller.org</a>
</p>
</div>
</section>
<!-- Tours -->
<section class="max-w-6xl mx-auto my-16 px-4" id="tours">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Private Citrus Tours</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<article class="bg-white rounded-lg shadow-lg overflow-hidden">
<img src="https://www.sollercitrusroute.com/wp-content/uploads/2025/06/heritage-castell-soller.jpeg"
alt="Guided walk past Sóller's convent and modernist mansions"
class="w-full" loading="lazy" decoding="async" width="1200" height="800" />
<div class="p-6">
<h3 class="text-xl font-bold">Paths of the Soul</h3>
<p class="text-gray-700 mt-2">Private tour (4–12 people) through Sóller’s heritage, from convents to modernist mansions. From €250.</p>
<a href="https://www.sollercitrusroute.com/citrus-route/" class="custom-btn btn-primary mt-4">Book Now</a>
</div>
</article>
<article class="bg-white rounded-lg shadow-lg overflow-hidden">
<img src="https://www.sollercitrusroute.com/wp-content/uploads/2025/06/water-canals-soller.jpeg"
alt="Stone paths and water channels in Biniaraix, Sóller"
class="w-full" loading="lazy" decoding="async" width="1200" height="800" />
<div class="p-6">
<h3 class="text-xl font-bold">Veins of Water & Stone</h3>
<p class="text-gray-700 mt-2">Explore Sóller’s canals, orchards, and stone paths in a private journey. From €300.</p>
<a href="https://www.sollercitrusroute.com/citrus-route/" class="custom-btn btn-primary mt-4">Book Now</a>
</div>
</article>
</div>
</section>
<!-- Collection -->
<section class="max-w-6xl mx-auto my-16 px-4" id="collection">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Estimar Sóller Collection 2025</h2>
<div class="swipe-gallery grid grid-cols-2 md:grid-cols-4 gap-4">
<a href="https://www.sollercitrusroute.com/signature-collections/#terracotta" aria-label="Terracotta Shirt">
<img src="https://www.sollercitrusroute.com/wp-content/uploads/2025/07/placeholder-terracotta.jpeg" alt="Terracotta T-shirt from Estimar Sóller collection" loading="lazy" decoding="async" width="800" height="600" />
</a>
<a href="https://www.sollercitrusroute.com/signature-collections/#china" aria-label="China Edition">
<img src="https://www.sollercitrusroute.com/wp-content/uploads/2025/07/placeholder-scr-china.jpg" alt="China edition limited T-shirt" loading="lazy" decoding="async" width="800" height="600" />
</a>
<a href="https://www.sollercitrusroute.com/signature-collections/#korea" aria-label="Korea Edition">
<img src="https://www.sollercitrusroute.com/wp-content/uploads/2025/07/foto-japonesa.jpeg" alt="Korean/Japan-inspired limited edition" loading="lazy" decoding="async" width="800" height="600" />
</a>
<a href="https://www.sollercitrusroute.com/signature-collections/#eclipse" aria-label="Eclipse 2026">
<img src="https://www.sollercitrusroute.com/wp-content/uploads/2025/09/soller-eclipse-e1758057663833.jpeg" alt="Eclipse 2026 design tee" loading="lazy" decoding="async" width="800" height="600" />
</a>
</div>
<div class="text-center mt-8">
<a href="https://www.sollercitrusroute.com/signature-collections/" class="custom-btn btn-ghost">Shop Limited Edition</a>
</div>
</section>
<!-- Academy -->
<section class="max-w-6xl mx-auto my-16 px-4" id="academy">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Sóller House Academy</h2>
<div class="bg-white rounded-lg shadow-lg p-6 text-center">
<p class="text-gray-700 mb-4">Join exclusive workshops to lead the Mediterranean future. Limited spots, from €500.</p>
<a href="https://buy.stripe.com/test_academy" class="custom-btn btn-primary">Enroll Now</a>
</div>
</section>
<!-- Testimonial -->
<section class="max-w-6xl mx-auto my-16 px-4 text-center">
<blockquote class="text-xl italic text-gray-700">
"An unforgettable blend of luxury and authenticity. The citrus tour was a highlight." – Maria V., London Traveler
</blockquote>
</section>
<!-- Footer promo -->
<div class="hero-footer text-center mt-6 mb-2">
<p class="text-sm text-white text-opacity-80">
Discover Sóller's heritage at
<a href="https://www.ciutatdesoller.org" rel="noopener noreferrer">ciutatdesoller.org</a>.
</p>
</div>
<footer class="bg-gray-900 text-white py-10 px-4 text-center">
<p class="mt-4">
Explore Sóller's heritage at
<a href="https://www.ciutatdesoller.org" class="underline hover:text-orange-300" rel="noopener noreferrer">ciutatdesoller.org</a>.
</p>
<p class="mt-4">© 2025 Sóller Citrus Route. All rights reserved.</p>
</footer>
<script defer>
// Carousel text
(function(){
const phrases = [
"Book Your Private Citrus Tour Today",
"Sustainable luxury. Discover Sóller's heritage.",
"Wear Sóller’s story with our limited collection",
"Wear Sóller Signature.",
"Feel. Get inspired."
];
let i = 0; const span = document.querySelector('#carousel-text span:last-child');
function setPhrase(idx){ if (span) span.textContent = phrases[idx]; }
function start(){
if (!span) return;
setPhrase(0);
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
setInterval(()=>{ i = (i+1)%phrases.length; setPhrase(i); }, 4000);
}
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start, {once: true});
else start();
})();
// Hero slider
(function(){
function init(){
const slides = Array.from(document.querySelectorAll('.hero-slide'));
if (!slides.length) return;
let idx = 0;
const show = i => slides.forEach((s,k)=>s.classList.toggle('active', k===i));
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
setInterval(()=>{ idx = (idx+1)%slides.length; show(idx); }, 5000);
}
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, {once: true});
else init();
})();
</script>
<noscript>
<div style="padding:1rem;text-align:center">
JavaScript is disabled. You can still <a href="https://www.sollercitrusroute.com/citrus-route/">book a tour</a> or
browse the <a href="https://www.sollercitrusroute.com/signature-collections/">collection</a>.
</div>
</noscript>
Como te comento no damos soporte a código personalizado pero bueno intentamos ayudaros en lo que podemos, digo esto porque no te aseguro que funcione al 100% ya que cada página es distinta y hay muchos factores que pueden afectar.
Solo una consulta ¿ No puedes hacer lo mismo con modulós de Elementor ?
Un Saludo
Respondido : 03/10/2025 11:12 am
Juan José reaccionó
Hola Juan José
Puedes probar el código que te indique.
Respecto a tu consulta sobre la generación de contenido web con IA, te explico brevemente las opciones para que tomes la mejor decisión.
Si optas por utilizar archivos estáticos en HTML (generados por la IA), el proceso es muy sencillo: solo tendrías que subir esos archivos a tu servidor o hosting. Esto crearía una página web básica.
Sin embargo, al hacerlo de esta forma, perderías toda la funcionalidad dinámica que te ofrece WordPress. ¿Por qué? Porque WordPress es un sistema de gestión de contenidos (CMS) que te permite:
.-Actualizar y editar el sitio fácilmente: Sin conocimientos de código, puedes agregar, modificar o eliminar páginas, posts o secciones desde un panel intuitivo.
.- Integrar plugins: Miles de extensiones gratuitas y premium para funcionalidades como formularios de contacto, SEO, e-commerce (tienda online), seguridad, analíticas y mucho más.
.- Personalizar temas y diseños: Cambiar el aspecto de tu sitio con plantillas responsive (adaptables a móviles) y personalizaciones visuales.
.- Gestionar contenido dinámico: Blogging, galerías, eventos, usuarios múltiples y actualizaciones en tiempo real, todo sin tocar el código HTML.
.- Escalabilidad y mantenimiento: WordPress maneja bases de datos y optimizaciones automáticas, lo que facilita el crecimiento de tu sitio.
En resumen, con HTML puro, tendrías un sitio "estático" (fijo, como una página impresa), pero sin la flexibilidad y potencia de WordPress. Si tu objetivo es un sitio simple y de bajo mantenimiento, HTML podría funcionar; pero si buscas algo vivo, interactivo y fácil de evolucionar, te recomiendo quedarte con WordPress.
Un Saludo
Respondido : 06/10/2025 11:25 am
Juan José reaccionó
