Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 19, 2022 at 7:08 pm #1376766
    Nic_007

    Hi,

    Is there a way to put a small image next to a headline?
    I would like to add the flag of the country next to the wine region in the headline.
    I discovered “icon circles” which I found quite interesting, but they are too big. Can this be resized or is there another way to add a small flag as a symbol or icon or small image next to the text in the headline? Or can you upload your own images as symbols?

    Many thanks in advance for information.

    December 20, 2022 at 3:47 am #1376814
    Ismael

    Hey Nic_007,

    Thank you for the inquiry.

    You can manually add an image to a text or input field using html, specifically the img tag. Please check the documentation below for more info.

    // https://www.w3schools.com/tags/tag_img.asp

    Would you mind providing a screenshot of the layout that you would like to implement? You can use imgur, savvyify or dropbox for the screenshot. Thanks.

    Best regards,
    Ismael

    December 20, 2022 at 1:34 pm #1376877
    Nic_007

    Hi,

    thanks. I sent you in my last message the link and the name of the headline in the private data because it is very time-consuming to create screenshots, upload them, create the link (unfortunately didn’t work the last time).
    Where do I have to insert the html tag? (In the headline area there is no html field like in the text areas.)

    An example:
    Wherever it says “Italy” at the bottom of the page, an Italian flag should be installed next to the headline. A photo is already included in the media library. It’s called italien.png

    I don’t know what height the headline corresponds to, i.e. what height I have to enter in the html tag.
    Maybe like this?

    Italien
    The same with “Frankreich” and later also with “Deutschland” (will be added at all of the German wines …)

    Best regards,
    Nic

    December 23, 2022 at 2:52 am #1377185
    Nic_007

    I am still waiting for an answer. Can’t you help?

    December 23, 2022 at 4:27 pm #1377245
    Yigit

    Hi,

    I added your image using HTML in Special Heading element as following 

    
<img class="heading-img" src="https://your-domain.com/wp-content/uploads/2022/12/italien.png">

    Then added following code to bottom of Quick CSS field to adjust the size of the image

    
/* Flag image size in Special Heading element */
.heading-img {
  max-width: 20px;
}

    Please review your website :)

    Regards,
    Yigit

    December 23, 2022 at 7:46 pm #1377267
    Nic_007

    Thanks a lot, Yigit! It looks good but now there is a warning in the backend because of the html!

    Warning: Characters <,>,[,] might break ALB backend or frontend. Read more if you want to use them. You can use valid HTML markup.

    December 24, 2022 at 2:25 pm #1377289
    Yigit

    Hi,

    You can ignore the warning. As you can see in the result, it does not break neither back nor front end :)

    Merry Christmas and Happy New Year! 🎅 🎆

    Best regards,
    Yigit

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