Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #24988


    I hope someone can help. I have 2 questions, being new to this theme.

    1) How do I change the background colour of an individual text block?

    2) I have an image inserted in another location which I would like to be able to change on hover to be the same image but faded with text over.




    1.) Can you give us a link to your website? Did you place the text block inside a column? You can use this code, to change the background color.

    .flex_column > .avia_textblock {
    background: red;

    First Text Block

    .flex_column:first-child > .avia_textblock {
    background: green;

    Second Text Block

    .flex_column:nth-child(2) > .avia_textblock {
    background: blue;

    Third Text Block

    .flex_column:nth-child(3) > .avia_textblock {
    background: pink;

    2.) This is a simple image hover effect. (Purchase code hidden if logged out)





    Thanks for the advice, the code worked for the text block, but I guess what I probably needed instead was the background color for the column instead of the text block. How would I do that? I have a background image in the main content and would like to produce blocks of text but only on the front page. I realise that the color section would do this, but it can’t be a anything other than full width can it?




    Hello again,

    The tutorial on the hover is useful and kind of what I expected, however (and sorry if this is a really obvious answer but I am new to customising in wordpress) where can I access the html code for the home page? I know I can edit the css via style.css, but the html doesn’t show because of the Avia layout builder (which is awesome), and if I click on default editor there is nothing there??

    Thanks again for your help,




    You can switch the Advance Layout Editor to debug mode. This way you will see the actual shortcode below the Avia Builder. Edit functions.php then find this code.

    if(isset($avia_config['use_child_theme_functions_only'])) return;

    Below add this code

    //set builder mode to debug
    add_action('avia_builder_mode', "builder_set_debug");
    function builder_set_debug()
    return "debug";

    Go to your Advance Layout Editor and scroll below to see the actual shortcode.



Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Background colour of text block and image change on hover’ is closed to new replies.