How to set HTML and CSS website on WordPress? - wordpress

I have a Website that is designed on Html and Css. Now I want to make it same as on WordPress. Tell me the best possible options that help me to create same as its style. I also want to add that css on WordPress.

You have several options for that.
1- Create your custom theme. this will allow you to add your HTML and CSS codes.
2- you can use page builders like Elementor and use the HTML element. then by adding your HTML and CSS codes that will render on the page.
Using both above methods will not allow you to edit page as you normally do using page builders. it has to be using HTML and CSS.
3- Re-create your website using page builders on wordpress, it will be easy and fast and you can make future edits easier.

Navigate to your Admin Dashboard.
You can use the WordPress Visual Editor to quickly add HTML files to
your website.
Click Pages in the left sidebar. Next, look at the left-hand
sidebar.
Choose an existing page or create a new one.
Click Add Block.
Add a 'File' block.
Choose your HTML file.

Related

How to create such buttons with Wordpress?

I'm very new to WordPress (tbh, it's my first time working with it). And I need to make a website as my school project using CMS. Creating pages with templates is alright, but I have a lot of troubles with buttons. I found this website, and I can see it using WordPress. I need such buttons as on this page https://movie-chooser.co.ua/random-movie-2/ (they appear when you hover over the image). Is this a default option for buttons in WordPress? If not, is there a plugin for this or what is the way to add them on my images?
First Install Elementor plugin https://wordpress.org/plugins/elementor/
and go to page when you add button and open page with elementor
and do drag and drop any element like button, space, text editor etc.
You have several ways to achieve that:
Overwritting Wordpress CSS
Using a plugin
Create your own shortcode
1 - Overwriting Wordpress CSS
If you manage to display all the elements using wordpress template, and your only issue is to display buttons over the images, then it should only be a matter of CSS
2 - Using a plugin
The idea here is to find a plugin that help you to create/display the informations you need (maybe you'll need to add functionnality to basic post though custom fields or using a custom post type).
Once you find the right plugin, again if the plugin dosen't directly offert some settings on the design then you'll have to overwrite the plugin's CSS rules to display the elements as you want.
3 - Create your own shortcode
If you're new to Wordpress I wouldn't recommend this method as it is kind of advanced, unless you're comfortable with PHP/HTML/CSS (optionaly JS).
This is the more flexible solution as you can basically control anything, but it will require you to understand some core concepts of Wordpress like WP Query and how custom queries works.
The idea here is to create a shortcode.
THis shortcode refere to a custom made PHP function, in which you can create a custom request to fetch the informations you need to display from Wordpress database, and display it in an HTML structure that you decide.
THen angain, you'll just have to customize it though CSS.
Note : no need to create a whole plugin if you decide to create a shortcode, you can use the template functions.php file for that.

How to have single-slug behave like a normal page in WordPress?

I'm making a website in WordPress, and I'm using a plugin ACF PRO. I'm doing the entire site with flexible content, so the WordPress site is like a page builder.
Everything is fine, however, I came to a point where I need to have same functionality for single-[custom-post-type], so I can "Add row", header, footer etc... on it, but I can't figure out on how to do it.
I know that it's possible, because e.g if you look at this site here: https://rolleragency.co.uk/our-projects/
You can see that it works. I know they are using flexible content because I worked on that site and I did there what I wanted. I can't remember how to do that.
I think I had to use a Tempate Page? Or? I can't remember.
THe site is built entirely on flexible content, so everything there is modular and it's like a drag and drop, but how do I do that on single-slug?
You have to create a page template, yes.
So something like page-projects.php then in WordPress admin you would have a page called Projects.
The template you created should be automatically applied to this page. If it doesn't for some reason you can choose which template WP should use on the right side when editing a page.
Now, you can add whatever code you need to the page-projects.php. And also any fields you may need for that page you can set up in ACF by telling ACF to apply those fields to pages that use projects template.
This is how I would and did do it on several occasions :)

Custom Page Templates in WordPress to show Content in specific layout

I want to create a custom page template in WordPress which shows Image Slideshow and then a video below it and finally some text - till now what I am able to do is play with sidebar, footer, header.
I can either remove them or keep them in my custom page templates but what I want to do is play with the page contents.
The Admin user should be able to see these sections in the Page Editor (WYSIWYG) when they choose the Template from the drop-down, so that they can accordingly add the correct content in correct place holders
Something like the attached screen-shot is showing
Is this possible in WordPress
Yes! It's possible to implement this! you can use https://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431 or https://wordpress.org/plugins/siteorigin-panels/ plugin.
The first plugin allows you to create different page layout and save it. It also allows admin to choose page layout that admin has saved previously.
The second page builder plugin allows you to create template same way and allows admin to clone one page layout to another one.
Hope this will help you!

Custom CSS with Headway Theme

I'm new to building websites.
I'm currently using Headway drag and drop Wordpress builder.
I've added Testimonial Widget by Aihrus plugin for testimonials, and I've added it to a widget box.
Problem is that I want to add custom CSS to it that I've seen on this site that is built for it, but the Headway theme doesn't allow you to go in and edit the theme. I've tried adding it to the block inside of the theme but it didn't work. I ended up going into the plugin and adding it to the CSS of the plugin, and it now half works.
Could someone please tell me what I'm doing wrong?
My site is rainorshinedogwalking.com
You can edit your live CSS here:
http://docs.headwaythemes.com/customer/portal/articles/1067360-editing-css-directly
What you type gets minified and added to your site's dynamic CSS file on page load.
All you have to is go through design editor click on the element you want to edit then right click. A pop up box should come up and it say edit element choose that then you will see something like that click it and add our own css

drupal: adding simple links to a block

im using Views to output a block, containing latest post titles - simple and working. id now like to add some text links that should be different than the "more" link you can add through the Views UI. they are basically just p-tags with a-tags inside, pointing to a url of my choice.
right now i just inserted the markup in Basic Information > Footer > Full HTML.
is this the standard way of achieving what im after?
You can write custom templates for each row in a view if you want. Have a look at views 2 theming
Theming is a good way to do it but then it adds an additional responsibility to move the theme file when you move the view from one site to the other.
The header and footer are provided so that you can add html and php code to it, so it is definitely the right way to do it or else it would not have been provided in the first place by the module developer.
Also if the urls are related to the drupal site then I would suggest you to use php mode and add the link using l function (http://api.drupal.org/api/drupal/includes--common.inc/function/l/6)

Resources