[Resolved] New section with elements

[Pedro]

Hello! I would like to add a new section to my site.

A reference example can be this: https://mega.nz/#!Hl8BiKAY!flkiK0_1uTxZ7Y9_CbtfQu2UpflLCykB_3kxfgpFDNs

The idea is to place items of trust such as free shipping, returns, guarantee, etc.

The issue is that I do not know how to place the icons and texts as in the image and have several columns.

Can you help me, please?

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

so you would need some HTML – this should get you started:

<div class="flex-row grid-container">
    <div class="flex-col">
        <img class="col-icon" src="image-url" width="30" height="30" />
        <span class="col-title">My Title</span>
        <span class="col-text">Some Text below</span>
    </div>
    <div class="flex-col">
        <img class="col-icon" src="image-url" width="30" height="30" />
        <span class="col-title">My Title</span>
        <span class="col-text">Some Text below</span>
    </div>
    <div class="flex-col">
        <img class="col-icon" src="image-url" width="30" height="30" />
        <span class="col-title">My Title</span>
        <span class="col-text">Some Text below</span>
    </div>
    <div class="flex-col">
        <img class="col-icon" src="image-url" width="30" height="30" />
        <span class="col-title">My Title</span>
        <span class="col-text">Some Text below</span>
    </div>
</div>

And some CSS like this:

.flex-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.flex-col {
    padding-left: 40px;
    padding-bottom: 20px;
    position: relative;
    flex: 1 0 25%;
    box-sizing: border-box
}

.col-icon {
    position: absolute;
    left: 0;
    top: 0;
}
/* Title Styles */
.col-title {
    display: block;
    color: 444444;
    font-weight: 700;
}
/*Text Styles */
.col-text {
    color: #cccccc;
}

@media (max-width:768px) and (min-width:420px) {
    .flex-col {
        flex: 1 0 50%
    }
}

@media (max-width:419px) {
    .flex-col {
        flex: 1 0 100%
    }
}

The Title and Text have their own classes for you to style them.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hello David!! Thanks for answering.

I have created the new element with the HTML that you gave me, I have placed the CSS and nevertheless it is not displayed correctly.

You can see screenshots in the mobile version and desktop here:
https://mega.nz/#!Ds0UHK4C!YRdMxGVVjLd7wfqA-lnn7V6K-36c5Kt2ErYu7v1q_WE
https://mega.nz/#!qxkAXAZB!BP8wLZXfZkm3R8czyD2pYnuB4siO8Ih6YuucDCtxfZ0

What happens is:
– It does not show the icon that I have placed (Use font awesome), the icon code is:
<i class="fas fa-truck"></i>

– The title and description are shown in the same line

– The color of the title and the text are the same, I would like to be able to change the colors.

Thank you!

[David]

Can you link me to the test page?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Sure! The teste page is:

https://www.celuganga.co/beta/

[David]

I edited the CSS above, this should fix the alignment and you now have two rules for changing the title and text styles.

You don’t have Font Awesome Icons installed on the Site ( GP doesn’t use them ). And even if you did that is not the correct way to use them. This HTML is set up to use images:

<img src="image-url" width="30" height="30" />

You just need to upload your Icons as PNG/JPEG to the Media library and then copy its URL add add it in place of image-url.

If you want to use FA Icons instead you will need to install a plugin – but i personally advise against loading a library of 100’s icons when you only need a few.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hello David!

It worked perfectly.

With respect to the icons yes, I have the official Font Awesome plugin, I have already placed the html code and it is displayed.

I have the plugin installed because the icons use them for other things too, sometimes I need to change the color.

The point is that now the icon is not shown aligned as the images do.

The code I used was:

    <div class="flex-col">
        <i class="fas fa-truck"></i>
        <span class="col-title">Envíos gratis</span>
        <span class="col-text">En todas tus compras</span>
    </div>

[David]

You need to add the col-icon class to <i class="fas fa-truck"></i> ie.

<i class="fas fa-truck col-icon"></i>

Also check your markup you have several spaces after that line of HTML which need removing.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hello david! I have changed the code as you indicated me but the icon is not aligned correctly.

With respect to the spaces that you say, I can not understand.

[David]

Edit your HTML and make sure there are no empty spaces before or after any lines of HTML.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hi David!

The code is the same that you gave me:

<div class="flex-row grid-container">
    <div class="flex-col">
        <i class="fas fa-truck col-icon"></i>
        <span class="col-title">Envío gratis</span>
        <span class="col-text">En todas tus compras</span>
    </div>
    <div class="flex-col">
        <i class="fas fa-sync-alt col-icon"></i>
        <span class="col-title">Devoluciones fáciles</span>
        <span class="col-text">Sin preguntas, protección al comprador de 30 das</span>
    </div>
    <div class="flex-col">
        <i class="fal fa-sync-alt col-icon"></i>
        <span class="col-title">Garantia de satisfacción</span>
        <span class="col-text">Some Text below</span>
    </div>
    <div class="flex-col">
        <i class="fas fa-lock col-icon"></i>
        <span class="col-title">Pago 100% seguro</span>
        <span class="col-text">Some Text below</span>
    </div>
</div>

[David]

Yes, but somewhere between copying and pasting and editing the HTML some empty spaces have been added to the code. These are being output to the page. Place the cursor at the end of:

<i class="fas fa-truck col-icon"></i>

If you can cursor right then those spaces need removing.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hello david!

When I move the cursor to the right, it goes to the bottom line, there are no spaces to the right.

[David]

Right so the spaces are gone.
If you need to move the icon up or down then adjust the top: 0; property in this part of the CSS:

.col-icon {
    position: absolute;
    left: 0;
    top: 0;
}

e.g top: 10px; will move it down 10px. whereas top: -10px; will move it up

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hello David!

It worked perfect! Many thanks

[Author]

Posts