Three Areas of Need for the Home Page

Hola Support Superheroes and Sajid !

I talked to Sajid during his Themes and Design session and he suggested many, many good and helpful tips.

I would love your aid on several areas:

I'm trying to replicate this website here (which an acquaintance of mine did, using WordPress): Acquaintance's Website, except I'm making the bottom part a white overlay of a food or brand-related image (or do you think the green footer design on Seventh Generation looks better?) so that I can put the three menus you see in the sample above, just before the footer. How do I do what he did just before his final (all-black, All Rights Reserved) footer? Is it really possible to add a Google maps and all those cute, fancy icons to which, I can put in the address, phone number and e-mail details?

Secondly: how do I change the look and appearance of my buttons as well as their properties? It's all tied to the grid, so even though some support staff have said I can resize the button to my intended width - I believe some CSS is still needed since every time I adjust the button's width, the text above it's width, get readjusted to its width as well, as they are all interdependent on one another??

Lastly, is there any way to get the Slider Revolution plugin to fit into the (white) space just below the main navigation bar, so it doesn't look unprofessional? I want it to be right under the main navigation menu so it doesn't have an unsightly white space...

Thank you so very much. I appreciate all that you guys do in this awesome community!

Take care sincerely,
Caleb

  • Luís
    • Support

    Hi caleb.mkdaman ,

    Hope you're doing well today!

    Regarding to your questions:

    1) Upfront have all the elements required to create a footer widgets similar to the website you mentioned. It have a google maps, a lot of font icons, etc. I made a simple video with a basic example in how to do replicate it, that I think it may interest you:

    https://www.screencast.com/t/pG3D0iWy

    2) Upfront always tries to adjust the elements width to the grid, but you are free to change it. Some properties can be defined in the preset settings, the background color, border, text size, but some of them needs to be done via CSS. Please check this video:

    https://www.screencast.com/t/08wCoGtuA

    Can you give me more details about the style you want to add to the buttons, so I can share some examples?

    3) Yes, it's possible, but we will need to make some tricks using CSS to move the element to under the menu. If you already created both elements (menu and slider) can you give me access to your admin panel, so I can share an example with you?

    If you don't already know, please, follow the link below, to see how enable the staff login:

    http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    When you enable this option, please post again!

    Also, we have a a lot of cool articles about Upfront in our Documentation section, that I think may interest you:

    https://premium.wpmudev.org/docs/upfront-and-themes/

    Cheers, Luís

  • caleb.mkdaman
    • Site Builder, Child of Zeus

    Luís Thank you in advance for your assistance!!

    I have granted Support Access to Staff Login but though your screencasts were clear and helpful, but the second one didn't exactly solve my problem. I think you will understand when you access my site admin - because the stupid button keeps sticking to the text above it. And I don't know enough CSS to change/fix that issue.

    In regards to the button styles, I managed to remove the rounded borders as you demonstrated but that is not my chief concern. I want it to look like the buttons specified in this mockup:

    Website Mock-up

    That means buttons of smaller size and a different text other than 'Click Here' such as, Explore Personal Care (with an arrow icon by the left of the text) and it should be there (but I forgot) - Explore Household (also with an arrow-like icon by its left).

    However, for the slider, I would LOVE it if you could place it directly under the main nav menu so there's no unsightly white space in between!

    Last but not least, do you know I can replicate the (entire) footer structure of the website I showed you as an example of what I wanted to do --> Acquaintance's Website, perhaps using CSS or otherwise?

    I have already made it more original by putting a white overlay over the subject matter - natural fruits and vegetables, instead of a dark overlay, as already evident in the slider's images with white text, as I intend to replace the dark gray text you will see in the next screenshot with black text, so it stands out more and doesn't look so dark and dated. But how do I do this area --> The entire parallax background and everything inside the footer including the All Rights Reserved directly at the black footer underneath the parallax background back-shadowing the three columns - Contact Us, Get in Touch, and Newsletter?

    Except I want it the reverse, instead of a final black All Rights Reserved footer, I will make it white - the other way around in relation to the colours my acquaintance chose for originality's sake.

    Sorry for the delayed response, was busy attending to other matters.

    Thank you for your aid. :clap:

    Sincerely,
    Caleb

  • Luís
    • Support

    Hi caleb.mkdaman ,

    Hope you're doing well today!

    Regarding to your questions:

    1)

    I think you will understand when you access my site admin - because the stupid button keeps sticking to the text above it. And I don't know enough CSS to change/fix that issue.

    I checked that you already opened another topic specifically related to this question (an it was handled by me):

    https://premium.wpmudev.org/forums/topic/snapping-to-the-grid-or-alignment

    Please, let me know if the suggestion solved your issue and if you have doubts, please reply in the that topic, just to avoid spread and lose information.

    2)

    That means buttons of smaller size and a different text other than 'Click Here' such as, Explore Personal Care (with an arrow icon by the left of the text) and it should be there (but I forgot) - Explore Household (also with an arrow-like icon by its left).

    From what I checked, the buttons styles are very similar to the mockup, perhaps just missed the border, that you can add in the preset settings:

    Please, let me know if I am missing something and if you need help in adding some style.

    3)

    However, for the slider, I would LOVE it if you could place it directly under the main nav menu so there's no unsightly white space in between!

    Regarding to the slider, I made a simple video showing you how to move the "region" to under the main nav:

    https://www.screencast.com/t/WNt47BMRCl

    In the example, I used this CSS, but you can change the value to position you want:

    #region-container-main {
        margin-top: -35px;
    }

    4)

    Last but not least, do you know I can replicate the (entire) footer structure of the website I showed you as an example of what I wanted to do --> Acquaintance's Website, perhaps using CSS or otherwise?

    I already shared a video with you showing how to replicate a similar footer structure:

    https://www.screencast.com/t/pG3D0iWy

    However, it may not look exactly, but you can try a similar style using CSS or just creating new presets and changing the typography, colors, etc.

    Except I want it the reverse, instead of a final black All Rights Reserved footer, I will make it white - the other way around in relation to the colours my acquaintance chose for originality's sake.

    From what I tested, you will need to create two different regions, one to the footer widgets (with a parallax background) and other region to the footer itself, where you need to use a background with a solid color (white):

    Please let me know where you are having doubts/difficulties and I will help you in replicating the a similar structure.

    Cheers, Luís

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.