Jak umieścić dwa przyciski obok siebie w tej samej kolumnie w motywie Divi?

utworzone przez | gru 4, 2022 | Divi | 1 komentarz

W tym krótkim wpisie podzielę się sposobem na ustawienie przycisków obok siebie w motywie Divi.

Domyślnie w kreatorze wizualnym Divi nie ma opcji w modułach ani kolumnie wiersza na wyświetlenie dwóch modułów przycisków w tej samej linii wewnątrz kolumny. Na szczęście można to osiągnąć za pomocą krótkiego niestandardowego kodu CSS.

Oto przykład tego, jak to będzie wyglądać po zastosowaniu tego sposobu. Jak widać, 2 przyciski w pierwszej kolumnie wyświetlają się w linii.

Dodaj klasę CSS w kolumnie, aby umieścić przyciski obok siebie

Pierwszym krokiem jest dodanie klasy CSS do kolumny. Najpierw przejdź do Ustawienia wiersza, który ma przyciski.

Następnie otwórz Ustawienia kolumny , w której znajdują się przyciski. W moim przypadku przyciski znajdują się w pierwszej kolumnie. Otworzę więc ustawienie dla pierwszej kolumny.

Następnie przejdź do Zaawansowane > Identyfikatory i klasy CSS > Klasa CSS i wprowadź klasę przyciski-obok-siebie. Po dodaniu klasy do kolumny zatwierdź zmiany i zapisz stronę.

Dodaj niestandardowy kod CSS, aby wyświetlać przyciski obok siebie

Teraz przejdź do kokpitu WordPress > Divi > Opcje szablonów graficznych > Ogólne > Niestandardowe CSS i dodaj następujący kod:

/*moduły przycisków obok siebie w tej samej kolumnie*/
.przyciski-obok-siebie .et_pb_button_module_wrapper{
	display: inline-block;
	margin-right:20px;
}

Zapisz zmiany i zobacz efekt na stronie.

Jeśli nie masz pewności, gdzie dodać kod, poniżej dodaje zrzut ekranu, który Ci pomoże.

To wszystko, przyciski w kolumnie pojawią się obok siebie.

Wyśrodkowanie przycisków w kolumnie

Jeśli chcesz aby przyciski były na środku dodaj jeszcze taki kod CSS:

.przyciski-obok-siebie {
	    text-align: center !important;
}

Gotowe 🙂

1 komentarz

  1. Artur Giza

    bardzo przydatny materiał 🙂 dziękuję

    Odpowiedz

Wyślij komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *