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.
Related
I am creating a Beaver Builder Wordpress site and cannot figure out how to make a row's background image semi-transparent. I have the Theme Customize -> Content settings to a background color - no issues.
In specific row modules (i.e. containing only a text box) I'd like to add an image to the row background, but then make that image 20% opaque. I know that in CSS this should be possible, but as a new page builder I don't know WHERE to add this code. It seems like if I add an opacity=20% code to the Customize -> Additional CSS would it not apply to the entire site?
If anyone could lead me to the right place and the specific code to add I'd be most appreciative.
Thanks.
Is there any way to add social icon links in navigation for all the breakpoints using elementor in WordPress. I have managed to display them in a column on desktop but I am not able to display in mobile navigation
enter image description here
If you need icons to stay in a row with your logo(or any other thing) and not make a new row.
Well you have 2 options:
You can create a template (sections) and make put icons there, then add the template using shortcode widget. Just keep in mind, your section in header must have only 1 column and the widgets inside must be set to "inline".
You can have 2 or more columns and then add css class to each, then you will have to set "flex" in custom css. For example, you have columns with these css classes: .column1 & .column2
Now we go for custom CSS (doesn't matter on which widget you write this custom css):
.column1 {flex:1;}
.column2 {flex:3;}
Change number in flex based on what you need.
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.
I am working on a joomla 2.5 site and am required to insert a menu module at the the bottom i.e the footer of the template.I have three items in the middle div ( module ).All i want is that there is some spacing between the three items and also that the menu are displayed inline.so i did add a custom class suffix to the module and am using it in the CSS to exactly match the one i truly require but all i get is somehow my padding set to 0 and the padding-left that i specify in my custom CSS isnt applied.
Please help me with its
Display:inline
spacing between the items.
Please note that this custom CSS should be applied to ONLY AND ONLY this module.because otherwise the whole look of the lists and unordered lists of the site changes.
i am new to it so i am able to exactly figure why it doesnt work
First, in order to affect only the module with the menu you will want to add a module class suffix in the module parameters in the advance module options (it looks like you did that with bottom_footer_menu).
Next, margins don't work on inline elements. You will need to either float the LIs or set them to display as inline-block.
Is it possible to , in Drupal 6 using Views, to specify that an image should be shown only if it belongs to the page? I want to make a header image that's different for every page, so each page should show only the image that belongs to it, and none of the image that belong to other page. Or can I do this without Views? I've used ImageField to add the field for the image, but I want it to display in the header, not the content with the node stuff.
Maybe I misunderstand, but I wouldn't use Views for this. Am I correct that what you want is to display a given image in the header of a given page ? I can see two options :
1) If you page basically display one node, and If you add the image using an imagefield, then you could use CSS to move it out of the content and into the header (using absolute positioning).
Something like :
div.field-field-<your field name> {
position: absolute;
top: 50px; /* Adjust to fit your theme */
left: 0px; /* Adjust to fit your theme */
}
You should make sure you've left enough space for the image at the location you want it. This CSS should go in your theme.
2) You could use a block for each of the images, set the block to display only on the page you want. Go to /admin/build/block/add to create a new block. Add the image under 'block body' - this will depend on your setup, but the general idea is to select an input format that allows images (That is the HTML img tag) and enter the HTML to point to that image, eg. <img src='/path/to/your/image' width='50px' height='50px' />
Then under 'Page specific visbility settings' select 'show on only the listed pages' and enter the path of the page you want this image on.
Save the block, then go to /admin/build/block/list and drag the newly created block in the section you want it to show (eg. header).
Option 2. means you don't have to know CSS/Drupal Themeing, and that the way the page is formated is independant of the node content (which you may or may not want). The downside is that you may end up with a lot of blocks which will make things a bit unwidly. A cleaner way to achieve the same way is to use the context module : http://drupal.org/project/context
There are yet other ways to achieve what you want (Drupal is very flexible), but I hope these are good starting points !