Astuce pour copier le design de n'importe quelle page en moins d'une minute

par

Salut les gars,

Dans ce didacticiel, nous verrons comment copier le design de n'importe quel élément de n'importe quelle page Internet.

C'est très simple et peut nous sortir de plus d'une hâte.

Didacticiel vidéo

S'abonner à mon canal :  

Imaginons que nous voulions copier la mise en page de la boîte bleue sur cette page :

capture d'écran avec boîte bleue

Pour copier les styles de cette boîte, nous devons entrer chrome, placer la souris sur cette boîte et cliquer sur le bouton droit -> Inspecter pour que l'inspecteur d'éléments s'ouvre avec la boîte sélectionnée :

inspecteur d'éléments avec la case sélectionnée

Maintenant, nous cliquons sur le code sélectionné, bouton droit, copier, copier les styles :

copier les styles de l'inspecteur d'éléments

Nous avons maintenant collé tous les styles de la boîte dans le presse-papiers.

Comment utiliser les styles copiés ?

Il existe de nombreuses façons d'utiliser ces styles, mais supposons que vous souhaitiez les utiliser dans WordPress.

Pour cela, il faut créer une boite en html pour pouvoir appliquer les styles :

<div class="caja">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</div>

Et maintenant, nous allons dans Apparence -> CSS supplémentaire et collons les styles à l'intérieur de la classe box :

.caja{
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    --antd-wave-shadow-color: #1890ff;
    --scroll-bar: 0;
    --main-border: #edf5fd;
    --secondery-border: #e2e2e2;
    --primary-color: #07f;
    --danger-color: #f44336;
    --light-danger-color: #ffecec;
    --active-text-color: #fff;
    --header-color: #535461;
    --block-color: #5a6982;
    --outline-imput-bg: #f2f2f2;
    --title-color: #354052;
    font-feature-settings: "tnum";
    border: 0;
    font: inherit;
    vertical-align: baseline;
    margin: 30px 0;
    padding: 20px;
    background-image: linear-gradient(to right,#478bef,#44acf1);
    box-shadow: 0 12px 20px #439bf33d;
    border-radius: 22px;
    color: #fff;
    min-height: 245.5px;
    text-align: center;
    flex-flow: row wrap;
    box-sizing: border-box;
    display: flex;
    place-content: center space-around;
    align-items: center;
}

Et si tout s'est bien passé, le résultat est le suivant :

Lorem Ipsum est simplement un texte factice provenant de presses à imprimer et de fichiers texte. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, lorsqu'un imprimeur inconnu a pris une galère de caractères et l'a brouillée pour en faire un spécimen de manuel. Non seulement il a survécu 500 ans, mais il est également entré comme texte de remplissage dans les documents électroniques, restant essentiellement le même que l'original. Il a été popularisé dans les années 60 avec la création de feuilles Letraset contenant des passages du Lorem Ipsum, et plus récemment avec des logiciels de publication assistée par ordinateur tels qu'Aldus PageMaker, qui inclut des versions du Lorem Ipsum.

J'espère que l'astuce vous a plu, si vous voulez plus d'astuces comme celle-ci et des plugins et modèles gratuits, passez au PREMIUM

Laisser un commentaire