Add Blog Posts to 'Blog' Panel

  • Unknown's avatar

    Hello! I cannot seem to mimick the main theme’s original look.

    I want to add testimonials with pictures in the ‘testimonial’ panel.

    I want to add three excerpts of blog posts in the ‘blog’ panel.

    I cannot do it!!!!

    Help me!!!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Hi @bernardlcg,
    Here’s what you can do…
    1. Create a static front page(other than the blog page) and Go to My Sites > Customize(Beside the Themes Option) or Just click here: https://wordpress.com/customize/
    2. This will open the customizer, where you can add/remove and customize elements to make that page look like the theme preview.
    Read the description of the theme: https://wordpress.com/theme/pique, as it has all the information you need to make your static-page look like the preview.

    Let me know if it helps :)

  • Unknown's avatar

    Thanks let me try now!

  • Unknown's avatar

    Follow the instructions given here to create a static home page(as i mentioned in step 1):

    Set the Homepage

  • Unknown's avatar

    But I cannot mimick the exact look of Pique Cafe….My blog posts that I have posted are going nowhere. I have a panel named ‘Blog’ but when I posted, nothing showed!

  • Unknown's avatar

    For adding three excerpts of blog posts in the ‘blog’ panel.:
    Open the theme customizer by following the steps above. Then click on Theme Options >(at the very bottom of the customizer sidebar).
    Then Click on Panel 6 >. And then, from the Panel Content drop down menu select blog.

  • Unknown's avatar

    You can find and customize all the panels in the Theme Options > Menu.

  • Unknown's avatar

    Ok. How do I link the ‘News and Blog’ button on the header to the actual blog posts? The two you may have seen?

    How do I list the two blog posts in the page you go to when you click on ‘News and Blog’ in the top header menu?

  • Unknown's avatar

    How do I link the ‘News and Blog’ button on the header to the actual blog posts?
    Click on the Small EDIT PAGE link at the bottom left corner of header panel. This will take you to the post editor screen where you can link that button.

    How do I list the two blog posts in the page you go to when you click on ‘News and Blog’ in the top header menu?
    For that you have to assign the two blog post to a specific category and then copy the link to that category and Add a Custom menu which links to that category.

    Instructions on creating category pages can be found here:
    https://en.support.wordpress.com/category-pages/

  • Unknown's avatar

    Hi, otpidusprime! Thanks so much for your help.

    I also want to know how the content in my panels on the static page (home page) can sync with the pages you go to when you click on the header menu.

    EG. when I click on ‘happy customers’ on the header menu, I go to the testimonials page.

  • Unknown's avatar

    Follow the instructions to add testimonials:
    https://en.support.wordpress.com/testimonials/

    And then link the Happy Customers menu to: https://n26bank.wordpress.com/testimonial/

    And i can see that all the other menu’s are already linked to their respective pages. Just edit that page by going to: https://wordpress.com/pages

    Let me know if you need help with something more :)

  • Unknown's avatar

    Thanks!

    How do I make the testimonial seem like the Pique Cafe’s? The line graphic and the apostrophe marks and the featured pic?

  • Unknown's avatar

    ANother thing….my home page background picture is shown different on a PC versus a mobile phone. How can I change to another part of the picture where the screen can focus in a mobile phone?

  • Unknown's avatar

    Read the description on your theme page: https://wordpress.com/theme/pique

    It gives you proper details on how to get that testimonial panel with apostrophe marks and the featured pic.

    ANother thing….my home page background picture is shown different on a PC versus a mobile phone. How can I change to another part of the picture where the screen can focus in a mobile phone?

    I did not understand this question, can please re-phrase it?

    Thanks!

  • Unknown's avatar

    Okay I would like you to do two things. First, go to my website on a PC. Then next go to my website on a mobile phone smartphone. On the PC it looks exactly like what I want. But on mobile, for example the face of the basketball player is not in the screen. It looks stupid :( How can I optimize the pictures in the background for mobile?

  • Unknown's avatar

    Okay I would like you to do two things. First, go to my website on a PC. Then next go to my website on a mobile phone smartphone. On the PC it looks exactly like what I want. But on mobile, for example the face of the basketball player is not in the screen. It looks stupid :( How can I optimize the pictures in the background for mobile?

  • Unknown's avatar

    Also, the header that appears on my homepage looks horrendous. It only shows two options at first. Then you have to click on the “three dots” to make the others appear. How can I make the menu look more professonal?

  • Unknown's avatar

    Okay I would like you to do two things. First, go to my website on a PC. Then next go to my website on a mobile phone smartphone. On the PC it looks exactly like what I want. But on mobile, for example the face of the basketball player is not in the screen. It looks stupid :( How can I optimize the pictures in the background for mobile?

    This is happening because the background image is coded in such a way that it always focuses on center when the width/resolution is changed and the baseball player is positioned on the left.
    So to fix this you will need to work with some CSS customization’s and you will need a Premium or a Business Plan to be able to work with CSS on your site.

    Read more about it here:
    https://wordpress.com/pricing/
    https://en.support.wordpress.com/custom-design/
    https://en.support.wordpress.com/custom-design/editing-css/

    If you are already on one of the paid plans mentioned above, then here’s the CSS code you will need:

    .pique-panel-background {
        background-position: 70% 50%;
    }

    This will pull the background image to the right so that the focus is always on the baseball player, no matter what the width/resolution is.

    Also, the header that appears on my homepage looks horrendous. It only shows two options at first. Then you have to click on the “three dots” to make the others appear. How can I make the menu look more professional?

    There’s this design principle called “responsive design” that your theme is following to make your theme look great on devices. The three dot’s in your case replaces the rest of the menu so that they do not overflow out of the screen on smaller devices. If you want to change the way it works you have to create a secondary mobile menu using CSS and make this secondary menu visible only on mobile devices using media queries which falls under the umbrella of “responsive design” and also some JavaScript. And since, WordPress.com does not allow us to add scripts on our sites for security reasons, read about it here: https://en.support.wordpress.com/code/#javascript, it is not possible to customize that.

    So my suggestion would be to change the theme if you do not like how it looks on mobile.

  • Unknown's avatar

    CORRECTION:
    great on all devices*

  • Unknown's avatar

    Hi, got it.

    I went to the mobile version of my site. I discovered that the word font sizes are really big. How can I shrink them? Do i have to upgrade?

  • The topic ‘Add Blog Posts to 'Blog' Panel’ is closed to new replies.