Digitala Elle

Vill du ge ditt innehåll ett modernt, dynamiskt uttryck? Idag visar jag hur du enkelt skapar överlappande textrutor med Media & Text-blocket i Gutenberg. Vill du ha olika stil på olika Media & Text-block? Då ska du kolla extra noga på punkt 5.

Steg-för-steg-guide

1. Välj Media & Text-blocket i Gutenberg
2. Ladda upp din bild
3. Skriv din text
4. Gå till ”Avancerade inställningar”
5. Lägg till en unik CSS-klass, exempelvis custom-overlap-1, custom-overlap-2

CSS-koden som trollar fram överlappningen

css.custom-overlap-1.has-media-on-the-right .wp-block-media-text__content {
    margin-right: -150px;
}

.custom-overlap-1:not(.has-media-on-the-right) .wp-block-media-text__content {
    margin-left: -150px;
}

.custom-overlap-2.has-media-on-the-right .wp-block-media-text__content {
    margin-right: -100px;
}

.custom-overlap-2:not(.has-media-on-the-right) .wp-block-media-text__content {
    margin-left: -100px;
}

@media (max-width: 640px) {
    .custom-overlap-1:not(.has-media-on-the-right) .wp-block-media-text__content,
    .custom-overlap-1.has-media-on-the-right .wp-block-media-text__content,
    .custom-overlap-2:not(.has-media-on-the-right) .wp-block-media-text__content,
    .custom-overlap-2.has-media-on-the-right .wp-block-media-text__content {
        margin: 0 !important;
    }
}

Placera koden i din WordPress Customizer eller temafil.
Resultatet? En snygg, modern layout som sticker ut från mängden!