En este caso en concreto, te mostramos cómo resaltar las diferentes estancias de un plano al pasar el cursor sobre ellas y cómo abrir una galería de imágenes al hacer click en cada una de las salas. Sigue estos pasos para agregar un toque interactivo a tus representaciones gráficas.
Paso 1: Diseñar y agregar hipervínculos en illustrator
Comienza diseñando tu plano en illustrator y agrega hipervínculos a las diferentes habitaciones. Esto facilitará la identificación de las ubicaciones para los enlaces en el siguiente paso.
- Agrupa y selecciona la zona de cada habitación o estancia.
- Ve a Ventana → Atributo y elige la opción Polígono.
- Añade un nombre de alcance para cada habitación.
Paso 2: Exportar SVG y añadir efecto hover
Una vez tengas tus enlaces definidos en illustrator, exporta el diseño como un archivo SVG y ábrelo en Sublime Text (u otro editor de texto) para personalizarlo.
- Agrega el siguiente código para crear un efecto «hover» que cambie el color al pasar el cursor.
- Cambia el valor hexadecimal para darle el color que desees en tu diseño.
.st0:hover {
fill: #ae0909; /* Cambia el color al pasar el cursor */
stroke: none;
}
Paso 3: Integra el SVG en Elementor
Copia y pega el código SVG en un widget o bloque de HTML en Elementor para insertarlo en tu página.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 600 385.6" style="enable-background:new 0 0 600 385.6;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#191819;stroke-miterlimit:10;}
.st0:hover{fill:#ae0909;stroke:none}
.st1{fill:#191819;}
</style>
<!--CONTROL-->
<g>
<a href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjgyNyIsInRvZ2dsZSI6ZmFsc2V9" >
<polygon class="st0" points="308.6,2.6 284.8,206.2 136,206.2 110,2.6 "/>
</a>
<g>
<g>
<path class="st1" d="M179.8,99.9h1.8v2.7c0,1.3-0.4,2.3-1.1,3.1c-0.8,0.8-1.7,1.2-2.9,1.2c-1.2,0-2.2-0.4-2.9-1.1
c-0.8-0.8-1.1-1.8-1.1-3.1V91.5c0-1.3,0.4-2.3,1.2-3.1c0.8-0.8,1.8-1.2,2.9-1.2c1.2,0,2.1,0.4,2.9,1.1c0.7,0.8,1.1,1.8,1.1,3.1
v2.5h-1.8v-2.4c0-0.8-0.2-1.4-0.6-1.9c-0.4-0.5-1-0.7-1.6-0.7c-0.7,0-1.2,0.2-1.6,0.7c-0.4,0.5-0.6,1.1-0.6,1.9v11
c0,0.8,0.2,1.5,0.6,1.9c0.4,0.5,1,0.7,1.6,0.7c0.7,0,1.2-0.2,1.6-0.7c0.4-0.5,0.6-1.1,0.6-1.9V99.9z"/>
<path class="st1" d="M184.3,91.6c0-1.3,0.4-2.4,1.2-3.2c0.8-0.8,1.8-1.2,3-1.2c1.2,0,2.2,0.4,3,1.2c0.8,0.8,1.2,1.9,1.2,3.2v10.9
c0,1.3-0.4,2.4-1.2,3.2c-0.8,0.8-1.8,1.2-3,1.2s-2.2-0.4-3-1.2c-0.8-0.8-1.2-1.9-1.2-3.2V91.6z M186.1,102.4c0,0.9,0.2,1.5,0.7,2
c0.4,0.5,1,0.7,1.7,0.7c0.7,0,1.3-0.2,1.7-0.7c0.4-0.5,0.7-1.2,0.7-2V91.6c0-0.8-0.2-1.5-0.7-2c-0.4-0.5-1-0.7-1.7-0.7
c-0.7,0-1.3,0.2-1.7,0.7c-0.4,0.5-0.7,1.2-0.7,2V102.4z"/>
<path class="st1" d="M197.5,91.7v14.9h-1.7V87.5h1.8l5.2,14.6V87.5h1.7v19.1h-1.7L197.5,91.7z"/>
<path class="st1" d="M211.8,89.2v17.4h-1.9V89.2h-3.3v-1.7h8.5v1.7H211.8z"/>
<path class="st1" d="M224.5,106.6l-2.8-8c-0.1,0-0.4,0-0.7,0h-1.9v8h-1.8V87.5h3.8c1.4,0,2.5,0.4,3.3,1.2c0.8,0.8,1.2,2,1.2,3.4
V94c0,2-0.8,3.3-2.3,4l3.1,8.6H224.5z M219.1,97h2c0.8,0,1.5-0.3,2-0.8c0.5-0.5,0.7-1.3,0.7-2.2v-1.9c0-1-0.2-1.7-0.7-2.2
c-0.5-0.5-1.1-0.8-2-0.8h-2V97z"/>
<path class="st1" d="M228.2,91.6c0-1.3,0.4-2.4,1.2-3.2c0.8-0.8,1.8-1.2,3-1.2c1.2,0,2.2,0.4,3,1.2c0.8,0.8,1.2,1.9,1.2,3.2v10.9
c0,1.3-0.4,2.4-1.2,3.2c-0.8,0.8-1.8,1.2-3,1.2s-2.2-0.4-3-1.2c-0.8-0.8-1.2-1.9-1.2-3.2V91.6z M230,102.4c0,0.9,0.2,1.5,0.7,2
c0.4,0.5,1,0.7,1.7,0.7c0.7,0,1.3-0.2,1.7-0.7c0.4-0.5,0.7-1.2,0.7-2V91.6c0-0.8-0.2-1.5-0.7-2c-0.4-0.5-1-0.7-1.7-0.7
c-0.7,0-1.3,0.2-1.7,0.7c-0.4,0.5-0.7,1.2-0.7,2V102.4z"/>
<path class="st1" d="M239.7,106.6V87.5h1.8v17.4h4.4v1.7H239.7z"/>
</g>
</g>
</g>
<!--SALA 2-->
<g>
<a href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjgyNSIsInRvZ2dsZSI6ZmFsc2V9" >
<polygon class="st0" points="4,2.6 4,181.7 117.7,152.6 99.5,2.6 "/>
</a>
<g>
<g>
<path class="st1" d="M26.7,95.4c0,0.9,0.2,1.5,0.7,2c0.4,0.5,1,0.8,1.7,0.8c0.7,0,1.3-0.2,1.7-0.7c0.4-0.5,0.7-1.1,0.7-1.9
c0-0.9-0.2-1.8-0.7-2.6c-0.5-0.8-1.3-1.7-2.5-2.8c-2.1-2-3.2-3.9-3.2-5.8c0-1.3,0.4-2.3,1.2-3c0.8-0.8,1.8-1.2,2.9-1.2
c1.2,0,2.1,0.4,2.9,1.1c0.7,0.8,1.1,1.8,1.1,3.1v1h-1.7v-0.9c0-0.8-0.2-1.5-0.6-1.9c-0.4-0.5-1-0.7-1.6-0.7s-1.2,0.2-1.6,0.7
c-0.4,0.4-0.6,1-0.6,1.8c0,0.8,0.2,1.5,0.7,2.2c0.4,0.7,1.1,1.5,2.1,2.4c1.2,1.1,2.1,2.2,2.7,3.2c0.6,1,0.9,2.1,0.9,3.3
c0,1.3-0.4,2.3-1.2,3.1c-0.8,0.8-1.8,1.2-3,1.2c-1.2,0-2.2-0.4-3-1.2c-0.8-0.8-1.1-1.8-1.1-3.2v-1.3h1.8V95.4z"/>
<path class="st1" d="M44.2,99.6h-1.9l-0.9-4.9h-4.1l-0.9,4.9h-1.8l4-19.1h1.8L44.2,99.6z M37.5,93.3h3.6L39.3,84L37.5,93.3z"/>
<path class="st1" d="M46.1,99.6V80.5h1.8v17.4h4.4v1.7H46.1z"/>
<path class="st1" d="M63.4,99.6h-1.9l-0.9-4.9h-4.1l-0.9,4.9h-1.8l4-19.1h1.8L63.4,99.6z M56.8,93.3h3.6L58.6,84L56.8,93.3z"/>
<path class="st1" d="M70.1,99.6v-1.2L75,88.3c0.6-1.3,1-2.6,1-3.8c0-0.8-0.2-1.4-0.6-1.9c-0.4-0.4-0.9-0.7-1.5-0.7
c-0.6,0-1.1,0.2-1.5,0.7c-0.4,0.4-0.6,1.1-0.6,1.9v1.8H70v-1.9c0-1.2,0.4-2.2,1.1-3s1.7-1.1,2.7-1.1c1.1,0,2,0.4,2.8,1.2
c0.7,0.8,1.1,1.8,1.1,3c0,1.3-0.4,2.9-1.3,4.6L72.2,98h5.6v1.6H70.1z"/>
</g>
</g>
</g>
<!--SALA 1-->
<g>
<a href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6Ijc1OSIsInRvZ2dsZSI6ZmFsc2V9" >
<polygon class="st0" points="4,194.7 4,383 308.6,383 308.6,218.1 127.1,218.1 121.9,166.8 "/>
</a>
<g>
<g>
<path class="st1" d="M124.6,306.7c0,0.9,0.2,1.5,0.7,2c0.4,0.5,1,0.8,1.7,0.8c0.7,0,1.3-0.2,1.7-0.7c0.4-0.5,0.7-1.1,0.7-1.9
c0-0.9-0.2-1.8-0.7-2.6c-0.5-0.8-1.3-1.7-2.5-2.8c-2.1-2-3.2-3.9-3.2-5.8c0-1.3,0.4-2.3,1.2-3c0.8-0.8,1.8-1.2,2.9-1.2
c1.2,0,2.1,0.4,2.9,1.1c0.7,0.8,1.1,1.8,1.1,3.1v1h-1.7v-0.9c0-0.8-0.2-1.5-0.6-1.9c-0.4-0.5-1-0.7-1.6-0.7s-1.2,0.2-1.6,0.7
s-0.6,1-0.6,1.8c0,0.8,0.2,1.5,0.7,2.2c0.4,0.7,1.1,1.5,2.1,2.4c1.2,1.1,2.1,2.2,2.7,3.2c0.6,1,0.9,2.1,0.9,3.3
c0,1.3-0.4,2.3-1.2,3.1c-0.8,0.8-1.8,1.2-3,1.2c-1.2,0-2.2-0.4-3-1.2c-0.8-0.8-1.1-1.8-1.1-3.2v-1.3h1.8V306.7z"/>
<path class="st1" d="M142.1,310.9h-1.9l-0.9-4.9h-4.1l-0.9,4.9h-1.8l4-19.1h1.8L142.1,310.9z M135.5,304.5h3.6l-1.8-9.3
L135.5,304.5z"/>
<path class="st1" d="M144,310.9v-19.1h1.8v17.4h4.4v1.7H144z"/>
<path class="st1" d="M161.4,310.9h-1.9l-0.9-4.9h-4.1l-0.9,4.9h-1.8l4-19.1h1.8L161.4,310.9z M154.7,304.5h3.6l-1.8-9.3
L154.7,304.5z"/>
<path class="st1" d="M172.1,291.8h1.4v19.1h-1.8v-16.8l-3.6,3l-1-1.2L172.1,291.8z"/>
</g>
</g>
</g>
<!--SALA RELAX-->
<g>
<a href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjgzMyIsInRvZ2dsZSI6ZmFsc2V9" >
<polygon class="st0" points="362.1,255.3 362.1,2.6 321.2,2.6 321.2,255.3 321.2,256.7 321.2,383 489.4,383 489.4,255.3 "/>
</a>
<g>
<g>
<path class="st1" d="M349.8,328.5c0,0.9,0.2,1.5,0.7,2c0.4,0.5,1,0.8,1.7,0.8c0.7,0,1.3-0.2,1.7-0.7c0.4-0.5,0.7-1.1,0.7-1.9
c0-0.9-0.2-1.8-0.7-2.6c-0.5-0.8-1.3-1.7-2.5-2.8c-2.1-2-3.2-3.9-3.2-5.8c0-1.3,0.4-2.3,1.2-3c0.8-0.8,1.8-1.2,2.9-1.2
c1.2,0,2.1,0.4,2.9,1.1c0.7,0.8,1.1,1.8,1.1,3.1v1h-1.7v-0.9c0-0.8-0.2-1.5-0.6-1.9c-0.4-0.5-1-0.7-1.6-0.7s-1.2,0.2-1.6,0.7
c-0.4,0.4-0.6,1-0.6,1.8c0,0.8,0.2,1.5,0.7,2.2c0.4,0.7,1.1,1.5,2.1,2.4c1.2,1.1,2.1,2.2,2.7,3.2c0.6,1,0.9,2.1,0.9,3.3
c0,1.3-0.4,2.3-1.2,3.1c-0.8,0.8-1.8,1.2-3,1.2s-2.2-0.4-3-1.2c-0.8-0.8-1.1-1.8-1.1-3.2v-1.3h1.8V328.5z"/>
<path class="st1" d="M367.3,332.7h-1.9l-0.9-4.9h-4.1l-0.9,4.9h-1.8l4-19.1h1.8L367.3,332.7z M360.6,326.3h3.6l-1.8-9.3
L360.6,326.3z"/>
<path class="st1" d="M369.2,332.7v-19.1h1.8v17.4h4.4v1.7H369.2z"/>
<path class="st1" d="M386.5,332.7h-1.9l-0.9-4.9h-4.1l-0.9,4.9h-1.8l4-19.1h1.8L386.5,332.7z M379.8,326.3h3.6l-1.8-9.3
L379.8,326.3z"/>
<path class="st1" d="M393.5,313.6h3.9c1.3,0,2.4,0.4,3.2,1.2s1.2,1.9,1.2,3.4v9.9c0,1.5-0.4,2.6-1.2,3.4s-1.9,1.2-3.2,1.2h-3.8
V313.6z M395.4,331h2c0.8,0,1.5-0.3,2-0.8c0.5-0.5,0.7-1.3,0.7-2.2v-9.8c0-1-0.2-1.7-0.7-2.2c-0.5-0.5-1.1-0.8-2-0.8h-2V331z"/>
<path class="st1" d="M404.9,332.7v-19.1h6.7v1.7h-4.9v6.6h4v1.6h-4v7.4h5v1.7H404.9z"/>
<path class="st1" d="M426.5,332.7l-2.8-8c-0.1,0-0.4,0-0.7,0h-1.9v8h-1.8v-19.1h3.8c1.4,0,2.5,0.4,3.3,1.2c0.8,0.8,1.2,2,1.2,3.4
v1.9c0,2-0.8,3.3-2.3,4l3.1,8.6H426.5z M421.1,323.2h2c0.8,0,1.5-0.3,2-0.8c0.5-0.5,0.7-1.3,0.7-2.2v-1.9c0-1-0.2-1.7-0.7-2.2
s-1.1-0.8-2-0.8h-2V323.2z"/>
<path class="st1" d="M430.5,332.7v-19.1h6.7v1.7h-4.9v6.6h4v1.6h-4v7.4h5v1.7H430.5z"/>
<path class="st1" d="M439.7,332.7v-19.1h1.8v17.4h4.4v1.7H439.7z"/>
<path class="st1" d="M457.1,332.7h-1.9l-0.9-4.9h-4.1l-0.9,4.9h-1.8l4-19.1h1.8L457.1,332.7z M450.4,326.3h3.6l-1.8-9.3
L450.4,326.3z"/>
<path class="st1" d="M464.1,322.8l4,9.9h-2l-3-7.9l-3,7.9h-1.9l4-9.9l-3.7-9.3h2l2.7,7.3l2.7-7.3h2L464.1,322.8z"/>
</g>
</g>
</g>
<!--OFICINA-->
<g>
<a href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjgzNSIsInRvZ2dsZSI6ZmFsc2V9" >
<rect x="500.9" y="255.3" class="st0" width="95" height="127.7"/>
</a>
<g>
<g>
<path class="st1" d="M515.7,317.8c0-1.3,0.4-2.4,1.2-3.2c0.8-0.8,1.8-1.2,3-1.2c1.2,0,2.2,0.4,3,1.2c0.8,0.8,1.2,1.9,1.2,3.2
v10.9c0,1.3-0.4,2.4-1.2,3.2c-0.8,0.8-1.8,1.2-3,1.2s-2.2-0.4-3-1.2c-0.8-0.8-1.2-1.9-1.2-3.2V317.8z M517.5,328.5
c0,0.9,0.2,1.5,0.7,2c0.4,0.5,1,0.7,1.7,0.7c0.7,0,1.3-0.2,1.7-0.7c0.4-0.5,0.7-1.2,0.7-2v-10.8c0-0.8-0.2-1.5-0.7-2
c-0.4-0.5-1-0.7-1.7-0.7c-0.7,0-1.3,0.2-1.7,0.7c-0.4,0.5-0.7,1.2-0.7,2V328.5z"/>
<path class="st1" d="M529,324.5v8.2h-1.8v-19.1h6.6v1.7H529v7.5h3.9v1.7H529z"/>
<path class="st1" d="M536,313.6h1.9v19.1H536V313.6z"/>
<path class="st1" d="M547.4,326h1.8v2.7c0,1.3-0.4,2.3-1.1,3.1c-0.8,0.8-1.7,1.2-2.9,1.2c-1.2,0-2.2-0.4-2.9-1.1
c-0.8-0.8-1.1-1.8-1.1-3.1v-11.1c0-1.3,0.4-2.3,1.2-3.1c0.8-0.8,1.8-1.2,2.9-1.2c1.2,0,2.1,0.4,2.9,1.1c0.7,0.8,1.1,1.8,1.1,3.1
v2.5h-1.8v-2.4c0-0.8-0.2-1.4-0.6-1.9c-0.4-0.5-1-0.7-1.6-0.7c-0.7,0-1.2,0.2-1.6,0.7c-0.4,0.5-0.6,1.1-0.6,1.9v11
c0,0.8,0.2,1.5,0.6,1.9c0.4,0.5,1,0.7,1.6,0.7c0.7,0,1.2-0.2,1.6-0.7c0.4-0.5,0.6-1.1,0.6-1.9V326z"/>
<path class="st1" d="M552.3,313.6h1.9v19.1h-1.9V313.6z"/>
<path class="st1" d="M559.3,317.8v14.9h-1.7v-19.1h1.8l5.2,14.6v-14.6h1.7v19.1h-1.7L559.3,317.8z"/>
<path class="st1" d="M577.9,332.7h-1.9l-0.9-4.9h-4.1l-0.9,4.9h-1.8l4-19.1h1.8L577.9,332.7z M571.2,326.3h3.6L573,317
L571.2,326.3z"/>
</g>
</g>
</g>
<g>
<rect x="371.7" y="140.6" class="st0" width="57.8" height="104.4"/>
<g>
<g>
<path class="st1" d="M409.5,212.6v1.9l-4.9,0.9v4.1l4.9,0.9v1.8l-19.1-4v-1.8L409.5,212.6z M403.2,219.2v-3.6l-9.3,1.8
L403.2,219.2z"/>
<path class="st1" d="M405.3,209.6c0.9,0,1.5-0.2,2-0.7c0.5-0.4,0.8-1,0.8-1.7c0-0.7-0.2-1.3-0.7-1.7c-0.5-0.4-1.1-0.7-1.9-0.7
c-0.9,0-1.8,0.2-2.6,0.7c-0.8,0.5-1.7,1.3-2.8,2.5c-2,2.1-3.9,3.2-5.8,3.2c-1.3,0-2.3-0.4-3-1.2s-1.2-1.8-1.2-2.9
c0-1.2,0.4-2.1,1.1-2.9c0.8-0.7,1.8-1.1,3.1-1.1h1v1.7h-0.9c-0.8,0-1.5,0.2-1.9,0.6c-0.5,0.4-0.7,1-0.7,1.6s0.2,1.2,0.7,1.6
c0.4,0.4,1,0.6,1.8,0.6c0.8,0,1.5-0.2,2.2-0.7c0.7-0.4,1.5-1.1,2.4-2.1c1.1-1.2,2.2-2.1,3.2-2.7c1-0.6,2.1-0.9,3.3-0.9
c1.3,0,2.3,0.4,3.1,1.2c0.8,0.8,1.2,1.8,1.2,3s-0.4,2.2-1.2,3c-0.8,0.8-1.8,1.1-3.2,1.1h-1.3v-1.8H405.3z"/>
<path class="st1" d="M409.5,200.4h-19.1v-6.7h1.7v4.9h6.6v-4h1.6v4h7.4v-5h1.7V200.4z"/>
<path class="st1" d="M394.6,191.3c-1.3,0-2.4-0.4-3.2-1.2c-0.8-0.8-1.2-1.8-1.2-3c0-1.2,0.4-2.2,1.2-3c0.8-0.8,1.9-1.2,3.2-1.2
h10.9c1.3,0,2.4,0.4,3.2,1.2c0.8,0.8,1.2,1.8,1.2,3c0,1.2-0.4,2.2-1.2,3s-1.9,1.2-3.2,1.2H394.6z M405.3,189.5
c0.9,0,1.5-0.2,2-0.7c0.5-0.4,0.7-1,0.7-1.7c0-0.7-0.2-1.3-0.7-1.7c-0.5-0.4-1.2-0.7-2-0.7h-10.8c-0.8,0-1.5,0.2-2,0.7
c-0.5,0.4-0.7,1-0.7,1.7c0,0.7,0.2,1.3,0.7,1.7c0.5,0.4,1.2,0.7,2,0.7H405.3z"/>
<path class="st1" d="M405.3,178.8c0.9,0,1.5-0.2,2-0.7c0.5-0.4,0.8-1,0.8-1.7c0-0.7-0.2-1.3-0.7-1.7c-0.5-0.4-1.1-0.7-1.9-0.7
c-0.9,0-1.8,0.2-2.6,0.7c-0.8,0.5-1.7,1.3-2.8,2.5c-2,2.1-3.9,3.2-5.8,3.2c-1.3,0-2.3-0.4-3-1.2s-1.2-1.8-1.2-2.9
c0-1.2,0.4-2.1,1.1-2.9c0.8-0.7,1.8-1.1,3.1-1.1h1v1.7h-0.9c-0.8,0-1.5,0.2-1.9,0.6c-0.5,0.4-0.7,1-0.7,1.6s0.2,1.2,0.7,1.6
c0.4,0.4,1,0.6,1.8,0.6c0.8,0,1.5-0.2,2.2-0.7c0.7-0.4,1.5-1.1,2.4-2.1c1.1-1.2,2.2-2.1,3.2-2.7c1-0.6,2.1-0.9,3.3-0.9
c1.3,0,2.3,0.4,3.1,1.2c0.8,0.8,1.2,1.8,1.2,3s-0.4,2.2-1.2,3c-0.8,0.8-1.8,1.1-3.2,1.1h-1.3v-1.8H405.3z"/>
</g>
</g>
</g>
<!--ALMACEN-->
<g>
<g>
<a href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjgzMSIsInRvZ2dsZSI6ZmFsc2V9" >
<rect x="371.7" y="2.6" class="st0" width="224.3" height="127.7"/>
</a>
</g>
<g>
<g>
<path class="st1" d="M455.9,75.8H454l-0.9-4.9H449l-0.9,4.9h-1.8l4-19.1h1.8L455.9,75.8z M449.2,69.5h3.6l-1.8-9.3L449.2,69.5z"
/>
<path class="st1" d="M457.8,75.8V56.7h1.8v17.4h4.4v1.7H457.8z"/>
<path class="st1" d="M468,61.3v14.5h-1.7V56.7h1.9l3.9,12.6l3.9-12.6h1.8v19.1H476V61.3l-3.5,11.4h-0.9L468,61.3z"/>
<path class="st1" d="M489.4,75.8h-1.9l-0.9-4.9h-4.1l-0.9,4.9h-1.8l4-19.1h1.8L489.4,75.8z M482.7,69.5h3.6l-1.8-9.3L482.7,69.5z
"/>
<path class="st1" d="M497.3,69.1h1.8v2.7c0,1.3-0.4,2.3-1.1,3.1c-0.8,0.8-1.7,1.2-2.9,1.2c-1.2,0-2.2-0.4-2.9-1.1
c-0.8-0.8-1.1-1.8-1.1-3.1V60.7c0-1.3,0.4-2.3,1.2-3.1c0.8-0.8,1.8-1.2,2.9-1.2c1.2,0,2.1,0.4,2.9,1.1c0.7,0.8,1.1,1.8,1.1,3.1
v2.5h-1.8v-2.4c0-0.8-0.2-1.4-0.6-1.9c-0.4-0.5-1-0.7-1.6-0.7c-0.7,0-1.2,0.2-1.6,0.7c-0.4,0.5-0.6,1.1-0.6,1.9v11
c0,0.8,0.2,1.5,0.6,1.9c0.4,0.5,1,0.7,1.6,0.7c0.7,0,1.2-0.2,1.6-0.7c0.4-0.5,0.6-1.1,0.6-1.9V69.1z"/>
<path class="st1" d="M502.1,75.8V56.7h6.7v1.7H504V65h4v1.6h-4v7.4h5v1.7H502.1z M506.4,50.7h1.9l-2.1,4.4h-1.4L506.4,50.7z"/>
<path class="st1" d="M513.1,60.9v14.9h-1.7V56.7h1.8l5.2,14.6V56.7h1.7v19.1h-1.7L513.1,60.9z"/>
</g>
</g>
</g>
</svg>
Paso 4: Crear galerías de imágenes
Para habilitar las galerías de imágenes al hacer clic en las habitaciones, sigue estos pasos:
- Crea cada galería de imágenes como una ventana emergente.
- Crea un botón por cada galería en Elementor y enlaza cada botón con la galería que corresponda a través de las etiquetas dinámicas.
- Inspecciona el código en tu navegador para obtener la acción del botón.
- Cada una de estas acciones la vamos a pegar en nuestro código SVG en las ubicaciones de los enlaces que hemos marcado desde illustrator.
Paso 5: Optimizar enlaces y comentarios
A menudo, los enlaces generados por illustrator contienen atributos antiguos. Asegúrate de que los enlaces se vean así:
‘ <a href=» » /> ‘
Para no perder la identificación de las habitaciones, puedes añadir comentarios a los enlaces con el nombre de la habitación.
Conclusión:
¡Felicidades! Ahora tienes las herramientas y conocimientos para transformar tus planos en fascinantes SVGs interactivos utilizando Illustrator y Elementor. En este tutorial, aprendiste a resaltar habitaciones al pasar el cursor sobre ellas y a crear galerías de imágenes al hacer clic en cada sala representada en el plano.
La combinación de efectos «hover» y enlaces atractivos añadirá un toque único y agradable a tus representaciones gráficas, mejorando la experiencia de tus visitantes en tu sitio web. Recuerda optimizar tu contenido para el SEO, asegurándote de utilizar palabras clave relevantes y proporcionar instrucciones claras para que tus lectores puedan seguir tus pasos con facilidad.
Ahora es tu turno de explorar y experimentar con tus propios diseños. Los SVGs interactivos son una forma creativa de presentar información y captar la atención de tu audiencia. ¡Diviértete creando experiencias visuales memorables en tu sitio web con esta emocionante técnica!
