I’m dealing with a number of challenges with designing my homepage (see http://dev.technologysedge.com). Things that I want to change are:
– Fix width for the page – Resizing the window page causes the slider and text box on the right to overlap.
– How to add a short code for column widths to be a percentage vs. 1/3 – 2/3 etc.
– CTA does not work properly. The CTA Style I’ve selected is Rounded w/ Right Aligned Button “Act Now” (which is not a button and located at the top). I want to pad the Heading 1st Line text and have tried to embed html code, spaces, etc., but nothing works.
– I would like to center the Header Menu vs. left justify. More Header Design Options would be nice.
– I want to change the font style in the text box to the right of the slider
– How do I add a r/h sidebar next to the Text Box above the Footer?
Thank you in advance for you help.
For the second one, note that when looking at a row in the visual editor, the tab that allows you to divide it into columns also has a “Custom Layout” link in which you can enter your own ratios: http://www.screencast.com/t/maAkRnRv2
For the sidebar by the text box above the footer, breaking the row into two there and making the right side a widgetized sidebar is also an option.
Hi,
1. For the first one try adding the rev slider and the text content like this: http://screencast.com/t/tIvpXH01
Result: http://screencast.com/t/cjKYuy8b
2. You can do it like @TheMediumUTM said and add it using custom layout http://screencast.com/t/avK5ot1Kn9c
3. Please provide more details/screenshot of what are you trying to archive and we will try to provide you a fix for it. I have tested the button and doesn’t seem to work we will look into this.
4. You can use this custom css in Theme Panel > Custom CSS filed to center the header main menu:
#td-top-menu .sf-menu {
display: table;
float: none;
margin-left: auto;
margin-right: auto;
}Try this ones: http://screencast.com/t/athHle0z
Thanks for the suggestion, will add more in the future updates if more people demand this.
5. Like i suggested above you can use an “Text Block” element for that and you can chose a custom class and use it to change the font style by adding a custom css like this:
http://screencast.com/t/owpfgD3uXp
6. Like @TheMediumUTM suggested you can use a row and split the row into 2/3 content and 1/3 sidebar.
Hope this helps!
Thanks
Thank you both for your suggestions. I have the following changes:
1. Lucian – Your example is how mine is configured, but the size is not fixed when the width of the window is changed. This is not a major issue, but if there is a setting I’m not using or some css code I should add to the page, please let me kno.
2. The 2/3 & 1/3 setting seems to be find for this application, so I will leave it at this setting.
3. Lucian – I don’t have a specific design in mind. I just wanted to take advantage of pre-designed functions and experiment with different color setting, buttons, etc.. for a Call To Action message (I’m not an accomplished graphics designer so a feature like this is helpful).
4. I incorporated your examples for centering the menu and expanded the spacing between the options.
5. I will make the change as you suggested.
6. This is handled as well.
Please let me know when you might have a fix for the CTA function.
Hi,
(1) Use this custom css, add in theme panel > custom css:
#rev_slider_1_1, #rev_slider_1_1_wrapper {
max-width: 100% !important;
}
.vc_custom_1407888735315 {
float: left;
}
@media (max-width: 767px){
div.vc_custom_1407609364791 {
background-color: white !important;
border-color: white !important;
}
}(3) Like I said we will look into this and try to fix it in the next theme updates.
(4) Try this css, I have tested it and should work fine for you too, no extra spacing added, just moved the menu to center: http://screencast.com/t/fQsFTy292CPO
.td-menu-wrap #td-top-menu {
margin-left: auto;
margin-right: auto;
display: table;
padding-left: 0px;
}Thanks for the message!
I would also like to right justify the top menu (on black background) next to the Log In and left justify the Date.
Thank you for your help.
Hi,
Try this css:
.td_ul_login {
margin: 0 65px 0 0;
}
.top-header-menu {
padding-left: 0px !important;
}
#menu-td_top {
right: -555px;
}Thanks!
I am still having some issues with the top header menu. If a WP user is logged in the login name wraps below and there is overlap. I currently do not need the WP login, but may want it in the future. I want to keep the 3 menu options right justified. I would I either disable the Login Icon or fix it so it does not wrap to multiple lines.
Hi,
Regarding your first issue you can target the username using this .td_user_logd_in class and enlarge the container via css.
You could also try this solution: https://forum.tagdiv.com/topic/top-header-login-widget-problem/#post-15488
Regarding the VC buttons we have this issue on out todo list and still working on it and we will try to fix this in the next theme updates, until then you could try to use the these buttons http://screencast.com/t/wYiWVWSU3 or find a plugin that dose what you need.
Thanks for the message
Hello,
I am still running into the problem with the homepage appearance with the window is resized. I just added an 768×90 image as an Header Ad per your example in the help files. The problem that occurs is that the image disappears when the width of the browser window is reduced. I would really like to just fix the size of the page to eliminate this issues. Also, I do not anticipate the requirement for our website to be compatible with smart phones (if this has any impact on the problem).
Thanks!
Hi,
Please make sure you have set the header ad like this from theme panel: http://screencast.com/t/Ruod2gmNl
Also, please make sure you add the ads into this div tags like explained in the demo:
* http://screencast.com/t/Ruod2gmNl
* https://forum.tagdiv.com/ads/
Of you don’t want that the ad to be shown on mobile make sure you add it for tablets and desktop and enable it to show on tables and desktop only from theme panel and leave it not top be displayed on mobile.
Hope this helps!
Thanks
I’ve implemented the header ad per your documentation, but the problem still persists.
Also, is there a setting to prevent the Revolution slider from blocking the drop down header menu (see “Solutions” option).
Thank you.
Hi,
This is how an image ad banner should look in the html structure: http://screencast.com/t/JymHSJwdqx
I have inspected your site and seems like you have an ad only for desktop, that is why the image it’s not displayed for other screen widths: http://screencast.com/t/rHBJUjnjWY
Please make sure you add your ad like this: http://screencast.com/t/m6wguhFmI
For the rev slider overlapping the drop-down menu use this custom css:
.td_revolution_slider {
z-index: 0;
}Thanks
Hi Lucian,
Okay, regarding the Header Ad, I get it now…I added the code per your example and it looks pretty good when the window is re-sized. It looks like I now need to figure out a way to shrink the tab sidebar.
I added the custom css for the Revolution slider but it is still in the forefront and overlaps the drop-down from the Header Menu. Any other suggestions?
thanks,
Bill
Hi,
Glad you figured it out, I did not understand yet why do you need to shrink the tabs, look good to me.
Regarding the rev slider please use this css instead of the previous one:
.rev_slider {
z-index: 0;
}I have tested it on your site and should work fine like this: http://screencast.com/t/3frR0Nh3iPz
Thanks
Hi Lucian – the css code worked. Thank!
How do I control the posts that are displayed on my homepage “block2” area. I have 6 posts and I wish to have 3 in the top porting using the larger thumbnail picture and 3 w/ the small thumbnail below. When I added the 6th post it only displays using the arrows on the right hand side.
Please help…
thank you.
Hi,
You can add them like this: http://screencast.com/t/fyQwFaji and use the tag filter to control the posts you want to show in each block.
Thanks
