Wordpress Gantry - how to split up mainbody in 2 ? - wordpress

Gantry for wordpress question :
Ive fallen in love with Gantry - wordpress theme, its really smooth and configuarable. I dont use it as a base for a blog but instead a simple webpage.
But have one problem that i cant figure out, i can configure all elements like the header, logo, navigation, etc. and splut them up in several elements.
But Content ( the pages ) will always show as one full width element in the middle, what i really would like to do is to split up the main body into 2 "tables" whereas content only shows in ex. a 400 pixel widht box, and then have a picture shown pr. page in the remaining est. 300 pixels on the right.
In the gantry settings menu i can go in and adjust "mainbody" but it just doesnt seem to work for content at all nomatter what i set it to and dont know how to be able to add an element to it as "mainbody" is not a widget you can configure.
Hope someone can help - thanks alot.

There is no way you can split main component into two positions, however you can use sidebars or you can use main-body-top and main-body-bottom positions last two can be splitted up to the 3 exact same positions ... my best advice would be that u use sidebars .. which widths and positions you can then manage in the theme settings.

Related

Aligning images in a single line in wordpress divi theme

I have a screenshot below which I have to replicate in Wordpress. I am using Wordpress Divi theme.
1st Image:
2nd Image:
Problem Statement:
I am wondering which option I should select in the New Module section of wordpress (2nd Image) so that I am successfully able to align images in a single line (1st image).
Obviously, you have to choose the Image module to insert an image. Insert each image in a separate Image module.
But before that, make sure you have inserted a row and all of these modules are inserted into that particular row.
Two primary options come to mind:
You can create a single image as a composite of the 7 images (logos) you show in your first example image. A potential disadvantage of this is the sizing and spacing will be fixed. Although, that could also be to your advantage, since the whole composite image can resize somewhat responsively, it might work just fine.
If you want to have 2 or more images in a Column stacked horizontally (as opposed to the default vertical stacking), you can add the following Custom CSS to the page (go to Page settings in Divi Builder; then the Advanced tab, then Custom CSS) on the Row into which you've put the images (seven of them, in your example).
.imageStack .et_pb_image {
display: inline-block;
vertical-align: top;
}
Shown here:
On the Row in which you want the images to stack horizontally, go to Advanced tab, then the CSS ID / Classes, and put in the class imageStack.
Shown here:
As for your second image ... it sounds like you didn't know you need to use the Image module. In your case, with method #2 above, you'll be using 7 image modules. The trick is then getting them to not stack vertically. Using method #2 above will achieve that.

Wordpress Genesis framework menu

There is something really strange happening with the menu on the child theme "Education" of the Genesis framework. This framework has two navigation positions: primary and secondary. As you can see here both appear one under the other in the red area. However, there is a third position that seems to be hardcoded in the child theme (?) and won't go away even if I don't assign a position to the menu.
Can you guys give me an idea what is going on? I'm not very good at this stuff. I tried looking into the child theme's code, but found nothing referencing this...
Ultumately what I want to do is use the top position (the one in the white area), but I can't, because I need to make the site multilingual, but that top position doesn't appear in the menu options, so I can't assign different menus for the different languages.
The white area at the top right is a widget area. The site already has two widgets in that Header Right widget area - a text widget (with the phone number), and a nav menu widget (the three locales).
You could make it two nav menu widgets. See Appearance -> Widgets, or use the Customizer. Alternatively, you could adjust the CSS, so that the red / grey locale 'tabs' become different looking links with a white background.
Also useful, if you do just need a single menu location there, would be the Genesis Header Nav plugin.

Bootstrap 3 fixed size template

I want to create fixed szie page, without common scrollbar. Scrollbars have only two div's, where content content goes beyond of div (contend data and sidebar listing area) as on picture. I alreay did it without bs3, and use javascript (for calculate new offsets on page resize).
http://i.imgur.com/4kesDk7.jpg
Today I tried to create fixed size template with Bootrstrap3, but i can't do it. It's possible to do using bs3? Anybody can show how it is done?
I tried modify this code http://www.bootply.com/0FG70wcT3B. I do left and right headers.

Customizr - Homepage slider between two sidebars

Is it possible to put the slider of the homepage between two sidebars? I tried to use 2 sidebars layout but they start after the three featured circles pages.
I would like that the sidebars are left and right of the slider.
How can achieve this?
Thanks in advance.
Im using "Meta Slider" plugin which meets my requirement. You can also set your slider"s width and length between 2 of your sidebars. Here is the plugin https://wordpress.org/plugins/ml-slider/

Aligning images - horizontally

If you go to my site: www.ryancoughlin.com - and if you see the Google, Yahoo, etc. RSS buttons on the right side of the page. I am trying to get them to align evenly, they are all the same image height and I have been trying to get them to evenly line up. But I have had no success.
Seems you are missing class="feed-image" on the Yahoo image.
Try to specify them as "inline" instead of block, this should allow you to treat them as words.
Another chance is to make a list (this seems appropriate since the nature of that "list" of images) and let the "li" elements float left (then adjust margins).
Also I think you should change your title in "Aligning images - vertically" to ease future users' search.

Resources