Revolution Slider fade in delaytime

Hello,

We have checked this out and unfortunately, the delay is due to the Revolution Sliders itself. This is the delay they take while constructing the Slider via JS. You can check the examples on their Official Website: https://www.sliderrevolution.com/templates/news-magazine-slider-for-wordpress/ and they do have a considerable amount of delay as well.

What we can do is display an Alternate Image while the Slider is Loading and then fade it out once the Slider is ready and fading in. Add the following code just after the .slider-inner DIV start:

<img src="images/videos/explore-poster.jpg" alt="Image" class="revslider-placeholder position-absolute top-0 start-0 w-100 h-100">

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Glad the issues were resolved!

Simply find the following code:

<a href="#" class="button button-border button-white button-light button-large button-rounded text-end m-0"><span>Unser Leistungsspektrum</span> <i class="icon-angle-right"></i></a>

and remove the button-border button-white button-light Classes.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Apologies, we might have misunderstood your query.

This is Absolutely Possible! Simply add the .h-bg-color Class to the .button Element. Example:

<a href="#" class="button button-border button-white button-light h-bg-color button-large button-rounded text-end m-0"><span>Unser Leistungsspektrum</span> <i class="icon-angle-right"></i></a>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

This is Definitely Possible. So, what we recommend doing in this case is use different Rows for each section and then using .flex-lg-row-reverse Class in one of the .row DIV. Example:

<div class="row align-items-stretch">
	<div class="col-lg-6 center col-padding min-vh-25" style="background: url('images/wirueberuns1.jpg') center center no-repeat; background-size: cover;">
	</div>

	<div class="col-lg-6 col-padding" style="background-color: #FAFAFA;">
		<div class="heading-block border-bottom-0">
			<h3>Erfahrung und Präzision</h3>
		</div>
		<p class="lead mb-0">Unsere nunmehr fast 40 jährige Erfahrung, die Präzision unserer Planung und die stete Einsatzbereitschaft unseres technischen Equipments machen uns zu einem zuverlässigen Partner. </p>
	</div>
</div>

<div class="row align-items-stretch flex-lg-row-reverse">
	<div class="col-lg-6 center col-padding min-vh-25" style="background: url('images/wirueberuns2.jpg') center center no-repeat; background-size: cover;">
	</div>

	<div class="col-lg-6 col-padding" style="background-color: #FAFAFA;">
		<div class="heading-block border-bottom-0">
			<h3>Zuverlässiger Partner</h3>
		</div>
		<p class="lead mb-0">Zuverlässigkeit und Qualität sind aufgrund der revisions- und reinigungsbedingten Stillstandzeiten der Kraftwerke unabdingbar, um den technischen und wirtschaftlichen Ausfall auf ein Minimum zu begrenzen.</p>
	</div>
</div>

<div class="row align-items-stretch">
		<div class="col-lg-6 center col-padding min-vh-25" style="background: url('images/wirueberuns3.jpg') center center no-repeat; background-size: cover;">
		</div>

		<div class="col-lg-6 col-padding" style="background-color: #FAFAFA;">
			<div class="heading-block border-bottom-0">
				<h3>Kompetente Planung</h3>
			</div>
			<p class="lead mb-0">Sprechen Sie mit unserem Techniker-Team. Wir erarbeiten für Sie gerne individuelle Lösungen hinsichtlich Aufgabenstellung und Terminierung.</p>
		</div>

	</div>
</div>

Also, we have made the the Image Height minimum 25% of the Viewport. You can increase or decrease it according to the Height Helper Classes: http://docs.semicolonweb.com/docs/utility-classes/heights/ .

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

This should be your code:

<div class="row justify-content-center gutter-50 col-mb-50 mb-3">
	<div class="col-lg-10">
		<div class="row team team-list rounded-5 g-0 align-items-center shadow-sm border h-shadow h-translatey-sm all-ts rounded-4 flex-md-row-reverse overflow-hidden">
			<div class="col-md-5 team-image col-sm-5 d-flex align-self-stretch">
				<img src="images/gf_uwebiallas.jpg" alt="Foto Uwe Biallas">
			</div>
			<div class="col-md-7 col-sm-7 p-4 mb-5">
				<div class="team-desc text-start">
					<div class="team-title pt-0 mb-3"><h2>Uwe Biallas</h2><span class="fst-normal">Geschäftsführer</span></div>
					<p class="mb-3">Uwe Biallas ist seit dem 01.03.1985 bei Haumann und seit dem Jahre 1999 Geschäftsführer.</p>
				</div>
			</div>
		</div>
	</div>
</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Thank You so much for the Kind Words! :)

1. The Background Image is resized according to the size of the available area for the best fit. You may consider using a different background-position for responsive devices based on your Image requirements as it may work best in this case. Example:

.device-sm #slider { background-position: right; }

.device-xs #slider { background-position: right; }

This will definitely work fine. The Responsive Classes are as follows:

.device-xl – Class for Large Devices >=1200px

.device-lg – Class for Medium Devices >=992px to 1199px

.device-md – Class for Tablets

.device-sm – Class for Landscape Mobiles or Phablets.

.device-xs – Class for Portrait Mobiles

1. The Entire Layout for this is incorrect. We Apologize for the Inconveniences, however, we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy . You will need to manually code Custom Layouts or Hire a Freelancer to help you out.

You can consider using this code:

<div class="row grid-container justify-content-center text-center gutter-50 col-mb-50 mt-3">

	<div class="col-md-6">
		<div class="grid-inner">
			<a class="d-inline-block" href="images/zertifikat_scc.jpg" data-lightbox="image">
				<img src="images/zertifikat_scc_800px.jpg" alt="Single Image">
				<div class="bg-overlay">
					<div class="bg-overlay-content dark">
						<i class="icon-line-plus h4 mb-0" data-hover-animate="fadeIn"></i>
					</div>
					<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
				</div>
			</a>
		</div>
	</div>

	<div class="col-md-6">
		<div class="grid-inner">
			<a class="d-inline-block" href="images/zertifikat_scc.jpg" data-lightbox="image">
				<img src="images/zertifikat_scc.jpg" alt="Single Image">
				<div class="bg-overlay">
					<div class="bg-overlay-content dark">
						<i class="icon-line-plus h4 mb-0" data-hover-animate="fadeIn"></i>
					</div>
					<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
				</div>
			</a>
		</div>
	</div>

	<div class="col-md-6">
		<div class="grid-inner">
			<a class="d-inline-block" href="images/zertifikat_scc.jpg" data-lightbox="image">
				<img src="images/zertifikat_scc.jpg" alt="Single Image">
				<div class="bg-overlay">
					<div class="bg-overlay-content dark">
						<i class="icon-line-plus h4 mb-0" data-hover-animate="fadeIn"></i>
					</div>
					<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
				</div>
			</a>
		</div>
	</div>

	<div class="col-md-6">
		<div class="grid-inner">
			<a class="d-inline-block" href="images/zertifikat_scc.jpg" data-lightbox="image">
				<img src="images/zertifikat_scc.jpg" alt="Single Image">
				<div class="bg-overlay">
					<div class="bg-overlay-content dark">
						<i class="icon-line-plus h4 mb-0" data-hover-animate="fadeIn"></i>
					</div>
					<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
				</div>
			</a>
		</div>
	</div>

</div>

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

We are very Happy to Help! :)

You can simply consider using this code:

<a class="d-inline-block w-75 position-relative" href="images/zertifikat_scc.jpg" data-lightbox="image">
	<img src="images/zertifikat_scc.jpg" alt="Single Image">
	<div class="bg-overlay">
		<div class="bg-overlay-content dark">
			<i class="icon-line-plus h4 mb-0" data-hover-animate="fadeIn"></i>
		</div>
		<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
	</div>
</a>

This will definitely work fine. If you would like to make the Image even more smaller, simply use style="width:60%;" Attribute instead of using the .w-75 Class. Example:

<a class="d-inline-block position-relative" href="images/zertifikat_scc.jpg" data-lightbox="image" style="width:60%;">
	<img src="images/zertifikat_scc.jpg" alt="Single Image">
	<div class="bg-overlay">
		<div class="bg-overlay-content dark">
			<i class="icon-line-plus h4 mb-0" data-hover-animate="fadeIn"></i>
		</div>
		<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
	</div>
</a>

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

We have just checked out the Codes on your Website and the .flex-md-row-reverse Class does not exist. See attached image.

We also tried applying this Class and the Image/Content is switching fine as expected. Please consider checking again.

Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

1. Please make sure that you are copying the Codes exactly as we provide it to you for the Layout to work correctly. Please notice that we have also added the .position-relative Class to the <a> Tag. This will ensure that the BG Overlay is properly aligned.

2. It is working for us on your Website. Clearing your browser cache will show the changes.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Not a problem at all! Glad that your issues were resolved!

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

We have just checked this out again and the .flex-md-row-reverse Class appears to be working perfectly fine for us. We have attached a Video. We are not sure which issue you are pointing to in this case. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

Thanks for your Patience!

We have checked out your Codes and the issue is that your Image is placed in the last column which is why the Image appears last on Mobile Devices. You will need to use something like this:

<div class="row gutter-50 align-items-center my-5 flex-md-row-reverse">

	<div class="col-md-6 mt-0">
		<img src="images/wirueberuns2.jpg" alt="Haumann GmbH Foto der Firma" class="rounded">
	</div>

	<div class="col-md-6">
		<div class="heading-block topmargin-sm">
			<h1>Die Haumann GmbH</h1>
			<p class="lead">Wir sind Ihr zuverlässiger Partner bei Kessel- und Maschinenrevisionen. Ebenfalls übernehmen wir für Sie alle in diesem Zusammenhang anfallenden allgemeinen Reinigungsarbeiten.</p>
		</div>
		<p>Im Revisionsbereich kommen neben der Bestiftungstechnik diverse Strahltechniken wie z.B. das Glasperlen-Strahlen und das Staubfrei-Strahlen zum Einsatz. Unser professionelles modernes Equipment verbunden mit unseren qualifizierten und flexiblen Mitarbeitern garantieren einen hohen Qualitätsstandard unserer Arbeit.Auf unserem Werkstattgelände verfügen wir über eine eigene Strahlhalle. Hier können aufgrund der Hallenabmessung von 6 x 10 m Grundfläche und einer Höhe von 5 m auch großvolumige Bau- und Maschinenteile gestrahlt werden. Dadurch sind wir in der Lage sowohl vor Ort als auch auf unserem Betriebsgelände alle anfallenden Strahlarbeiten für unsere Kunden durchzuführen.</p>
		<a href="#" class="button button-border button-rounded button-fill mb-5"><span>Unsere Referenzen</span></a>
	</div>

</div>

This should work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.