Bildväxlare med texter (css/html)

// Requires basic knowledge of html/css editing

Så här lägger du till det på din landningssida för butiken

Välj och kopiera koden nedan:

<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å till "Admin" > "Inställningar" > "Mall" och välj ett av de 3 alternativen för "Anpassad kod", beroende på var på sidan du vill placera den.

Klicka på ikonen "Källkod" till höger

I html-fönstret som öppnas klistrar du in koden som du just kopierade

Klicka på "Ok"

Valfritt: Publicera och kontrollera att den nu visas i din butik (uppdatera landningssidan)

Anpassa bilder, färger, text etc.

Öppna html-redigeraren igen och redigera de element som du vill ändra. Koden innehåller också instruktioner som kan hjälpa dig.

I det här exemplet har bilderna laddats upp i "Admin" > "Inställningar" > "Media", men du kan också använda bilder som finns någon annanstans, t.ex. en produktbild eller bilder från din huvudwebbplats.

Se till att du har rätt rättigheter/licens för att använda bilderna.

Kom ihåg att publicera dina ändringar för att kunna kontrollera dem på din landningssida.

Några tips

Använd bilder i samma storlek.
Använd texter med liknande längd.
Om du vet vad du gör kan du lägga till/ta bort bilder och texter. Om du inte har en aning om vad keyframes eller barn gör, håll dig till standardinställningen med 4 bilder/texter eller be support om hjälp.