TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak dodawać i dostosowywać przyciski w witrynie Weebly?

0

Przyciski w witrynie Weebly to jeden z ważnych elementów używanych w celu wezwania do działania. Na przykład możesz dodać przycisk proszący użytkowników o pobranie dokumentu PDF. Ponieważ Weebly ma bardzo mniejszą liczbę motywów, częstym problemem jest to, że możesz polubić cały motyw, ale przycisk tego motywu może mieć przeszkadzający styl. W takim scenariuszu łatwo jest zastąpić domyślny styl elementu przycisku Weebly własnym niestandardowym kodem CSS lub stylem przycisku innego motywu. W tym artykule wyjaśniono możliwości dostosowania domyślnego elementu przycisku Weebly.

Dodawanie domyślnego elementu przycisku

Weebly domyślnie oferuje element przycisku „przeciągnij i upuść", który można dostosować do czterech różnych typów. Element przycisku jest pogrupowany w kategorii „struktura” elementów. Domyślnie użytkownicy mogą dodać dwa style małych przycisków i dwa style dużych przycisków.

Jak dodawać i dostosowywać przyciski w witrynie Weebly?

Domyślne style przycisków Weebly

We wszystkich nieresponsywnych motywach Weebly używa obrazów do utworzenia przycisku, a we wszystkich responsywnych motywach styl przycisków jest kontrolowany w pliku „main.less”. Po przeciągnięciu i upuszczeniu kliknij przycisk w obszarze zawartości, aby wyświetlić następujące opcje dostosowywania:

  • Tekst przycisku – tekst, który będzie wyświetlany na przycisku.
  • Styl przycisku – wybierz jeden z czterech dostępnych stylów.
  • Pozycja – wyrównanie przycisku do środka, do prawej lub do lewej.
  • Link – dodaj linki do tekstu przycisku.
  • Odstępy – dostosuj górne i dolne marginesy.

Jak dodawać i dostosowywać przyciski w witrynie Weebly?

Opcje elementu przycisku Weebly

Oprócz przycisku „przeciągnij i upuść” Weebly oferuje również przycisk wezwania do działania w szablonach stron docelowych.

Zamień lub zmodyfikuj style przycisków w sekcji „main.less”, aby dostosować przyciski w witrynie Weebly za pomocą responsywnych motywów.

Responsywne a nieresponsywne

Zanim spróbujesz zmienić styl swoich przycisków, sprawdź, jakiego rodzaju motywu aktualnie używasz. W motywach Weebly stosowane są trzy rodzaje przycisków:

  • Przyciski CSS na responsywnych motywach – przykładowy motyw Slick, Cento.
  • Przyciski CSS na nieresponsywnych motywach – przykładowy motyw Cleancut.
  • Przyciski graficzne na nieresponsywnych motywach – przykładowy motyw Miasto.

Nieresponsywne motywy z przyciskami graficznymi – tutaj element przycisku używa obrazu, a CSS po prostu wywołuje ten obraz jako tło, przykładowy motyw to Miasto.

Nieresponsywne motywy z przyciskami CSS – motywy takie jak Cleancut wykorzystują kompletne przyciski CSS bez obrazów, chociaż nie są responsywne.

Responsywne motywy – wszystkie najnowsze motywy, takie jak Slick, Cento, Paper itp. są w pełni responsywne, a element przycisku jest generowany z kodu CSS.

Omówimy, jak zmienić styl przycisku zarówno w motywach responsywnych, jak i nieresponsywnych.

Przypadek 1 – Dodawanie niestandardowych obrazów przycisków w motywach, które nie są responsywne

Ważną cechą elementu przycisku Weebly jest możliwość dostosowania się do długości tekstu. Przycisk zostanie automatycznie dostosowany zgodnie z długością wprowadzonego tekstu. Osiąga się to, dzieląc przycisk na dwa obrazy. Zanim przejdziesz dalej, wykonaj poniższe czynności, aby zrozumieć, gdzie są przechowywane obrazy przycisków w witrynie Weebly.

  • Zaloguj się na swoje konto Weebly i wybierz witrynę do edycji.
  • Przejdź do zakładki „Motyw” i kliknij przycisk „Edytuj HTML / CSS”.
  • W sekcji „Zasoby” zobaczysz różne obrazy przycisków, jak pokazano poniżej:

Jak dodawać i dostosowywać przyciski w witrynie Weebly?

Obrazy przycisków w nieresponsywnych motywach Weebly

Zauważyliśmy, że wszystkie nieresponsywne motywy używające obrazów dla przycisków mają 9 zestawów obrazów (w sumie 18) dla mniejszych i większych przycisków, ale używają 2 określonych obrazów w CSS jako tła przycisku. Sprawdź „main_style.css” i dowiedz się, jakie obrazy są używane do przycisków. Poniższy przykład w motywie City pokazuje, że „button-highlight.png” i „button-highlight-large.png” są używane odpowiednio dla mniejszych i większych przycisków.

Jak dodawać i dostosowywać przyciski w witrynie Weebly?

Obrazy używane do przycisków w nieresponsywnych motywach

Jeśli nie podobają Ci się te przyciski, po prostu zmień obraz na jeden z dostępnych obrazków z 9 zestawów. Zmieniasz „button-highlight.png” na „button-purple.png”. Jeśli nie podoba Ci się żaden z istniejących obrazów przycisków, utwórz własne niestandardowe obrazy o podobnych rozmiarach i stylu podziału i prześlij je w sekcji „Zasoby”. Upewnij się, że używasz nazwy obrazu w „main_style.css” jako właściwości „background”.

Przypadek 2 – Dostosowywanie przycisków CSS w nieresponsywnych motywach

Jeśli nie znajdziesz żadnych obrazów przycisków w sekcji „Zasoby” niereagującego motywu, sprawdź „main_style.css”, aby zobaczyć sekcję „Przyciski”. Poniżej znajduje się kod CSS z motywu Cleancut, który można dostosować do potrzeb, jako tło, kolory, efekt najechania itp.

/* Buttons --------------------------------------------------------------------------------*/ /* Small structure & regular style */ .wsite-button { background: red; background: -moz-linear-gradient(top,#444 0,#333 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#444),color-stop(100%,#333)); background: -webkit-linear-gradient(top,#444 0,#333 100%); background: -o-linear-gradient(top,#444 0,#333 100%); background: -ms-linear-gradient(top,#444 0,#333 100%); background: linear-gradient(top,#444 0,#333 100%); border: 1px solid #000; box-shadow:inset 0 0 15px rgba(0,0,0,0.25); -moz-border-radius: 3px; border-radius: 3px; color: white !important; font-size: 13px; font-weight: 700; padding: 3px 25px; text-align: center; text-decoration: none !important; text-shadow: 0px -1px 1px rgba(0,0,0,0.7); } .wsite-button:hover { background-position:0 0; box-shadow:0 1px 4px rgba(0,0,0,0.3); } .wsite-button:active { background-position:0 0; } .wsite-button-inner { color: #fff !important; padding:0; background: none; } .wsite-button:hover .wsite-button-inner { background:none; } .wsite-button:active { padding:4px 25px 2px; } /* Large structure & regular style */ .wsite-button-large .wsite-button-inner { font-size:14px; padding:0; } .wsite-button-large .wsite-button-inner { background: none; } /* Highlighted styles */ .wsite-button-highlight, .wsite-button-large.wsite-button-highlight { background: #0370EA; background: -moz-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#0370EA),color-stop(100%,#0370EA)); background: -webkit-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -o-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -ms-linear-gradient(top,#0370EA 0,#0370EA 100%); background: linear-gradient(top,#0370EA 0,#0370EA 100%); border: 1px solid #0052ad; box-shadow:inset 0 0 18px rgba(0,0,0,0.02); } .wsite-button-highlight:hover, .wsite-button-large.wsite-button-highlight:hover { box-shadow:0 1px 4px rgba(0,0,0,0.3); } .wsite-button-highlight .wsite-button-inner { background-image: none; } .wsite-button-large.wsite-button-highlight .wsite-button-inner { background-image: none; }

Teraz wróć do edytora i przeciągnij element przycisku do obszaru zawartości. Jak widać, przycisk będzie miał nowy styl zdefiniowany w „main.less”.

Przypadek 3 – Dostosowywanie przycisków Weebly w motywach responsywnych

Wszystkie najnowsze motywy Weebly są responsywne i do generowania przycisków używają wyłącznie kodów CSS. Jak wyjaśniono powyżej, odpowiednie style przycisków CSS są zdefiniowane w pliku „main.less” w sekcji „/ Buttons /”. Jeśli Twój motyw używa funkcji @import w CSS, pobierz odpowiedni plik przycisku dla CSS. Tutaj musisz zastąpić te kody własnym niestandardowym kodem przycisku CSS, aby zmienić domyślny styl przycisku.

Poniżej znajdują się definicje stylów CSS dla przycisku Weebly:

  • .wsite-button – Mały przycisk
  • .wsite-button:hover – efekt najechania na mały przycisk
  • .wsite-button:active – Efekt po kliknięciu małego przycisku
  • .wsite-button-inner – Zdefiniuj styl elementów wewnętrznych, takich jak rozmiar i kolor czcionki

Podobnie większe przyciski będą używać klasy CSS .wiste-button-large.

Uwaga: Jeśli masz stronę bloga dodaną w swojej witrynie, niektóre motywy mogą dodać dodatkowy przycisk CSS klasy .blog dla przycisków w postach na blogu.

Możesz modyfikować te kody CSS samodzielnie lub użyć dowolnego narzędzia do generowania przycisków CSS online, aby uzyskać wymagany CSS. Na przykład style małych przycisków można zmienić za pomocą gradientu, zastępując domyślne kody małych przycisków poniższym kodem CSS:

.wsite-button { border-top: 1px solid #96d1f8; background: #6594d6; background: -webkit-gradient(linear, left top, left bottom, from(#7a3e9c), to(#6594d6)); background: -webkit-linear-gradient(top, #7a3e9c, #6594d6); background: -moz-linear-gradient(top, #7a3e9c, #6594d6); background: -ms-linear-gradient(top, #7a3e9c, #6594d6); background: -o-linear-gradient(top, #7a3e9c, #6594d6); padding: 14.5px 29px; -webkit-border-radius: 39px; -moz-border-radius: 39px; border-radius: 39px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 24px; font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } .wsite-button:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } .wsite-button:active { border-top-color: #1b435e; background: #1b435e; }

Zmiana elementu przycisku ze starymi i nowymi kodami CSS jest pokazana w przykładowym motywie jak poniżej:

Jak dodawać i dostosowywać przyciski w witrynie Weebly?

Nowy przycisk CSS w Weebly

Uwaga: W ten sam sposób możesz zmienić style dużych przycisków. Upewnij się, że zmieniłeś kody CSS zarówno dla stylów małych, jak i dużych przycisków, aby uniknąć psucia się przycisków w opublikowanej witrynie.

Aby uprościć zadanie użytkownikom Weebly, mamy trzy style przycisków wykorzystujących klasy CSS Weebly. Możesz zastąpić CSS w sekcji „/ Przyciski /” swojego „main.less” jednym z poniższych kodów, aby zmienić styl przycisków.

Styl1:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { height: auto; padding: 0; background: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { height: auto; padding: 8px 12px; background: #333333; color: #ffffff; border: 2px solid #333333; border-radius: 1px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Quattrocento Sans', sans-serif; font-size: 14px; font-weight: 700; line-height: normal; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button-large, .wsite-editor .wsite-button-large { background: none; } .wsite-button-large .wsite-button-inner, .wsite-editor .wsite-button-large .wsite-button-inner { padding: 12px 16px; font-family: 'Quattrocento Sans', sans-serif; font-size: 16px; font-weight: 700; line-height: normal; } .wsite-button:hover .wsite-button-inner { background: #ffffff; color: #333333; border: 2px solid #333333; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: #b9b9b9; color: #ffffff; border: 2px solid #b9b9b9; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #a1a1a1; border: 2px solid #a1a1a1; }

Styl2:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { height: auto; padding: 0; background: none; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { height: auto; padding: 10px 16px; background: #35A89A; color: white; border-radius: 0; text-transform: uppercase; letter-spacing: .07em; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; line-height: normal; -webkit-transition: all 350ms ease-in; -moz-transition: all 350ms ease-in; -ms-transition: all 350ms ease-in; -o-transition: all 350ms ease-in; transition: all 350ms ease-in; } .wsite-button-large { background: none; } .wsite-button-large .wsite-button-inner { padding: 12px 20px; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 500; line-height: normal; } .wsite-button:hover .wsite-button-inner { background: #177267; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: white; color: #35A89A; border: 2px solid #35A89A; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #35A89A; color: white; }

Styl3:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { display: inline-block; height: auto; padding: 0; background: none; } .wsite-button:focus, .wsite-editor .wsite-button:focus { outline: none; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { display: inline-block; height: auto; padding: 8px 16px; background: #a1a1a1; color: white !important; border: 2px solid #a1a1a1; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 400; line-height: normal; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .wsite-button-large, .wsite-editor .wsite-button-large { display: inline-block; height: auto; padding: 0; background: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button-large .wsite-button-inner, .wsite-editor .wsite-button-large .wsite-button-inner { display: inline-block; height: auto; padding: 12px 24px; background: #a1a1a1; color: white !important; border: 2px solid #a1a1a1; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 400; line-height: normal; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .wsite-button:hover .wsite-button-inner, .wsite-button-large:hover .wsite-button-inner { background: transparent; color: #a1a1a1 !important; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: transparent; color: #808080 !important; border: 2px solid #808080; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #808080; color: white !important; }

Dodawanie niestandardowych przycisków CSS za pomocą elementu kodu osadzania

Dostosowywanie istniejącego elementu jest trudnym zadaniem, ponieważ Weebly często zmienia kod, a zakres przycisku będzie ograniczony do istniejącego stylu bez większego przyciągania. Najłatwiejszym i najprostszym sposobem jest dodanie własnych niestandardowych przycisków CSS zamiast modyfikowania istniejących kodów. Daje to nieograniczone możliwości dodawania różnego rodzaju przycisków CSS 2D i 3D do Twojej witryny Weebly. Problem polega jednak na tym, że za każdym razem musisz dodać element „Kod osadzania” z predefiniowanym stylem zamiast elementu „Przycisk”.

Na przykład możesz dodać przyciski gradientu z różnymi stylami, jak pokazano poniżej, dodając pobrany kod HTML do elementu „ Kod osadzania” i CSS w głównym arkuszu stylów („main_style.css” dla motywów nieresponsywnych i „main.less” dla responsywnych motywy).

Pobierz kod CSS/HTML dla tego widżetu przycisków gradientu Weebly.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów