Reply To: How to use Image Hotspots block

July 29, 2020 at 10:34 pm #10034009
Support
Keymaster

Hello, first thanks for your purchase.

1) Just copy the hotspots HTML code and paste where you want in the feature-navigations-stripe.html.

This is the HTML code of hotspots:

<div class="container py-4">

	<div class="row py-4 mb-4">
		<div class="col">
			<div class="image-hotspots">
				<img src="img/bg-hotspots.jpg" class="img-fluid" />

				<a style="left: 18%; top: 19%;" class="image-hotspot image-hotspot-primary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
					<strong>1</strong>
				</a>

				<a style="left: 10%; top: 70%;" class="image-hotspot image-hotspot-primary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
					<strong>2</strong>
				</a>

				<a style="left: 60%; top: 32%;" class="image-hotspot image-hotspot-dark" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
					<strong>3</strong>
				</a>

				<a style="left: 77%; top: 36%;" class="image-hotspot image-hotspot-light" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
					<strong>4</strong>
				</a>

			</div>
		</div>
	</div>

</div>

In the image below I paste between intro section and title with text rotator:

2) Each letter in the slider is a separate layer. This mean that you need control the position of each letter. This can be done trough attributes data-x data-hoffset for horizontal position and data-y data-v-offset for vertical position:

* Note that each attribute has 4 values. Each one is applied for each screen resolution (Desktops, Laptops, Tablets and Smartphones).
* Learn more about that here: https://www.themepunch.com/revsliderjquery-doc/responsive-setup-2/

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads