Model Sela theme after Demo more

  • Author
    Posts
  • #2345707

    ayoitsjess
    Member

    I am using the Sela thems as .com. I have been struggling with this template for like a month now, I’m ready to give up. I feel like I am missing something soooo simple, yet for the life of me can’t figure it out! I am trying to model my “About” page after the DEMO that was given for the theme itself with the 3 photos with cooresponding headings above each, that falls directly under the feature image. For EACH of these ….I’ll call them menus for lack of knowing what else to call them, I want each of them to only show a single image on the “About” page and when clicked to go to some sort of photo gallery page. Like I said….probably something super simple…my brain is just fried! I have followed so many different “solutions” that other people are posting and still nothing.

    The blog I need help with is ayoitsjess.wordpress.com.

    #2345841

    doncharisma
    Member

    Hey there,

    You’re challenge intrigued me so I setup the theme on my test site. It is “fiddly”, not because I think the theme developers wanted to make it hard to use, but for maximum flexibility.

    I put a screenshot to show you what I came up with here – http://doncharisma.com/web-designs/wordpress-sela-theme/

    I read the theme’s documentation the same as you, but was stumped about how to get the three featured pages underneath the About page. Turns out it’s a little fiddly I’m afraid. What I did is create three text widgets in “Customizer”, in the “First Front Page Widget Area”, “Second Front Page Widget Area” and “Third Front Page Widget Area”. The widgets have the same title as the pages they link to, and the html in the text widget goes like this :

    <a href="http://youwebsite.wordpress.com/page-slug"><img src="http://youwebsite.wordpress.com/2015/04/image-name.jpg" /></a>
    <p>The fuel of motivated people, keeps the cogs turning ! <a href="http://youwebsite.wordpress.com/page-slug">Read more &rarr;</a><p>

    Which could be shortened to :

    <a href="/page-slug"><img src="/2015/04/image-name.jpg" /></a>
    <p>The fuel of motivated people, keeps the cogs turning ! <a href="/page-slug">Read more &rarr;</a><p>

    What the html does is :
    1. show the image and link it to the page.
    2. adds the text underneath the image.
    3. adds a read more link which links to the page.

    NB 1 – “page-slug” is what you see in the browser bar, so if you had a page called “about me”, the page slug is usually yourwebsite.wordpress.com/about-me … it’s also shown on the editor screen underneath the title.

    NB 2 – “image-name.jpg” is similar, and can be found by locating the image’s url in your media library.

    I’d love to say there’s an easier way to do it, but there isn’t.

    I did also find one bug which I’ll report – It seems that one can’t turn off likes on testimonials on the front page, the theme ignores the setting … personally I think likes make it look cluttered, and it should obey the setting.

    Hope this helps

    Cheers

    Don Charisma

    #2345842

    doncharisma
    Member

    You’re=your … can’t edit my own comments here !

    #2345844

    doncharisma
    Member

    PS for “image-name.jpg” don’t forget to change the preceding “/2015/04/” to what’s correct for you site. My images were uploaded April-2015, yours quite possibly might have been uploaded at a different time ! (or not)

    Cheers

    Don Charisma

    #2345846

    doncharisma
    Member

    PPS in the html code I posted above you’ll need to replace the –> with & r a r r ; (without the spaces) – it’s the html code for right arrow.

    I’ve included on the page I setup for you what the widget box looks like – http://doncharisma.com/web-designs/wordpress-sela-theme/

    Cheers

    Don Charisma

    #2345895

    ayoitsjess
    Member

    Thank you Don! I’m going to go through your explanation step by step and hope that I can figure this thing out. I’ll let you know if I run into any issues.

    #2345896

    doncharisma
    Member

    You’re very welcome. I’m subscribed to this thread, so you can contact me here, if you run into any difficulties. Please be as specific as possible !

    NB Please don’t be put off by the html, it is a little fiddly, but the results are worth persevering for :)

    Cheers

    Don Charisma

    #2345901

    ayoitsjess
    Member

    ok so….I think I’m finally getting the bones set (Thank you, thank you, thank you!!).

    Now my question is….for the two text widgets that I have “Corporate” and “Personal”, how would you suggest adding a carousel gallery in there, so that I can display a sample of my work in each so that they show in the corresponding pages when clicked? I’m not planning on adding any text in these two places, only images. I will save any text for the “blog” section i think. Any insight would be wonderful. Thank you.

    #2345902

    grinnpidgeon
    Member

    I just put three image widgets in each of the Front Page widget areas that have the title I want and that link to the three pages. took me forever to figure that out. You just put in a link to the image in your media library and then a URL to the page on your site.

    https://mostlysewingprojects.files.wordpress.com/2015/04/widget.png

    Here’s my site: https://mostlysewingprojects.wordpress.com/

    #2345906

    doncharisma
    Member

    @grinnpidgeon – thanks, yes image widget works too :)

    However, one can’t put text underneath the image with the image widget … So if image only is what’s required, image widget will work … If it’s an image plus text underneath (as the Demo of Sela theme shows), then it’s a text widget, as I explained above.

    Cheers

    Don Charisma

    #2345908

    ayoitsjess
    Member

    @doncharisma – any insight on the carousel gallery concept I referenced above?

    #2345909

    grinnpidgeon
    Member

    Absolutely. I really didn’t want text, so it worked for me.

    I also have tried out the grid page layout on another site where I wanted more of a blurb with the photo: https://pittmanportfolio.wordpress.com/englishcomposition/

    All in all, a lovely theme that many have used nicely.

    #2345911

    doncharisma
    Member

    @grinnpidgeon – that’s awesome, thanks for sharing. But the OP has already setup her front page as per the her original question and the current question is about a carousel gallery, do you know how to do that ?

    @ayoitsjess – looking at what’s possible, unless @grinnpidgeon knows how to do it, I’ll post some suggestions here shortly :)

    Cheers

    Don Charisma

    #2345915

    grinnpidgeon
    Member

    @ayoitsjess I think you want each of your pages to contain a kind of carousel like the one at the top of this blog, but I don’t see that as a built in option in Sela: https://grinnsworld.wordpress.com/

    I don’t know how you would feel about one of the typical WordPress galleries that open into a carousel, where initially your thumbnails are displayed until clicked, as on this page: https://en.support.wordpress.com/images/gallery/

    A gallery can be inserted on any page and in a variety of styles with or without text.

    That’s the best I can do. I don’t think you want the portfolio style, but maybe: https://en.support.wordpress.com/portfolios/

    Good luck, your site looks great already.

    #2345917

    doncharisma
    Member

    @ayoitsjess – I’m fairly sure from the widgets that are available on WordPress.com you can’t do a carousel “on page”. Usually it would be a gallery widget, and on pressing one of the images it pops up a carousel. I don’t think that will help, because I don’t think you can link those images to specific pages.

    So a couple of possibilities :

    1. Extend the text widget I showed you above to include more than one image and link, eg :

    <a href="/page-slug"><img src="/2015/04/image-name.jpg" /></a>
    <a href="/page-slug2"><img src="/2015/04/image-name2.jpg" /></a>
    <a href="/page-slug3"><img src="/2015/04/image-name3.jpg" /></a>
    <p>The fuel of motivated people, keeps the cogs turning !
    <a href="/page-slug">Read more →</a><p>

    or format it how you prefer !

    2. “First Front Page Widget Area” etc are containers that will carry more than one widget. So you could add additional photo, gallery or text widgets underneath. So stack the widgets.

    The help document for galleries is here – https://en.support.wordpress.com/images/gallery/

    Hope this helps

    Cheers

    Don Charisma

    #2345919

    doncharisma
    Member

    @ayoitsjess – PS again obviously don’t forget about the & r a r r ; as I said earlier :)

    Cheers

    Don Charisma

    #2345922

    ayoitsjess
    Member

    @grinnpidgeon + @doncharisma – you guys are wonderful, thank you so much for your patience with me. I’m going to give both of these options a whirl in a short bit and see what I can come up with :fingers crossed:

    I’ll report back if I can figure this out :)

    #2345924

    doncharisma
    Member

    @ayoitsjess – PPS as I mentioned in passing, I’m fairly sure you can’t link to URLs for each image in a gallery, so the gallery is only really an option for displaying a collection of photos :)

    Cheers

    Don Charisma

    #2345925

    doncharisma
    Member

    @ayoitsjess – you’re very welcome, best of luck :)

    Cheers

    Don Charisma

    #2345932

    doncharisma
    Member

    @ayoitsjess – PPPS – there’s also the “First Footer Widget” etc areas that you can use, might help with lining things up … only caveat is that these will show on all your pages !

    PPPPS – If you use ONLY “First Front Page Widget Area” (the others empty), the widget will do it’s best to span across the entire page, I know because I just tried it with a calendar widget on the footer :)

    Cheers

    Don Charisma

The topic ‘Model Sela theme after Demo more’ is closed to new replies.