Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 8, 2022 at 11:21 am #1343591
    Jak73

    Hi,

    i would like to add a background image in socket with background overlay only on selected pages.

    I would like to add this effect on every socket on my webpage (only not on the start page).

    Please see the effect, that i would like to have in the private content area.

    How can i do that?

    kind regards

    Jak

    March 8, 2022 at 4:33 pm #1343672
    Yigit

    Hey Jak,

    Thanks for contacting us!

    Would you like to use the background I attached in private content field? If so, please create a new page with the content you would like to display as your footer and then set it as your footer in Enfold theme options > Footer tab.

    If that is not what you meant, please elaborate :)

    Best regards,
    Yigit

    March 8, 2022 at 4:44 pm #1343683
    Jak73

    Hi Yigit,
    in the testsite above i have a color area with background image 1.

    then i’m using an overlay image with image 2 (animated gif) in the settings of color area with an ocopacity of 0,1 and background color #ff00d8.

    Same effect i would like to use in all my sockets, but not in the startpage socket.

    Please see screenshots.

    Kind regards Jak

    • This reply was modified 2 years, 7 months ago by Jak73.
    March 8, 2022 at 5:16 pm #1343693
    Yigit

    Hey,

    Would you be able to create a new animated gif with your background image? There is no overlay in socket section so it would not be possible to set animated gif opacity to 0.1 and that makes socket text not readable.

    Regards,
    Yigit

    March 8, 2022 at 5:17 pm #1343694
    Jak73

    Yes, this is a great idea! I will try that.

    March 8, 2022 at 5:28 pm #1343700
    Yigit

    Hey,

    Great! Then you can set it as your socket background image in Enfold theme options > General Styling > Socket and add following code to Quick CSS to remove background image from home socket 

    .home .socket_color {
  background-image: none;
}

    Regards,
    Yigit

    March 8, 2022 at 5:29 pm #1343701
    Jak73

    Hi Yigit,

    I’ll try that. So much thanks for your great help!!!!

    kind regards
    Jak

    March 8, 2022 at 5:33 pm #1343704
    Yigit

    Hey,

    You are welcome :)

    Let us know if you have any other questions and enjoy the rest of your day!

    Best regards,
    Yigit

    March 9, 2022 at 10:11 pm #1343913
    Jak73

    Hi Yigit,
    which size (width and height) for the background image for the socket do you recommend.

    How can i set it up for responsive view too?

    How can i manage this?

    kind regards Jak

    March 10, 2022 at 2:34 pm #1344003
    Yigit

    Hi Jak,

    1920x100px should be fine for all screen sizes as socket height does not exceed 100px on mobile. Image would resize automatically however if you do not like how it looks on mobile, you could create rectangle version of the image and can replace it on mobile using custom CSS. Please feel free to reply to this thread if you need assistance with that :)

    Best regards,
    Yigit

    March 10, 2022 at 2:38 pm #1344004
    Jak73

    Hi Yigit,

    you gave this code, to remove the socket image from the start-page:

    .home .socket_color {
  background-image: none;
}

    1.) Which code do ein need for the image itself?

    and which for

    2.) responsive mobile view for vertical view

    and

    3.) respoisive horizontal view, when i would like to use individual image sizes, please?

    kind regards Jak

    March 10, 2022 at 2:46 pm #1344006
    Yigit

    Hi Jak,

    1- You can upload your image in Enfold theme options > General Styling > Socket > Background Image. You do not need custom CSS code for that.

    2- Please use following custom CSS codes

    
@media only screen and (max-width: 480px) { 
.socket_color {
  background-image: url(link-to-your-image);
}}

    3-

    
@media only screen and (max-width: 767px) {
.socket_color {
  background-image: url(link-to-your-image);
}}

    Best regards,
    Yigit

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