[Resolved] New section with elements

Home Forums Support New section with elements

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #876766
    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
    #876945
    David
    Staff
    Customer Support

    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.

    #877675
    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!

    #877681
    David
    Staff
    Customer Support

    Can you link me to the test page?

    #877683
    Pedro

    Sure! The teste page is:

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

    #877724
    David
    Staff
    Customer Support

    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.

    #877747
    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>
    #877769
    David
    Staff
    Customer Support

    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.

    #877784
    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.

    #877803
    David
    Staff
    Customer Support

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

    #877816
    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>
    #877822
    David
    Staff
    Customer Support

    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.

    #877825
    Pedro

    Hello david!

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

    #877833
    David
    Staff
    Customer Support

    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

    #878291
    Pedro

    Hello David!

    It worked perfect! Many thanks

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.