Bildeveksler med tekster (css/html)

// Requires basic knowledge of html/css editing

Slik legger du det til på butikkens landingsside

Velg og kopier koden nedenfor:

<style>
/* THIS IS THE GRAY BORDER BOX */
#livebox {
display: flex;
width: fit-content;
height: auto;
margin: 3rem auto;
background-color: #efefef;
border: 5px solid #efefef;
border-radius: 25px;
position: relative;
flex-wrap: wrap;
overflow: hidden;
}
/* THIS IS THE TOP BUTTON (also controls parts of the 2nd button) */
a.buttonX {
height: 40px;
width: auto;
margin-top: 4rem;
margin-bottom: 0;
background-color: #121212;
color: white;
font-weight: 700;
padding: 25px;
text-decoration: none;
border-radius: 10px;
border: 2px solid black;
align-items: center;
justify-content: center;
display: flex;
}
a.buttonX:hover {
background-color: white;
color: black;
border-color: black;
align-items: center;
}
/* THIS IS THE 2nd BUTTON */
a.buttonX.cta {
margin-top: -.8rem;
background-color: green;
color: white;
border: 2px solid green;
}
a.buttonX.cta:hover {
background-color: white;
color: green;
border-color: green;
align-items: center;
}
/* THIS IS THE IMAGE BOX */
.chgr1 {
width: 600px;
height: 600px;
background-size: cover;
background-position: center center;
/* SETS THE SPEED OF THE ANIMATION IN SECONDS - MUST HAVE SAME SPEED AS TEXT CHANGER */
animation:  chgr1 40s infinite ease-in-out;
border-radius: 20px 0 0 20px;
}
/* BELOW IS WHERE YOU SWAP THE IMAGES — BELOW IS WHERE YOU SWAP THE IMAGES */
@keyframes chgr1 {
0% {
background-image: url('	https://cdn.mysharefox.com/styledemo5/uploads/documents/cat6.jpg'); /* IMG 1 */
}
25% {
background-image: url('	https://cdn.mysharefox.com/styledemo5/uploads/documents/cat5.jpg'); /* IMG 2 */
}
50% {
background-image: url('	https://cdn.mysharefox.com/styledemo5/uploads/documents/cat7.jpg'); /* IMG 3 */
}
75% {
background-image: url('	https://cdn.mysharefox.com/styledemo5/uploads/documents/cat8.jpg'); /* IMG 4 */
}
100% {
background-image: url('	https://cdn.mysharefox.com/styledemo5/uploads/documents/cat6.jpg'); /* IMG 1 repeat for smooth transition */
}
}
/* ABOVE IS WHERE YOU SWAP THE IMAGES — ABOVE IS WHERE YOU SWAP THE IMAGES */
/* BELOW IS THE TEXT BOX */
.chgr2 {
width: auto;
height: auto;
}
.text-rotator {
  position: relative;
  width: 500px;
  height: 1em;
  margin-top: 20%;
  margin-left: 4rem;
  margin-right: 4rem;
}
/* 
THE "ITEMS" ARE THE DIVS CONTAINING EACH OF THE TEXTS 
*/
.item {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
/* SETS THE SPEED OF THE ANIMATION IN SECONDS - MUST HAVE SAME SPEED AS IMAGE CHANGER */
  animation: rotateText 40s infinite;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  pointer-events: none;
}
.item h1 {
text-transform: uppercase;
}
/* 
BELOW SETS THE DELAY FOR EACH OF THE TEXT ITEMS
*/
.item:nth-child(1) {
  animation-delay: 0s;
}
.item:nth-child(2) {
  animation-delay: 8s;
}
.item:nth-child(3) {
  animation-delay: 17s;
}
.item:nth-child(4) {
  animation-delay: 26s;
}
.item:nth-child(5) {
  animation-delay: 37s;
}
/* 
!!!!!!!!!! YOU PROBABLY SHOULD NOT MESS WITH THIS !!!!!!!!!!
*/
@keyframes rotateText {
  0%   { opacity: 0;}
  1%   {opacity: 1; pointer-events: auto;}
  15%  {opacity: 1; pointer-events: auto;}
  20%  { opacity: 0;} 
  32%  { opacity: 0; pointer-events: none;} 
  100% { opacity: 0;}
}
/* 
THE BELOW CODE MAKES IT RESPONSIVE AND LOOKING NICE ON TABLETS AND MOBILE 
*/
@media only screen and (max-width: 1250px) {
#livebox {
width: 100%;
height: fit-content;
}
.chgr2 {
width: 50%;
min-height: 40vh;
}
.chgr1 {
width: 50%;
min-height: 40vh;
border-radius: 20px 0 0 20px;
}
.text-rotator {
  position: relative;
  width: auto;
  margin-top: 15%;
  margin-left: 2rem;
  margin-right: 2rem;
}
a.buttonX {
height: 40px;
width: auto;
margin-top: 2rem;
margin-bottom: 20px;
}
a.buttonX.cta {
height: 40px;
width: auto;
margin-top: -1.4rem;
margin-bottom: 20px;
}
}
@media only screen and (max-width: 769px) {
#livebox {
width: 100%;
height: fit-content;
}
.chgr2 {
width: 100%;
min-height: 460px;
}
.chgr1 {
width: 100%;
min-height: 40vh;
border-radius: 20px 20px 0 0;
}
.text-rotator {
  position: relative;
  width: auto;
  margin-top: 10%;
  margin-left: 4rem;
  margin-right: 4rem;
}
.item h1 {
font-size: 1.9rem;
line-height: 2.1rem;
margin-bottom: 20px;
}
a.buttonX {
height: 40px;
width: auto;
margin-top: 2rem;
margin-bottom: 0;
}
a.buttonX.cta {
height: 40px;
width: auto;
margin-top: -.8rem;
margin-bottom: 20px;
}
}
</style>
/* 
THIS IS WHERE YOU EDIT THE TEXTS AND BUTTONS — H1=TITLE, P=TEXT, A=BUTTON (URL & TEXT)
*/
<div id="livebox">
<div class="chgr1">&nbsp;</div>
<div class="chgr2">
<div class="text-rotator">
<!-- ———————————————————————————————ITEM 1——————————————————————————————— -->
<div class="item 1">
<h1>This is the number one</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed volutpat eros, non imperdiet nisl. Sed luctus, mi finibus cursus varius, dui eros blandit neque, non condimentum ex orci et felis. Integer sed mattis felis. Sed at risus quis orci volutpat tempor. Fusce vel vehicula dui. Fusce ac lectus non leo molestie molestie. Aliquam purus nunc, mattis ac dapibus vitae, sodales non metus.</p>
<p>&nbsp;</p>
<a class="buttonX" href="https://sharefox.com">Button 1</a> 
<a class="buttonX cta" href="https://sharefox.com">Button 2</a></div>
<!-- ———————————————————————————————ITEM 2——————————————————————————————— -->
<div class="item 2">
<h1>This is the number two</h1>
<p>Mauris eget libero eget erat commodo cursus. Proin sed est id velit condimentum vulputate at et orci. Vestibulum facilisis posuere scelerisque. Aenean accumsan elit et augue aliquet consequat. Sed facilisis maximus ex sed efficitur. Suspendisse sit amet ante quis orci venenatis blandit eu a lectus. Nulla ac euismod metus.<br />&nbsp;</p>
<p>&nbsp;</p>
<a class="buttonX" href="https://sharefox.com">Button 1</a> 
<a class="buttonX cta" href="https://sharefox.com">Button 2</a></div>
<!-- ———————————————————————————————ITEM 3——————————————————————————————— -->
<div class="item 3">
<h1>This is the number three</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed volutpat eros, non imperdiet nisl. Sed luctus, mi finibus cursus varius, dui eros blandit neque, non condimentum ex orci et felis. Integer sed mattis felis. Sed at risus quis orci volutpat tempor. Fusce vel vehicula dui. Fusce ac lectus non leo molestie molestie. Aliquam purus nunc, mattis ac dapibus vitae, sodales non metus.</p>
<p>&nbsp;</p>
<a class="buttonX" href="https://sharefox.com">Button 1</a> 
<a class="buttonX cta" href="https://sharefox.com">Button 2</a></div>
<!-- ———————————————————————————————ITEM 4——————————————————————————————— -->
<div class="item 4">
<h1>This is the number four</h1>
<p>Mauris eget libero eget erat commodo cursus. Proin sed est id velit condimentum vulputate at et orci. Vestibulum facilisis posuere scelerisque. Aenean accumsan elit et augue aliquet consequat. Sed facilisis maximus ex sed efficitur. Suspendisse sit amet ante quis orci venenatis blandit eu a lectus. Nulla ac euismod metus.<br />&nbsp;</p>
<p>&nbsp;</p>
<a class="buttonX" href="https://sharefox.com">Button 1</a> 
<a class="buttonX cta" href="https://sharefox.com">Button 2</a></div>
<!-- ————————————————————————————ITEM 1 repeat———————————————————————————— -->
<div class="item 1">
<h1>This is the number one</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed volutpat eros, non imperdiet nisl. Sed luctus, mi finibus cursus varius, dui eros blandit neque, non condimentum ex orci et felis. Integer sed mattis felis. Sed at risus quis orci volutpat tempor. Fusce vel vehicula dui. Fusce ac lectus non leo molestie molestie. Aliquam purus nunc, mattis ac dapibus vitae, sodales non metus.</p>
<p>&nbsp;</p>
<a class="buttonX" href="https://sharefox.com">Button 1</a> 
<a class="buttonX cta" href="https://sharefox.com">Button 2</a></div>
</div>
</div>
</div>

Gå til "Admin" > "Innstillinger" > "Mal" og velg ett av de tre alternativene for "Tilpasset kode", avhengig av hvor på siden du vil plassere den.

Klikk på ikonet "Kildekode" til høyre

I html-vinduet som åpnes, limer du inn koden du nettopp kopierte

Klikk på "Ok"

Valgfritt: Publiser og sjekk at den nå vises i butikken din (oppdater landingssiden)

Tilpass bilder, farger, tekst osv.

Åpne html-redigeringsprogrammet igjen, og rediger elementene du vil endre. Koden viser også instruksjoner som kan hjelpe deg.

I dette eksemplet er bildene lastet opp i "Admin" > "Innstillinger" > "Media", men du kan også bruke bilder som ligger andre steder, for eksempel et produktbilde eller bilder fra hovednettstedet ditt.

Sørg for at du har de riktige rettighetene/lisensene til å bruke bildene.

Husk å publisere endringene for å kunne se dem på landingssiden din.

Noen tips

Bruk bilder i samme størrelse.
Bruk tekster av samme lengde.
Hvis du vet hva du gjør, kan du legge til/fjerne bilder og tekster. Hvis du ikke aner hva keyframes eller children gjør, bør du holde deg til standardinnstillingen med fire bilder/tekster, eller be support om hjelp.