custom blog design This is a topic that many people are looking for. museumoftechno is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, museumoftechno would like to introduce to you How to create a Custom Blog Layout. Following along are instructions in the video below:
“And welcome to this new experience at oriel. I will now show you how to to create a custom blog layout by using the ux builder to start off with will have to write some posts that can be displayed on your page. We ve already got some pre written posts the second thing we have to check is that there isn t a static page connected to the blog. So if we go to the theme options.
We can go down the list to the static front. Page tab and the drop box under the post page should not be assigned to any page as you can see here now wicking out onto the page. In which you want to create the custom blog layout and open. The page in the ux builder.
The page is now opened and we can start to create the layout by adding. A new element. Which is called blog posts. This serves as a layout tool and an element together.
We will now get a list of options and we can change the style to shade and you will see the text coming in front of the picture. You can also see that the posts are displayed in a slider..
So we can get to the layout type and change it to row. We can start off by having one big latest post on the top. So we can change it to one column and also change the total posts to one you can also select a custom post to show as well as posts from specific categories. We can change the title size and everything will change in real time change.
How the date is the spade at the category change the height. A day overlay you and we can also add some background color behind a text in order for it to be a bit more clearer. There we go so that s the first element. We want to make just to make the latest posts stand out a bit more so as you can see on the top here.
It s a bit squished up to the banner and that s because we ve got a full width template applied to the page. So we can go ahead and add a gap now we can get to the second row of posts. So let s create another blog post element. This time.
We can add a bounce style and you can see it bouncing up as i hover over them. We also want to have it in a row instead of the slider and change the number of posts to three seeing that we don t want a big lists of post as you can see the first post in the row is exactly the same as the one on top that s because we haven t told..
The element where in the posting order. We are so we can make the element skip. One post to go straight to the number two in the order again. We can add an overlay on the images.
But let s add a background color on the text bounce you for the next layer we can make it stand up more by adding a section in the layout variations and instead of selecting any of the presets. We can just customize it ourselves and add a dark color just make it a bit lighter. You we can now add blog posts in the section. So for this one.
We can add a vertical style and put the columns to one and we re just going to have one on the top again so we can put it in the row. And we can go down to the image settings. And decrease the width of the image. So that the text gets some more space and then using the tooltip on the top.
We can select the four to three option and as you can see again is the same as the post on the top. So we had to add an offset to it this time..
We can skip four as the four first blog posts are already displayed above which means that this will be the fifth post. Now as you can see the text is dark. Which doesn t fit well with the dark background and to solve that we can just go to the options on the section and select light in the layout color. And if we can make the text a bit bigger at the data s text add the category and we can also align the text to the left.
We only want one post at the top. So we can write one in the total posts. Hey. Well yeah.
Let s create the second row in the section. Make it normal put in a row. This time we like three posts like we did earlier. But we can add the offset first and then add three in the total posts.
I can see now that i d like a read more button in the post on the top. So we can click on it and add it to the options..
So we just go to the read more button and write the text. We like to be on the bottom perfect. Now we can get out of the section. Again by creating the blog post element.
Under the section. We can put it in vertical style again put it in a row two columns to fit the text butter. We just leave the total purse as it is so that we can list all the posts on the end of the page. We can also add read more buttons on them decrease the width on the images let s make it 4 3.
Again and we can add a gap on the top. We can also align the text to be on the left. Then we finished we can now update the page exit. The builder to see that now we ve created a custom blog layout.
Thank you for watching all the articles on the topic How to create a Custom Blog Layout. All shares of s-star.org are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.