three widgets on front page sela theme
-
Hi!
I am using the SELA theme for my blog, and I’d like to recreate exactly how the authors front page is on https://selademo.wordpress.com ..
I was able to add the three widgets on the front page.. but what I would like to do is be able to add a photo to the text widgets and also have each text widget linked to another page- JUST like on the demo… Like how it says READ MORE and you click on it and it takes you to another page…. I would like to make a grid page from one of the widgets….How do I do this??
Any help would be appreciated as I am completely lost here!
My blog is dreamfitbefit.comThe blog I need help with is: (visible only to logged in users)
-
Hi there,
The demo uses Text Widgets and then adds Text Widget Links to manually create the “Read more” links there. Those “Read more” links go to pages that are already published on the site.
For example, you could set up a text widget and add code like this to create a “Read more” link to your existing About page:
<p>This is an example of a page. Unlike posts, which are displayed on your blog’s front page in the order they’re published, pages are better suited for more timeless content that you want to be easily accessible, like your About or Contact information. <a href="http://dreamfitbefit.com/about/">Read more →</a></p>Please let me know if I can do anything more to help with that. :)
-
Excellent! I will try that later tonight… Another thing I need help with… If you notice on the authors second text widget When you click on read more it brings you to a new page that is in a grid layout.. How can I accomolish this grid layout template?
Thank you!
-
That grid layout is created with the Sela theme’s grid page template. (You can find details about setting up all of the Sela theme’s templates on the Sela theme page.)
Here’s a quick rundown for setting up that grid page:
To get started, first create or edit a page, and assign it to the Grid Page template from the Page Attributes box. The content of this page and featured image – if one is set – will be displayed above the grid.
To add items to the grid, create additional pages and set their parent page in the Page Attributes box to the grid page you just created. Be sure to set a featured image for each child page if you want an image to show up inside the grid. Repeat these steps for every item you want to display in the grid.
Let me know if you have any questions about that! :)
-
Ok I will try that tonight as well. One more question. On the front homepage there is a white box that appears over pic. Is there a way to make that smaller and to also align to the left or right instead of center? This is so hard lol!
Thank you for your help I can’t wait to try all this!
-
Sure! You can use Custom CSS (part of your WordPress.com Premium upgrade) to make adjustments to the theme’s design like that.
If you’re new to CSS, I’d recommend looking over some of our tips for getting started:
That last page explains the approach that I’m using to help with your question about that white box. I’m checking your theme’s CSS and figuring out what CSS will make the changes you’re looking for. With any CSS you want to try out, you can add it to your site’s customizer, in the CSS section there.
Let’s look at the two changes you mentioned separately:
First, you mentioned making the box smaller. That box will get bigger or smaller depending on the text you enter there, but there are some things you can do to change its size. For example, you can remove the padding (the space around the text) and reduce the maximum width of the box with CSS like this:
.front-page-content-area .with-featured-image { padding: 0.5em; max-width: 400px; }You can change the “0.5em” and “400px” values in that CSS to get the look you want there.
Second, you mentioned aligning the box to the left or right. You can use the same CSS selector (that’s the part in the first line of the code I gave you above) and just change the left or right margin on that box.
This would align the box all the way on the left:
.front-page-content-area .with-featured-image { margin-left: 0; }And this would align it on the right:
.front-page-content-area .with-featured-image { margin-right: 0; }Please let me know if you have any questions about that. :)
-
Hey! I have tried all of this and it seems like I am getting the knack of it…
There’s two other things that I am looking to accomplish on the home page:
1.) The main photo doesn’t span the entire width of the site. I’d like it to go all the way across to the right. How can I do this?
2.) I’d also like to make that white box on the front picture more translucent, and not as white. Is there a way to do this as well?
Thanks for your help!
Danielle
-
-
-
Hi Danielle, I’m so glad you got those other questions figured out! I see you posted about them in the CSS Customization forum — that’s a great place to get tips for customizing your site with CSS. :)
Please let me know if I can do anything more to help!
-
Hey Rachel,
You helped me earlier on when I had a question about making the front picture spread across the whole content area.
I’m having trouble with this of my post under the train fit section.
the photo does not span across the whole content area of the post..Is there a way i can make it do this with custom CSS like I did before? What would the wording have to be for this ?
-
Hi Danielle,
For a featured image like that to span the whole content width of the post, it should be at least 820 pixels wide. Your image is only 360 pixels wide, which is why it doesn’t span the whole post. Do you have a wider image you can use there?
- The topic ‘three widgets on front page sela theme’ is closed to new replies.
WordPress.com Forums 