Wordpress managing custom sections - html

Let's say I have a home page on which there is menu. Below it some text (added via Page) and below that a footer. If I want to add a custom section below the content (let's say one DIV with background image and text on top of it) that user could change, how would I do something like that? Or if I want to create DIV with background image and some text on top of it.
I am familiar with custom posts and custom fields, but that seems like an overkill for something like this.
Basically, I am looking for the easiest solution on which I could manage several "custom" sections (6-7) all over the site.Those sections would basically only be text, images and links. Maybe creating 6-7 widget places and then assigning their places where I need.

Purchase a theme with Visual Composer (or integrate the Visual Composer plugin to your site yourself - not for beginners). Visual Composer will allow you to easily create divs with text and images by simple clicks and drag/drop capabilities.

Related

Wordpress custom page by Visual Composer

I'm using Visual Composer creating some pages in WP and in the middle I have to do two things
1.create a button with a background img (single image) but with two other small images on both sides.
2.A carousel contains custom scrollbox like this example http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html in each slide.
I try but really don't know how to do that in Visual Composer.
so I want to ask if I can do that individually by html,css,bootstrap then include it in my page? and how to do that then continue to work with VC because it looks some specific things can't be done in VC. I really can not find the solution for weeks, please help me.

Squarespace Custom CSS - How can I bring an image in front of default blocks?

I'm helping a friend who's making a website with Squarespace, and I'm trying to add a picture of her in front of her "About" page; the problem I'm having is that I can't get the picture to sit on top of the Squarespace content blocks. Anyone know if there's a way for me to override the default stuff?
I've already tried applying z-index and position:relative with a <span> tag, and that didn't seem to do anything.
What you're describing is probably not the way to do it on Squarespace. Since Squarespace is a CMS you'll want to leverage as much of the built-in tools as possible before moving into the Custom CSS.
I've never heard of the request to place an image above other content. Typically you're placing the image underneath. Regardless, a great way to do images in front other images is by using Squarespace's built in Gallery Block set to Grid mode. This would give you one block with two images in the same container which you could then add styling to customize. Link: https://support.squarespace.com/hc/en-us/articles/206544027-Using-the-Grid-Gallery-Block

Full-width image with links

I need a full-width image with labeled sections to link to individual pages. Any suggestions how to make this happen? The web site is built on WordPress, so if a plug-in will accomplish this that will work too. Method needs to be responsive and not break apart as viewport is reduced.
For example, Section 1 needs to link to the Section 1 page, etc.
See image at
Well, if you want to have something like that and responsive, you should cut the image in as many pieces as items you need, create an element for each piece and set the image as background. There rest is mediaqueries, maybe you can do it with bootstrap.
Also, try to go to the design community, as this is more related to design than anything else, and I don't think a Wordpress plugin exists for this.

Replacing Social Media Icons with Custom Images

I'm wondering how to replace my social media icons with my own custom images. For example instead of using the typical Facebook Like button or Twitter follow button I would replace it with my own image, while keeping the same functionality.
Websites like BuzzFeed and SuperCompressor are good examples that it can be done. Each has replaced the Facebook Like button with a custom image but the functionality remains the same.
I'm having a hard time finding any information one the web. Can anyone guide me in the right direction?
As the place you will find this image may depend on the plugins and themes you use, you have to find out where the actual image comes from.
To do so, I would suggest that you install a browser such as Chrome that allows you to inspect an element on your page (will open the portion of code displaying the selected item). Once you see where the image comes from, you can either replace the actual image with a custom one if it's on your website's server, or search your website files for this image's URL and replace it with a link to the image of your choice.
I think something like
this http://www.inboundnow.com/apps/facebook-like-button-generator/
might work but the google search for
custom facebook like button for website
has a lot of results
EDIT: Well if you already know how to make a custom image you can follow
https://stackoverflow.com/questions/9493988/how-to-trigger-facebook-like-button-from-custom-button
to make your custom image into a facebook like button
`http://jsfiddle.net/masondesu/haxvL/`
This site also has some info

How would I go about making popout divs?

My page is called services and is going to be like a list of all the different services but instead of links I want them to be little graphics (I know how to do them ) and when they are clicked they open a box on top of the webpage, in the center, which displays two divs, an image on one side and text on the other?
jQuery UI is a great tool (heavy though).
Here is the page with demos and documentation you are probably looking for: http://jqueryui.com/demos/dialog/