Nakładanie – czyli jak
umieścić na sobie dwa
Moduły w szablonie DIVI

Dzięki pluginowi The Divi Builder możliwe jest nakładanie na siebie elementów z dwóch różnych kolumn. Dzięki odpowiednim kodom CSS możemy w dowolny sposób nakładać na siebie obrazy, teksty, czy też tekst nałożyć na obraz. Aby w prosty i szybki sposób osiągnąć efekt „nakładania”, każdroazowo należy w danym Module, który chcemy wyszczególnić dodać Niestandardowy CSS w polu Element Główny. Poniżej znajduje się kilka przykładowych kodów CSS, dzięki którym możecie nakładać na siebie różne moduły.

PRZYKŁADOWE KODY CSS W POŁĄCZENIU Z RÓŻNYMI MODUŁAMI

Po prawej stronie nałożone zostały na siebie dwa moduły: Tytuł posta i Galeria. W ustawieniach wiersza wymuszony został tryb pełnej szerokości, a rozstaw kolumn przy użyciu niestandardowych szerokości rynny został ustawiony na 1. W zaawansowanych ustawieniach Modułu „Tytuł posta” lewy margines ustawiony został na 220px. Nad tytułem posta umieszczony został separator o wartości 120. W zakładce Niestandardowy CSS w polu Element główny wstawiony został poniższy kod CSS:

white-space: nowrap;
width: 200px;
border: 1px solid #000000
overflow: hidden;
text-overflow: ellipsis;

Nakładanie – czyli jak umieścić na sobie dwa Moduły w szablonie DIVI

utworzone przez | Paź 13, 2016 | CSS/HTML, ElegantLab | 0 komentarzy

TEKST I OBRAZ

Po prawej stronie nałożone zostały na siebie dwa moduły: Tekst i Obraz. W ustawieniach Sekcji Specjalnej wymuszony został tryb pełnej szerokości. W ustawieniach Modułu „Tekst” orientacja tekstu została ustawiona do prawej, czcionkę zmienione na Special Elite, rozmiar 18. W zakładce Niestandardowy CSS w polu Element główny wstawiony został poniższy kod CSS:

position:relative;
left: 320px;
width:170%;
top:50px;
text-align:center;
z-index:1;

Należy pamiętać, że wartości ze wskazanego kodu width, left/right, top i inne ulegną zmianie przy wyborze innych szerokości modułów w wierszu. Jednak wpisanie odpowiednich wartości doprowadzi do żądanego efektu.

Dięki The Divi Builder możesz stworzyć niepowtarzalny wygląd swojej strony – to proste!

OBRAZY JAKO WARSTWY

Po lewej stronie nałożone zostały na siebie 3 moduły: „Obraz”. Aby obraz nakładały się na siebie w każdym z Ustawień modułu „Obraz” w zakładce Niestandardowy CSS w polu Element główny wstawiony został poniższy kod CSS:

OBRAZ 2
position: absolute;
left: 80px;
top: 80px;
z-index: 2;

OBRAZ 1:
position: absolute;
z-index: 1;

OBRAZ 3:
position: absolute;
left: 150px;
top: 150px;
z-index: 3;

Należy pamietać, że wartości wskazanego kodu ulegną zmianie w zależności od wielkości obrazu (w naszym wpisie wykorzystano następujące: obraz 1 – 500x333, obraz 2 – 500x326, obraz 3 – 500x288) oraz od strony w jaką mają układać się warstwy lewa/prawa.

OBRAZ – TEKST – OBRAZ

Po prawej stronie nałożone zostały na siebie 3 moduły: Obraz, Tekst i Obraz. W ustawieniach Wiersza wymuszony został jedynie tryb pełnej szerokości. W zakładce Niestandardowy CSS w polu Element główny wstawiony został poniższy kod CSS:

position: relative;
right: 180px;
width:200%;
top:50px;
text-align:center;
z-index: 3;