Trick to Copy the Design of ANY Page in less than 1 MINUTE

by

Hello guys,

In this tutorial we will see how we can copy the design of any element of any internet page.

It is very simple and can get us out of more than one hurry.

Video Tutorial

Subscribe to my channel:  

Let's imagine that we want to copy the layout of the blue box on this page:

screenshot with blue box

In order to copy the styles of that box we have to enter chrome, put the mouse over that box and click the right button –> Inspect so that the element inspector opens with the selected box:

element inspector with box selected

Now we click on the selected code, right button, copy, copy styles:

copy styles from element inspector

Now we have pasted all the styles from the box to the clipboard.

How to use the Copied Styles?

There are many ways to use these styles, but let's assume that you want to use them within WordPress.

To do this, we have to create a box in html to be able to apply the 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>

And now we go to Appearance –> Additional CSS and paste the styles inside the box class:

.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;
}

And if everything went well, the result is as follows:

Lorem Ipsum is simply dummy text of printing presses and text files. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a textbook specimen. Not only did it survive 500 years, but it also entered as filler text in electronic documents, remaining essentially the same as the original. It was popularized in the 60s with the creation of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software such as Aldus PageMaker, which includes versions of Lorem Ipsum.

I hope you liked the trick, if you want more tricks like this and free plugins and templates go PREMIUM

Leave a comment