0

I'm Looking for a way to create the grid as on the pictures. A 12 columns based layout with a simple way to add text, images, video etc. etc. Tried the Bootstrap way without success. I’m up for everything. Anyone?

enter image description hereenter image description here

3
  • can you show us how did you tried bootstrap way? you should be able to achieve this with bootstrap. Also this could be better suited in StackOverflow
    – Vishwa
    Commented May 9, 2019 at 4:56
  • Welcome to WordPress Stack Exchange :-)! We love to help. Unfortunately tutorial requests are out of scope. Please provide and narrowly scoped and detailed question and provide information about what you've tried yourself so far and where exactly you are stuck. Many thanks
    – leymannx
    Commented May 9, 2019 at 10:09
  • @Vishwa the problem with Bootstrap was not the code. I could not just find a way to put it in to Wordpress. Followed a tutorial.
    – Smekis
    Commented May 9, 2019 at 10:54

2 Answers 2

0

Depending upon the css framework you can use grids, menus, lists to create your layout. You should not use grids for all of your elements.

Example

For the top logo-menu, you should use a row then inside the row 4col for logo and 8col for the menu. And then for creating the menu you will use ul > li. Adjust the spacing with paddings and margins.

Basic Structure using Bootstrap 4

I have created a basic structure for your understanding. Please see this pen https://codepen.io/talentedaamer/pen/qGbRBb

11
  • I love this and seen it and I understand it, big thanks! But I can't find a way to implement this in Wordpress. Do you think is it possible?
    – Smekis
    Commented May 9, 2019 at 10:19
  • In WordPress there are many ways to do this. 1 create a page-template 2 if its home page then create front-page.php file or home.php file etc. Commented May 9, 2019 at 10:21
  • page-templates are stand alone pages with different designs. you can read more about page templates here developer.wordpress.org/themes/template-files-section/…. create page template, add your layout and then assign it to a page. Commented May 9, 2019 at 10:24
  • Thanks again! Is it easier to modify a theme? Like the Worpdress standard theme Twenty Sixteen?
    – Smekis
    Commented May 9, 2019 at 10:30
  • Depends upon your experience. The best approach is to create a child theme you can read more about child themes here developer.wordpress.org/themes/advanced-topics/child-themes. create a child theme -> create a page template -> implement your design -> set page template to a page. done !. Commented May 9, 2019 at 10:33
0

CSS grid might be the most useful solution for your case. Consider reading this article: https://css-tricks.com/snippets/css/complete-guide-grid/

1
  • I can't find a way to implement this to Wordpress.
    – Smekis
    Commented May 9, 2019 at 10:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.